D3: The Crash Course Chad Stolper CSE 6242: Data and Visual Analytics - - PowerPoint PPT Presentation

▶
d3 the crash course
SMART_READER_LITE
LIVE PREVIEW

D3: The Crash Course Chad Stolper CSE 6242: Data and Visual Analytics - - PowerPoint PPT Presentation

Jan 09, 2023 367 likes •1.42k views

D3: The Crash Course Chad Stolper CSE 6242: Data and Visual Analytics D3: The Crash Course Chad Stolper CSE 6242: Data and Visual Analytics D3: Scratching the Surface D3: Only the Beginning D3: Only the Beginning Please do not be afraid to ask

slide-1
SLIDE 1

D3: The Crash Course

Chad Stolper

CSE 6242: Data and Visual Analytics

slide-2
SLIDE 2

D3: The Crash Course

Chad Stolper

CSE 6242: Data and Visual Analytics

slide-3
SLIDE 3

D3: Scratching the Surface

slide-4
SLIDE 4

D3: Only the Beginning

slide-5
SLIDE 5

D3: Only the Beginning

slide-6
SLIDE 6

Please do not be afraid to ask questions!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 6
slide-7
SLIDE 7

§ Website

  • Directory Structure
  • Development

§ Javascript 101 and 102 § SVG Basics § (Finally) D3.js Crash Course

1/23/14 Chad Stolper CSE 6242 Guest Lecture 7
slide-8
SLIDE 8

http://bl.ocks.org/mbostock/1256572

1/23/14 Chad Stolper CSE 6242 Guest Lecture 8
slide-9
SLIDE 9

Who has some programming experience?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 9
slide-10
SLIDE 10

Who has some web development experience?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 10
slide-11
SLIDE 11

Website Directory Structure

§ (Replace “project” with a real name) § project/

  • index.html

§ project/lib/

  • d3.v3.js

§ project/js/

  • project.js

§ project/css/ § project/img/

1/23/14 Chad Stolper CSE 6242 Guest Lecture 11
slide-12
SLIDE 12

Chrome Inspector and Console § Open the webpage § Right-click on anything § Click inspect this element § Click on the >= button at the top of the inspector to open the console as well

  • (2nd from the left)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 12
slide-13
SLIDE 13

Starting a Local Webserver

§ python -m SimpleHTTPServer 8000

§ http://localhost:8000

1/23/14 Chad Stolper CSE 6242 Guest Lecture 13
slide-14
SLIDE 14

How many of you have experience with Javascript?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 14
slide-15
SLIDE 15

Javascript 101

§ All variables are global unless declared using var

  • x = 300 (global) vs. var x = 300 (local)

§ Semicolons are optional § “text” is the same as ‘text’ § JS arrays and objects are almost exactly the same syntax as python’s lists and dicts § object.key is the same as object[‘key’] § Print to the console using console.log( )

1/23/14 Chad Stolper CSE 6242 Guest Lecture 15
slide-16
SLIDE 16

Javascript 102: Functional Programming § Javascript is a functional language functional language

  • Functions are themselves objects
  • Functions can be stored as variables
  • Functions can be passed as parameters

§ D3 uses these abilities extensively!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 16
slide-17
SLIDE 17

Javascript 102: Functional Programming § Javascript is a functional language functional language

  • Functions are themselves objects
  • Functions can be stored as variables
  • Functions can be passed as parameters

Functions can be passed as parameters

§ D3 uses these abilities extensively!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 17
slide-18
SLIDE 18

Array.map( ) § Used for applying a function to each element of an array § The function provided as a parameter takes one parameter itself:

  • d: a/each data point

§ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Array/map

1/23/14 Chad Stolper CSE 6242 Guest Lecture 18
slide-19
SLIDE 19

Array.map( ) § var x = [{val:1},{val:2},{val:3},{val:4}] § var a = x.map(function(d){

return d.val; })

§ a : [1,2,3,4]

1/23/14 Chad Stolper CSE 6242 Guest Lecture 19
slide-20
SLIDE 20

MDN § Mozilla Developer Network § https://developer.mozilla.org/en-US/ docs/Web/JavaScript/Reference § (Easier: google “<command> mdn”)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 20
slide-21
SLIDE 21

Method Chaining § “Syntactic Sugar” paradigm where each method returns the object that it was called on

group.attr(“x”,5).attr(“y”,5) //returns group is the same as group.attr(“x”,5) //returns group group.attr(“y”,5) //returns group

1/23/14 Chad Stolper CSE 6242 Guest Lecture 21
slide-22
SLIDE 22

SVG BASICS SVG BASICS

1/23/14 Chad Stolper CSE 6242 Guest Lecture 22
slide-23
SLIDE 23

How many of you have experience with SVG?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 23
slide-24
SLIDE 24

How many have experience with 2D computer graphics (such as Java Swing)?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 24
slide-25
SLIDE 25

x y

(0,0)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 25
slide-26
SLIDE 26

SVG Basics SVG -> XML Vector Graphics

1/23/14 Chad Stolper CSE 6242 Guest Lecture 26
slide-27
SLIDE 27

SVG Basics § XML Vector Graphics

  • Tags with Attributes
  • <circle r=5 fill=“green”></circle>

§ W3C Standard

  • http://www.w3.org/TR/SVG/

§ Supported by all the major browsers

1/23/14 Chad Stolper CSE 6242 Guest Lecture 27
slide-28
SLIDE 28

SVG Basics

§ <svg> § <circle> § <rect> § <path> § <g> §

1/23/14 Chad Stolper CSE 6242 Guest Lecture 28
slide-29
SLIDE 29

SVG Basics

§ <svg> § <circle> § <rect> § <path> § <g> § <text> (after I’ve talked about D3)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 29
slide-30
SLIDE 30

<svg> element

§ Overarching canvas § (optional) Attributes:

  • width
  • height

§ Create with

  • d3.select(“#vis”).append(“svg:svg”)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 30

<body> <div id=“vis”> </div> </body>

slide-31
SLIDE 31

<circle> element

§ Attributes:

  • cx (relative to the LEFT of the container)
  • cy (relative to the TOP of the container)
  • r (radius)

§ (optional) Attributes:

  • fill (color)
  • stroke (the width of the stroke)
  • stroke-fill (the color of the stroke)

§ Create with

  • .append(“svg:circle”)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 31
slide-32
SLIDE 32

<rect> element

§ Attributes:

  • x (relative to the LEFT of the container)
  • y (relative to the TOP of the container)
  • width (cannot be negative)
  • height (cannot be negative)

§ (optional) Attributes:

  • fill (color)
  • stroke (the width of the stroke)
  • stroke-fill (the color of the stroke)

§ Create with

  • .append(“svg:rect”)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 32
slide-33
SLIDE 33

x y width height (0,0)

  • rigin
1/23/14 Chad Stolper CSE 6242 Guest Lecture 33
slide-34
SLIDE 34

Rather than positioning each element, what if we want to position (or style) all the elements?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 34
slide-35
SLIDE 35

<g> element

§ Generic container (Group) element § Attributes

  • transform
  • (fill,stroke,etc.)

§ Create with:

  • var group = vis.append(“svg:g”)

§ Add things to the group with:

  • group.append(“svg:circle”)
  • group.append(“svg:rect”)
  • group.append(“svg:text”)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 35
slide-36
SLIDE 36

Transform Property “transform”, “translate(x,y)”

1/23/14 Chad Stolper CSE 6242 Guest Lecture 36
slide-37
SLIDE 37

.attr(“transform”,“translate(x,y)”) translate(30,20)

30 20

1/23/14 Chad Stolper CSE 6242 Guest Lecture 37
slide-38
SLIDE 38

AND NOW D3… AND NOW D3…

1/23/14 Chad Stolper CSE 6242 Guest Lecture 38
slide-39
SLIDE 39

Mike Bostock and Jeff Heer @ Stanford 2009- Protovis

1/23/14 Chad Stolper CSE 6242 Guest Lecture 39
slide-40
SLIDE 40

Mike Bostock and Jeff Heer @ Stanford 2009- Protovis 2011- D3.js

1/23/14 Chad Stolper CSE 6242 Guest Lecture 40
slide-41
SLIDE 41

D3

§ Grand Reductionist Statements § Loading Data § Enter-Update-Exit Paradigm § Scales § Axes § Layouts § Transitions and Interaction § Where to go from here

1/23/14 Chad Stolper CSE 6242 Guest Lecture 41
slide-42
SLIDE 42

D3 is a really powerful for-loop with a ton of useful helper functions

1/23/14 Chad Stolper CSE 6242 Guest Lecture 42
slide-43
SLIDE 43

D3 § Declarative, domain-specific specification language for visualization § i.e.

  • Define a template for each type of element
  • D3 draws one element for each data point
1/23/14 Chad Stolper CSE 6242 Guest Lecture 43
slide-44
SLIDE 44

Importing D3

<html >

<head> <script src='lib/d3.v3.js’ charset=‘utf-8’></script> <script src='js/project.js'></script> </head> <body> <div id=“vis”></div> </body>

</html>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 44
slide-45
SLIDE 45

Importing D3

<html >

<head> <script src='lib/d3.v3.js’ charset=‘utf-8’></script> <script src='js/project.js'></script> </head> <body> <div id=“vis”></div> </body>

</html>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 45
slide-46
SLIDE 46

Importing D3

<html >

<head> <script src='lib/d3.v3.js’ charset=‘utf-8’></script> <script src='js/project.js'></script> </head> <body> <div id=“vis”></div> </body>

</html>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 46
slide-47
SLIDE 47

Assigning the Canvas to a Variable vis = d3.select(“#vis”)

.append(“svg:svg”) <body> <div id=“vis”><svg></svg></div> </body>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 47
slide-48
SLIDE 48

Loading Data § d3.csv(fileloc,callback) § d3.json(fileloc,callback) § fileloc: string file location

  • “data/datafile.csv”

§ callback: function(rawdata){ }

1/23/14 Chad Stolper CSE 6242 Guest Lecture 48
slide-49
SLIDE 49

rawdata from a CSV file

name school age Adam GT 18 Barbara Emory 22 Calvin GSU 30

[ { ‘name’: ‘Adam’, ‘school’: ‘GT’, ‘age’: ‘18’ }, { ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘age’: ’22’ }, { ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘age’: ‘30’ } ]

1/23/14 Chad Stolper CSE 6242 Guest Lecture 49
slide-50
SLIDE 50

Problem § Ages are Strings! § They should be ints! § We can fix that: for(var d: data){

d = data[d] d.age = +d.age }

1/23/14 Chad Stolper CSE 6242 Guest Lecture 50

data = [ { ‘name’: ‘Adam’, ‘school’: ‘GT’, ‘age’: ‘18’ }, { ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘age’: ’22’ }, { ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘age’: ‘30’ } ]

slide-51
SLIDE 51

rawdata from a CSV file

name school age Adam GT 18 Barbara Emory 22 Calvin GSU 30

[ { ‘name’: ‘Adam’, ‘school’: ‘GT’, ‘age’: 18 }, { ‘name’: ‘Barbara’, ‘school’: ‘Emory’, ‘age’: 22 }, { ‘name’: ‘Calvin’, ‘school’: ‘GSU’, ‘age’: 30 } ]

1/23/14 Chad Stolper CSE 6242 Guest Lecture 51
slide-52
SLIDE 52

Enter-Update-Exit § The most critical facet of how D3 works § If you remember nothing else from today, remember this... § “Enter-Update-Exit” § “Enter-Update-Exit” § “Enter-Update-Exit”

1/23/14 Chad Stolper CSE 6242 Guest Lecture 52
slide-53
SLIDE 53

Enter-Update-Exit § The most critical facet of how D3 works § If you remember nothing else from today, remember this... § “Enter-Update-Exit” § “Enter-Update-Exit” § “Enter-Update-Exit”

1/23/14 Chad Stolper CSE 6242 Guest Lecture 53
slide-54
SLIDE 54

Enter-Update-Exit § Pattern:

  • Select a “group” of “elements”
  • Assign data to the group
  • Enter

Enter: Create new elements for data points that don’t have them yet

  • Update

Update: Set the attributes of all the elements based on the data

  • Exit

Exit: Remove elements that don’t have data anymore

1/23/14 Chad Stolper CSE 6242 Guest Lecture 54
slide-55
SLIDE 55

Can be hard to grok: You can select groups of elements that DON’T EXIST YET

1/23/14 Chad Stolper CSE 6242 Guest Lecture 55
slide-56
SLIDE 56

.enter( ) and .exit( ) § .enter( )

  • New data points

§ .exit( )

  • Old data points

§ .enter() and .exit() only exist when .data() has been called

1/23/14 Chad Stolper CSE 6242 Guest Lecture 56
slide-57
SLIDE 57

.enter( ) and .exit( ) § .data( [1,2,3,4] ) § .data ( [1,2,3,4,5,6] ) § .data ( [1,2,3] ) //4,5,6

1/23/14 Chad Stolper CSE 6242 Guest Lecture 57
slide-58
SLIDE 58

Data Key Functions § .data(rawdata) defaults to assuming that the index of the point is the key § .data(rawdata, function(d,i){ }) allows you to set a key functions § e.g.

  • .data(rawdata, function(d,i){ return d.id; })
  • .data(rawdata, function(d,i){ return d.name; })
1/23/14 Chad Stolper CSE 6242 Guest Lecture 58
slide-59
SLIDE 59

E-U-E Pattern Template

var group = vis.selectAll(“rect”)

.data(rawdata) //rawdata must be an array!

group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 59
slide-60
SLIDE 60 60 CSE 6242 Guest Lecture 1/23/14 Chad Stolper

WARNING!!!!

slide-61
SLIDE 61

E-U-E Pattern Template

var group = vis.selectAll(“rect”)

.data(rawdata) //rawdata must be an array!

group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 61

Many online examples

slide-62
SLIDE 62

E-U-E Pattern Template

var group = vis.selectAll(“rect”)

.data(rawdata) //rawdata must be an array!

group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 62

Many online examples drop the variable name before .enter()

slide-63
SLIDE 63

E-U-E Pattern Template

var group = vis.selectAll(“rect”)

.data(rawdata) //rawdata must be an array!

group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 63

Many online examples drop the variable name before .enter() I highly recommend you don’t!

slide-64
SLIDE 64

.attr( ) § The Attribute Method § Sets attributes such as x, y, width, height, and fill § Technical details:

  • rect.attr(“x”, 5)
  • <rect x=“5”></rect>
1/23/14 Chad Stolper CSE 6242 Guest Lecture 64
slide-65
SLIDE 65

.attr( ) and Functional Programming

§ [ {size: 10}, {size: 8}, {size: 12.2} ] § .attr(“height”, function(d,i){ return d.size })

  • d: the data point

§ .attr(“x”, function(d,i){ return (i+1)*5; })

  • i: the index of the data point

<rect height=“10” x=“5”></rect> <rect height=“8” x=“10”></rect> <rect height=“12.2” x=“15”></rect>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 65
slide-66
SLIDE 66

<text> elements

1/23/14 Chad Stolper CSE 6242 Guest Lecture 66
slide-67
SLIDE 67

<text> elements § I’m going to apologize in advance here for the lousy job the W3C did with the <text> definition. § You’re going to have to just either memorize these things or keep referring back to http://www.w3c.org/TR/SVG/text.html (first Google hit for “svg text”) like I do.

1/23/14 Chad Stolper CSE 6242 Guest Lecture 67
slide-68
SLIDE 68

<text> elements

§ Extra Method in D3

  • .text(“Your Text Goes Here”)
  • <tag>Your Text Goes Here</tag>

§ Attributes

  • x
  • y

§ Styles

  • text-anchor: start, middle, end
  • dominant-baseline: [nothing], hanging, middle
1/23/14 Chad Stolper CSE 6242 Guest Lecture 68
slide-69
SLIDE 69

text-anchor style

This is my line of text.

start end middle

Where is (0,0)?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 69
slide-70
SLIDE 70

dominant-baseline style

This is my line of text.

hanging default middle

Where is (0,0)?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 70
slide-71
SLIDE 71

<text> example

group.append(“svg:text”) .text(function(d){return d.name}) .attr(“x”, function(d,i){return i*5}) .attr(“y”, function(d,i){return height;}) .style(“dominant-baseline”,“hanging”) .style(“text-anchor”, “middle”) .style(“prop1”,“val1”) .style(“prop2”,“val2”) <ele style=“prop1: val1; prop2: val2;”>

1/23/14 Chad Stolper CSE 6242 Guest Lecture 71
slide-72
SLIDE 72

What if you have two different types of circles?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 72
slide-73
SLIDE 73

Classing

§ CSS Classes

  • Any number of classes per element
  • Select using “.classname”

red = vis.selectAll(“circle.redcircle”)

.data(reddata, function(d){return d.id;})

red.enter( ).append(“svg:circle”)

.classed(“redcircle”,“true”)

blue = vis.selectAll(“circle.bluecircle”)

.data(bluedata, function(d){return d.id;})

blue.enter( ).append(“svg:circle”)

.classed(“bluecircle”, “true”)

vis.selectAll(“.bluecircle”).attr(“fill”,“blue”) red.attr(“fill”,“red”)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 73
slide-74
SLIDE 74

§ .attr(“height”, 5) is boring § .attr(“height”, function(d,i){ return i*5; })

  • nly works for fixed values

§ .attr(“height”, function(d){ return d; }) can blow up really quickly…

1/23/14 Chad Stolper CSE 6242 Guest Lecture 74
slide-75
SLIDE 75

Scales

1/23/14 Chad Stolper CSE 6242 Guest Lecture 75
slide-76
SLIDE 76

Scales § D3 has many types of scales § I am only going to cover two:

  • Linear Scales
  • Ordinal Scales
1/23/14 Chad Stolper CSE 6242 Guest Lecture 76
slide-77
SLIDE 77

Linear Scales

§ var xscale = d3.scale.linear( )

  • .domain( [min, max] )
  • .range( [minOut, maxOut] )

§ group.attr(“x”, function(d,i){

  • return xscale(d.size);

})

§ y = mx+b

1/23/14 Chad Stolper CSE 6242 Guest Lecture 77
slide-78
SLIDE 78

Min and Max But how do you figure out the min and max for the domain?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 78
slide-79
SLIDE 79

D3 A really powerful for-loop with a ton of useful helper functions

1/23/14 Chad Stolper CSE 6242 Guest Lecture 79
slide-80
SLIDE 80

Min and Max § d3.min( [ ] ) à number § d3.max( [ ] ) à number § d3.extent( [ ] ) à [number,number]

1/23/14 Chad Stolper CSE 6242 Guest Lecture 80
slide-81
SLIDE 81

Min and Max § d3.min( [ ] ) à number § d3.max( [ ] ) à number § d3.extent( [ ] ) à [number,number] § All can be combined with

  • .map( function(d){ } ), which returns an [ ]
1/23/14 Chad Stolper CSE 6242 Guest Lecture 81
slide-82
SLIDE 82

d3.min(

data.map( function(d){ return d.age; })

) // returns the minimum age

1/23/14 Chad Stolper CSE 6242 Guest Lecture 82
slide-83
SLIDE 83

Linear Scales § You can even keep the same scale, and just update the domain and/or range as necessary § Note: This will not update update the graphics all on its own

1/23/14 Chad Stolper CSE 6242 Guest Lecture 83
slide-84
SLIDE 84

Ordinal Scales

§ D3 has built-in color scales!

  • (And they’re easy!)

§ var colorscale = d3.scale.category10( ) § Also available are:

  • category20( )
  • category20b( )
  • category20c( )
  • (and even a few more)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 84
slide-85
SLIDE 85

Ordinal Categorical Scales

§ D3 has built-in color scales!

  • (And they’re easy!)

§ var colorscale = d3.scale.category10( ) § Also available are:

  • category20( )
  • category20b( )
  • category20c( )
  • (and even a few more)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 85
slide-86
SLIDE 86

Ordinal Categorical Scales

§ [ {type:‘Bird’},{type:‘Rodent’},{type:‘Bird’} ]

§ var colorscale = d3.scale.category10( ) § .attr(“fill”,function(d,i){

  • return colorscale(d.type)

}

  • <rect fill=“blue”></rect>
  • <rect fill=“orange”></rect>
  • <rect fill=“blue”></rect>
1/23/14 Chad Stolper CSE 6242 Guest Lecture 86
slide-87
SLIDE 87

Axes D3 also has visual helper-functions

1/23/14 Chad Stolper CSE 6242 Guest Lecture 87
slide-88
SLIDE 88

Axes § yaxisglyph = chart.append(“g”) yaxis = d3.svg.axis( )

.scale( yscale ) //must be a numerical scale .orient( ‘left’ ) //or ‘right’ or ‘top’ or ‘bottom’ .ticks( 6 ) //number of ticks, default is 10

yaxisglyph.call(yaxis)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 88
slide-89
SLIDE 89

D3 even has some entire techniques built in… http://bl.ocks.org/mbostock/4062045

1/23/14 Chad Stolper CSE 6242 Guest Lecture 89
slide-90
SLIDE 90

What if the data is changing?

1/23/14 Chad Stolper CSE 6242 Guest Lecture 90
slide-91
SLIDE 91

E-U-E Pattern Template

var group = vis.selectAll(“rect”)

.data(rawdata) //rawdata must be an array!

group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

1/23/14 Chad Stolper CSE 6242 Guest Lecture 91
slide-92
SLIDE 92

E-U-E Pattern Template

function redraw(rawdata){

var group = vis.selectAll(“rect”) .data(rawdata) //rawdata must be an array! group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group //UPDATE! .attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

}

1/23/14 Chad Stolper CSE 6242 Guest Lecture 92
slide-93
SLIDE 93

E-U-E Pattern Template

function redraw(rawdata){

var group = vis.selectAll(“rect”) .data(rawdata) //rawdata must be an array! group.enter( ).append(“svg:rect”) //ENTER! .attr( ) .attr( ) group.transition

.transition() () //UPDATE!

.attr( ) .attr( ) group.exit( ).remove( ) //EXIT!

}

1/23/14 Chad Stolper CSE 6242 Guest Lecture 93
slide-94
SLIDE 94

Transitions § CSS3 transitions with D3 are magical! § D3 interpolates values for you…

1/23/14 Chad Stolper CSE 6242 Guest Lecture 94
slide-95
SLIDE 95

Transitions rect.attr(“height”, 0) rect.transition( ) .delay( 500 ) //can be a function of data .duration(200) //can be a function of data .attr(“height”, 5)

1/23/14 Chad Stolper CSE 6242 Guest Lecture 95
slide-96
SLIDE 96

So transitions allow a vis to be dynamic… But they’re not really interactive…

1/23/14 Chad Stolper CSE 6242 Guest Lecture 96
slide-97
SLIDE 97

Interaction The on( ) Method

1/23/14 Chad Stolper CSE 6242 Guest Lecture 97
slide-98
SLIDE 98

.on( )

rect.on (“click”, function(d){

d.color = “blue”; redraw( )

}) HTML Events

  • click
  • mouseover
  • mouseenter
  • mouseout
  • etc.
1/23/14 Chad Stolper CSE 6242 Guest Lecture 98
slide-99
SLIDE 99

Where to get learn more…

§ http://d3js.org/

  • Tons of examples and basics.

§ https://github.com/mbostock/d3/wiki/API- Reference

  • Official D3 documentation. Extremely well done.

§ https://github.com/mbostock/d3/wiki/Tutorials

  • List of seemingly ALL the tutorials online

§ The Google/StackOverflow combination

  • (my personal favorite)
1/23/14 Chad Stolper CSE 6242 Guest Lecture 99
slide-100
SLIDE 100

Live Coding http://phrogz.net/js/d3-playground/

100 CSE 6242 Guest Lecture 1/23/14 Chad Stolper
slide-101
SLIDE 101

Once You’re Comfortable… d3.Chart http://misoproject.com/d3-chart/

101 CSE 6242 Guest Lecture 1/23/14 Chad Stolper
slide-102
SLIDE 102

When You’re Bored… http://www.koalastothemax.com/

102 CSE 6242 Guest Lecture 1/23/14 Chad Stolper
slide-103
SLIDE 103

Thanks! chadstolper@gatech.edu

1/23/14 Chad Stolper CSE 6242 Guest Lecture 103
slide-104
SLIDE 104

Good Luck! chadstolper@gatech.edu

1/23/14 Chad Stolper CSE 6242 Guest Lecture 104
slide-105
SLIDE 105

Questions? chadstolper@gatech.edu

1/23/14 Chad Stolper CSE 6242 Guest Lecture 105