tailieunhanh - Lecture Administration and visualization: Chapter 8.2 - Interactive visualization

Lecture "Administration and visualization: Chapter - Interactive visualization" provides students with content about: Introduction to D3 JS; D3 Charts; Interacting with charts; . Please refer to the detailed content of the lecture! | 1 Chapter 8 Interactive Visualization Part 2 D3 JS 2 Outline 1. Introduction 2. D3 Charts 3. Interacting with charts 4. References 3 1. Introduction to D3 JS is a JavaScript library for manipulating documents based on data Allow to build shapes with SVG Scalable Vector Graphic a vector image format D3 Data Driven Documents 4 Advantages of D3 Providing a way to map data to documents Being a general purpose visualization library Handling data transformation Providing basic math and layout algorithms 5 Disadvantages of D3 D3 is bad at being a chart library rendering things abstracting basic graphic primitives 6 Base components HTML CSS JavaScript SVG 7 D3 vs Jquery D3 is a little like jQuery 8 D3 vs Jquery D3 is a little like jQuery 9 Library Loading Including the following script in tags of the web page 10 D3 Concepts D3 let users to choose how to visualize their data D3 just build the DOM Document Object Model Use selectAll . .data . to build data and DOM Append new elements on enter Remove them on exits Separate visualization from data 11 Example var data 10 20 5 8 15 var visualize function selection selection .attr cx function d i return i 80 50 .attr cy 50 .attr r function d i return d 2 12 Example var svg svg var selection circle .data data .append circle .remove visualize 13 2. D3 Charts Original data array of objects from the page D3 will map values to shape values Graphic chart a function that paints using SVG path 14 Pie chart Using .arc . of d3 to draw each part of the pie chart Load the library Create a div to display the graph 15 Pie chart ff 16 Pie chart The pie function takes the input and return the coordinates of each part of the pie 17 Pie chart The arc function helps draw each part of pie 18 Pie chart 19 3. Interacting with charts D3 provides function to play with data The interaction means to switch from one data series to another with smooth transitions It is .