Highly Engaging and Dynamic Data-driven Visualization with Javascript B. Ramamurthy Rich's Big Data Analytics Training 9/17/2018
Evolution of Internet Computing CSE507 Introduction 2008 Deep web Social web scale web Parallel HPC Semantic discovery Social media & engagement Big data & analytics Automate (discovery) Discover (intelligence) Transact Integrate Interact Inform Publish time 9/17/2018
Outline of topics Motivation for learning javascript Javascript everywhere The three amigos [1] Hands-on introduction to HTML+ JS+CSS Explosion of JS Libraries 3D library in three.js: examples [3] Data driven library in d3.js[4] Dynamic control of a HTML application using Jquery.js Data Strategy: Dealing with Social Media: follow or lead?[2] Rich's Big Data Analytics Training 9/17/2018
“Concept count” Web boom 1.5 millions apps Interactions leading to transactions “…the number of technologies, application programming interfaces (APIs) and techniques that an enterprise application developer must master these days. I like to use the notion of a “concept-count” to represent the number of concepts that a reasonable developer needs to keep in their heads to accomplish a task.” Concept count: how many concepts do you have to know to design and implement an application? 8+ according to this paper How to this minimize this “required concept count” inflation? Rich's Big Data Analytics Training 9/17/2018
Javascript everywhere JavaScript (sometimes abbreviated JS) is a programming language that is widely used to give sophisticated functionality to web pages. “The “JavaScript everywhere” movement holds the promise of dramatically reducing the concept-count for developers.” to 3. Most used language: simple and light weight Ranked #1 by RedMonk.. Exists in all smart phones, all web pages, .. Found in NoSQL DBs. A convenient interface to many social media applications “Once a bit player, JavaScript increasingly takes center stage. Its footprint—the space it takes up on our servers and in our development schedules—continues to grow.” Javascript MVC, J. Snook, 2009 It has been there since the dawn of the Internet, it is still standing, when Java applets, aglets etc. have vanished. Millions of pages are dependent on it, it is here to stay and flourish. Rich's Big Data Analytics Training 9/17/2018
Javascript More importantly analytics and visualization are NOT all about charts, maps, data plots; it is also about Product visualizations and ad placements Uniform delivery to all types of media Answering queries and dynamic updates to the content Engaging the social-media generation for a different kind of marketing What can help accomplish this? HTML+ JS+CSS+ the rich set of libraries Rich's Big Data Analytics Training 9/17/2018
The three amigos “The “three amigos” are: Jquery: Js library: Rapid web development Node (.js): powerful open source server application development system Mongodb: open source JS interfaced document based NoSQL DB. With MongoDB, JavaScript can be used in queries, and aggregation functions (such as MapReduce) are sent directly to the database to be executed. Rich's Big Data Analytics Training 9/17/2018
Overview We will begin with simple exercises on HTML (UI)+JS (control/action)+CSS (style) We will focus on separation of the various components. Then we will drop the style (css) and focus on a few popular js libraries: three.js and d3.js Rich's Big Data Analytics Training 9/17/2018
Introduction to JS HTML + JS + CSS HTML provides tags for structure CSS provides style attributes for the HTML selector tags JS provides functions that can be called to perform operations Rich's Big Data Analytics Training 9/17/2018
Idea: Structure – Style -- Interaction HTML provides structure CSS provides style Javascript (script) provides control for interaction and operations (functions) Rich's Big Data Analytics Training 9/17/2018
Exercise with all three components <!DOCTYPE html> <head> <title> My first JavaScript </title> <style> h1{color: blue} </style> </head> <body> <h1> <script> document.write("Hello World!") </script> </h1> </body> </html> Head Style/css Body Script/js Rich's Big Data Analytics Training 9/17/2018
Separate files for style and scripts <!DOCTYPE html> <head> <title> My first JavaScript </title> </head> <body> <h1> js function outside </h1> </body> </html> Head .css file <style> h1{color: blue} </style> Style/css Body Script/js .js file function mywrite() {document.write("Hello World!");} Rich's Big Data Analytics Training 9/17/2018
Moving CSS, JS to an external files We can separate style elements in css file, behavioral elements can be moved to an external js file. This separation of concerns has resulted in explosion of javascript libraries and css style libraries. CSS libraries: See for the most popular css libraries available on github http://www.designyourway.net/drb/the-most-popular-css-libraries-that-are-on-github/ Extraordinarily large collection of superior and highly useful and popular js libraries Rich's Big Data Analytics Training 9/17/2018
JS functions Javascript “script” consists of functions. A function consists of function followed by the name of the function The statement that make up the function go next within curly brackets Example: function saySomething() { alert(“ We are learning basics of JS”); } Rich's Big Data Analytics Training 9/17/2018
Putting all together .html file .css file application Web browser Javascript Libraries .html file .css file application Web browser Firefox/ Safari image and audio files .js file interprets displays Style(.css) Libraries Prepare/edit files Rich's Big Data Analytics Training 9/17/2018
Examples Lets look at the examples from three.js, d3.js, dc.js Rich's Big Data Analytics Training 9/17/2018
Visualizations Great visualizations are not just informative but initiate conversations, explosion of free social media communications/messaging/instagramming etc. result in valuable free marketing to target customer segment Great visualization tells a story instantly Excel is de facto standard but it is designed as a data entry application and optimized for graphs/plots: not good for unstructured and social media data; look beyond excel tables and graphs Interactive visualization provides new modes of engagement previously impossible Opens up previously invisible aspects of data Rich's Big Data Analytics Training 9/17/2018
HTML5+DOM No matter what the backend, HTML and JavaScript are the technologies for all web developers for front end. Rich's Big Data Analytics Training 9/17/2018
HTML5 Visualization Web workers (multi-threaded JavaScript) Touch events for touchscreen devices Micro-data formats Canvas Scalable Vector Graphics (SVG) Touch screen Camera API Geolocation API Offline data Rich's Big Data Analytics Training 9/17/2018
Dealing with Social media Two diverse approaches: you lead your customers and/or you follow your customers and understand the behavior of your customers Lead your customers: support consumers make decisions in a predictable way. Social media is a marketing powerhouse: tap into it, it is free mostly Look at the white paper by Mckenzie [2]. Rich's Big Data Analytics Training 9/17/2018
Social Customer Creating a buzz Learning from customers Targeting customers Monitor Respond Amplify: involves designing your marketing strategy to have an inherent social motivator that spurs broader engagement and sharing. “Experience Economy” Lead: proactively lead customers toward long-term behavioral changes. Convert knowledge to action Rich's Big Data Analytics Training 9/17/2018
D3.js D3: data driven documents/dynamic visualization D3.js offers a rich collection of javascript functions “D3.js is a JavaScript library designed to display digital data in a dynamic graphical form. It helps you to bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today.”[4] Rich's Big Data Analytics Training 9/17/2018
D3 Overview Data driven Dynamic documents vs old school static Enable interaction Goal of visualization should be encourage response from the users. D3 supports this “reactivity” Visualization: activity Response from the user to the visualization: reactivity Rich's Big Data Analytics Training 9/17/2018
Animation Animation can bring to focus important things: our eyes are sensitive to movement; so moving chart Animations like growing, fading in and out, moving, splashing etc. add expressiveness to animation Animation can highlight prominent features D3 features transitions as an important operation Rich's Big Data Analytics Training 9/17/2018
Javascript Data feed function load(){ // <-E d3.json("data.json", function(error, json){ // <-F data = data.concat(json); render(data); }); Render(data) could be a function that does any of the animations we discussed. Rich's Big Data Analytics Training 9/17/2018
three.js [3] This is possible with three.js library for 3D Three.js is a library that facilitates programming WebGL from javascript allowing superb 2D and 3D animations and interactions in html. Rich's Big Data Analytics Training 9/17/2018
Jquery Jquery is an Open Source javascript library that simplifies the interactions between the Document Object Model (DOM) of HTML and Javascript. Plain JS file is made up of functions, whereas Jquery features functions that are responsive the HTML selectors and modifies the DOM/HTML document. Rich's Big Data Analytics Training 9/17/2018
Jquery Overview Finding HTML elements and invoking operations/functions for them Chaining multiple jquery methods on a set of elements Implicit iteration: keep checking the UI or scan the page and update when changes happen Rich's Big Data Analytics Training 9/17/2018
Summary We studied basics of the Javscript-based application We studied the power three of the numerous javascript libraries: three.js, d3.js and jquery.js We can create stunning visualizations, animations and evoke reactivity from the viewers using these open source free libraries While R and R packages are good for after the fact data analytics, your JS applications on social web and mobile strategy can help in engaging your customers and “leading” them to be your loyal “followers” and promoters. Rich's Big Data Analytics Training 9/17/2018
References J. Cuomo. JavaScript Everywhere and the Three Amigos, IBM corp., Sept 2013. R. Divo, D. Edelman, H. Sarrazin. Demystifying social media. Mckenzie Quarterly, April 2012. J. Dirksen. Learning Three.js: Javascript 3D Library for WebGL, Packt books, October 2013. N.Q.Zhu, Data visualization using d3.js cookbook, packt publishers, October 2013. Jquery Cookbook. O’reilly 2009. Rich's Big Data Analytics Training 9/17/2018