Upload
others
View
15
Download
0
Embed Size (px)
Citation preview
D3.js Data Driven DocumentsData-Driven Documents
—— IV Course Spring’14
1
Outline• IntroductionIntroduction
– Introducing D3– Technology FundamentalsTechnology Fundamentals– Data Formats
• Getting start with D3Getting start with D3• Data• Scales• Scales• Interaction and Transitions
2
Introduction
3
4
Introduction – what is D3• d3.js
– JavaScript library for creating data visualizations.
• Data-Driven Documents– Documents means anything that can be rendered by a web
browser, such as HTML and SVG– D3 does the driving it connects the data to the documentsD3 does the driving, it connects the data to the documents
• you may use, modify, and adapt the code for y y , y, pnoncommercial or commercial use at no cost.
5
Introduction – what it does• Loading data into the browser’s memory
• Binding data to elements within the document, creating new elements as neededg
• Setting the visual properties of those elements
• Transitioning elements between states in response to user inputuser input
6
Introduction – HTML
• Hypertext Markup Languageused to structure content for web browsers– used to structure content for web browsers
– stored in plain text files with the .html– Adding Structure with Elementsg
7
Introduction – SVG• Scalable Vector Graphics
8
Introduction – JavaScript• Variables
var number = 5;
• Arrays var numbers = [ 5, 10, 15, 20, 25 ];[ ]
• Objectsvar fruit = {{
kind: "grape",color: "red",quantity: 12
};
9
Introduction – JavaScript• Objects and Arrays
10
Introduction – JSON• JavaScript Object Notation
– a specific syntax for organizing data as JavaScript objectsp y g g p j
– can of course be stored in variables
11
Introduction – Developer Tools• Development Environment
– Text editor– Aptana Studio– WebStorm
• A browser– Chrome– Firefox(recommended)
• A server– Tomcat– Apache– IIS
12
Getting start with D3
13
14
template.html
15
Data
16
Binding Data
17
Binding Data• Loading CSV data
• Loading JSON dataLoading JSON data
18
Binding Data• .data()
– The data– A selection of DOM elements
• . enter()()– create new, data-bound elements
19
Binding Data
20
Scale
21
Scale
• d3.scale.linear() – Constructs a new linear scale with the default domain [0,1] and
the default range [0 1] the default range [0,1] • .domain()
– sets the scale's input domain to the specified array of sets the scale s input domain to the specified array of numbers. The array must contain two or more numbers.
• .range()– sets the scale's output range to the specified array of values.
The array must contain two or more values
22
Scale
23
Interaction & Transition
24
25
Interaction & Transition
• Binding Event Listeners
• Transitions– add this link in the chain below where your selection is made– Above where any attribute changes are applied
Duration• Duration– specified after the transition()– specified in milliseconds E g duration(1000)specified in milliseconds. E.g duration(1000)
26
Introduction – what it doesn’t do• D3 doesn’t support older browsers
– Before IE 8
• D3’s core functionality doesn’t handle bitmapy p– It is great with anything vector (SVG)
• D3 doesn’t hide your original data– D3 code is executed on the client side– The data you want visualized must be sent to the client
27
Questions?Questions?
28