Highly Engaging and Dynamic Datadriven Visualization with Javascript

Highly Engaging and Dynamic Data-driven Visualization with Javascript 1 B. RAMAMURTHY Rich's Big Data Analytics Training 9/15/2021

2 web Semantic discovery CSE 507 Introdu ction 2008 Deep web Parallel HPC Social media & engagement Big data & analytics Automate (discovery) Discover (intelligence) Transact Integrate scale Interact Inform Publish Evolution of Internet Computing Social web time 9/15/2021

Outline of topics 3 �Motivation for learning javascript �Javascript everywhere �The three amigos [1] �Hands-on introduction to HTML+ JS+CSS �Explosion of JS Libraries � 3 D library in three. js: examples [3] �Data driven library in d 3. 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/15/2021

“Concept count” 4 � 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/15/2021

Javascript everywhere 5 � Java. Script (sometimes abbreviated JS) is a programming language that is widely used to give sophisticated functionality to web pages. � “The “Java. Script 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 Red. Monk. . � Exists in all smart phones, all web pages, . . Found in No. SQL DBs. � A convenient interface to many social media applications � “Once a bit player, Java. Script 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/15/2021

Javascript 6 �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/15/2021

The three amigos 7 “The “three amigos” are: 1. Jquery: Js library: Rapid web development 2. Node (. js): powerful open source server application development system 3. Mongodb: open source JS interfaced document based No. SQL DB. With Mongo. DB, Java. Script can be used in queries, and aggregation functions (such as Map. Reduce) are sent directly to the database to be executed. Rich's Big Data Analytics Training 9/15/2021

Overview 8 �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 d 3. js Rich's Big Data Analytics Training 9/15/2021

Introduction to JS 9 �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/15/2021

Idea: Structure – Style -- Interaction 10 �HTML provides structure �CSS provides style �Javascript (script) provides control for interaction and operations (functions) Rich's Big Data Analytics Training 9/15/2021

Exercise with all three components 11 <!DOCTYPE html> <head> <title> My first Java. Script </title> <style> h 1{color: blue} </style> </head> Head Style/css <body> <h 1> <script> document. write("Hello World!") </script> Body </h 1> </body> Script/js </html> Rich's Big Data Analytics Training 9/15/2021

Separate files for style and scripts 12 <!DOCTYPE html> <head> <title> My first Java. Script </title> </head> Head. css file Style/css <style> h 1{color: blue} </style> <body> <h 1> js function outside </h 1> Body </body> </html> Script/js. js file function mywrite() {document. write("Hello World!"); } Rich's Big Data Analytics Training 9/15/2021

Moving CSS, JS to an external files 13 �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/15/2021

JS functions 14 �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 say. Something() { alert(“ We are learning basics of JS”); } Rich's Big Data Analytics Training 9/15/2021

Putting all together 15 Ja Li vasc br ri ar pt ies . html file image and audio files . css file . js file Web browser Firefox/ Safari interprets application displays ) ss c. ( es yle rari t S ib L Prepare/edit files Rich's Big Data Analytics Training 9/15/2021

Examples 16 �Lets look at the examples from three. js, d 3. js, dc. js Rich's Big Data Analytics Training 9/15/2021

Visualizations 17 �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/15/2021

HTML 5+DOM 18 �No matter what the backend, HTML and Java. Script are the technologies for all web developers for front end. Rich's Big Data Analytics Training 9/15/2021

HTML 5 Visualization 19 �Web workers (multi-threaded Java. Script) �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/15/2021

Dealing with Social media 20 �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/15/2021

Social Customer 21 �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/15/2021

D 3. js 22 �D 3: data driven documents/dynamic visualization �D 3. js offers a rich collection of javascript functions �“D 3. js is a Java. Script library designed to display digital data in a dynamic graphical form. It helps you to bring data to life using HTML, SVG, and CSS. D 3 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/15/2021

D 3 Overview 23 �Data driven �Dynamic documents vs old school static �Enable interaction �Goal of visualization should be encourage response from the users. D 3 supports this “reactivity” �Visualization: activity �Response from the user to the visualization: reactivity Rich's Big Data Analytics Training 9/15/2021

Animation 24 �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 �D 3 features transitions as an important operation Rich's Big Data Analytics Training 9/15/2021

Javascript Data feed 25 function load(){ // <-E d 3. 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/15/2021

three. js [3] 26 �This is possible with three. js library for 3 D �Three. js is a library that facilitates programming Web. GL from javascript allowing superb 2 D and 3 D animations and interactions in html. Rich's Big Data Analytics Training 9/15/2021

Jquery 27 �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/15/2021

Jquery Overview 28 �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/15/2021

Summary 29 �We studied basics of the Javscript-based application �We studied the power three of the numerous javascript libraries: three. js, d 3. 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/15/2021

References 30 �J. Cuomo. Java. Script 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 3 D Library for Web. GL, Packt books, October 2013. �N. Q. Zhu, Data visualization using d 3. js cookbook, packt publishers, October 2013. �Jquery Cookbook. O’reilly 2009. Rich's Big Data Analytics Training 9/15/2021