Lecture Administration and visualization: Chapter 8.2 - Interactive visualization

Lecture "Administration and visualization: Chapter 8.2 - 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!
Nội dung trích xuất từ tài liệu:
Lecture Administration and visualization: Chapter 8.2 - Interactive visualization1 Chapter 8Interactive Visualization Part 2: D3 JS 2Outline1. Introduction2. D3 Charts3. Interacting with charts4. References 31. Introduction to D3 JS• 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• d3js.org 4Advantages 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 5Disadvantages of D3• D3 is bad at • being a chart library • rendering things • abstracting basic graphic primitives 6Base components• HTML• CSS• JavaScript• SVG 7D3 vs Jquery• D3 is a little like jQuery 8D3 vs Jquery• D3 is a little like jQuery 9Library Loading• Including the following script in , tags of the web page 10D3 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 11Examplevar 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; }); }; 12Examplevar svg = d3.select(svg);var selection =svg.selectAll(circle).data( data );selection.enter().append(circle);selection.exit().remove();selection.call( visualize ); 132. 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 14Pie chart• Using .arc(..) of d3 to draw each part of the pie chart• Load the library• Create a div to display the graph 15Pie chart• ff 16Pie chart The pie() function takes the input and return the coordinates of each part of the pie 17Pie chart The arc() function helps draw each part of pie 18Pie chart 193. 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 possible to switch from two sources of data or just modify an existing series and update the chart 20