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