Lecture Administration and visualization: Chapter 8.2 - Interactive visualization

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:31

Thêm vào BST

Báo xấu

8
lượt xem 4
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lecture Administration and visualization: Chapter 8.2 - Interactive visualization

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 • 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 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 = d3.select('svg'); var selection = svg.selectAll('circle').data( data ); selection.enter().append('circle'); selection.exit().remove(); selection.call( 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 possible to switch from two sources of data or just modify an existing series and update the chart 20