Intro to D3

Since presenting this deck years ago, jsbin has revoked embedding their live code editors for the free version. For now, follow the links to use the editors.

go to slides.com/evandana/d3-intro-3/live and play this d3 game

Class Overview

Evan Dana | Sapient

Evan Dana

JavaScript Developer

D3.chart.* | Sapient Global Markets | Putnam Investments

Rochester Institute of Technology

November Project | Ironman | Bike commuter

You

Interest in D3?

Daily occupation?

Programming experience?

This is a class on d3

so, what is d3?

http://mbtaviz.github.io/

https://github.com/mbostock/d3/wiki/Gallery

Data Viz
SVG
Static D3
Dynamic D3

Objective

Chart with SVG
D3.js dynamic chart
JS best-practices

Web basics
(HTML, CSS, DOM)

Programming basics
(JavaScript)

Assumptions

Focus

JSBin

http://jsbin.com/

Edit live | Sandboxed

change 'duration' to be 200 or 4000

Data Viz

Evan Dana | Sapient

Data Viz on web?

Canvas

<div>

SVG

HTML5

HTML

Pixels | Graphics API

Limited Shapes

Scalable | Direct Element Interaction

Selection of viz scripting libraries

Library	Notes	Pros
D3.js	JS SVG Library	Event-driven
Highcharts	JS SVG Library, Free for non-commercial	IE6+
Google Charts	JS SVG Library	Exceptional documentation
Raphael	JS SVG Library, VML for sub IE9	Old browsers
Paper.js	canvas, PaperScript, good for games (frame-based, object-based animations)	Android
Processing.js	canvas, not easily interactive, meant to teach programming, ProcessingScript based on Java, fast rendering	Android

data

documents

SVG | HTML | Canvas

elements | charts | information

general purpose visualization library

SVG

SVG vs Canvas

Image Credits: www.sitepoint.com/how-to-choose-between-canvas-and-svg/ and http://mbtaviz.github.io/

HiFi & Zoom

Interactive Charts

d3 libraries

d3.chart | nvd3.org | c3.js

Quick Review

Canvas vs SVG?

Pros & cons

Great use for each

D3 uses __ ?

SVG

Evan Dana | Sapient

Rectangle

http://www.w3schools.com/svg/svg_rect.asp

SVG Basic Elements

http://www.w3schools.com/svg/default.asp

<svg width="400" height="110">
    
    <rect width="300" height="100" 
        style="fill:rgb(0,0,255);stroke-width:3;
        stroke:rgb(0,0,0)" />

    <circle cx="50" cy="50" r="40" stroke="black" 
        stroke-width="3" fill="red" />

    <line x1="0" y1="0" x2="200" y2="200" 
        style="stroke:rgb(255,0,0);stroke-width:2" />

    <text x="0" y="15" fill="red">I love SVG!</text>
    
</svg>

Common Attributes

http://www.w3schools.com/svg/default.asp

width, height, fill, stroke

cx, cy, r, fill

x1, y1, x2, y2, stroke

x, y, fill

rect

circle

line

text

Line, Circle, Text

More SVG

Filters Intro | Blur Effects | Drop Shadows

Linear | Radial

Examples

Reference

SVG Tutorial:

SVG Filters:

SVG Gradients:

SVG Examples:

SVG Reference:

http://www.w3schools.com/svg

Challenge

Create the below chart using SVG elements

Click "Save" on left to Clone it
Color: 'blue'.
Longest bar is 300px wide.
10px vertical space between bars.

Tips

Style Sheets & SVG

Quick Review

Define with attrs:
SVG Rectangle
SVG Circle
SVG Line
SVG Text

JavaScript

Evan Dana | Sapient

An extremely brief review

JS Data Types

"a"
1
true
[1, 2, 3]
{a:1}
undefined
null

pro tip: test in your console: 'typeof "a"'

Comparison & Casting

(true)
(0)
(1==1)
(1=='1')
(1==='1')
({a:1}==={a:1})

pro tip: test in your console

http://www.macwright.org/presentations/dcjq/

http://www.macwright.org/mistakes/#5010464

Functions

function increment(x) {
    return x++;
}

increment(0);

pro tip: test in your console

Chaining

var carFactory = function () {

    var thisCar = this;

    function repaint (color) {
        // repaint thisCar
        return thisCar;
    }

    function changeExhaust () {
        // change exhaust
        return thisCar;
    }

    return {
        repaint: repaint
    };

}

var car = carFactory();

// chain operations
car.repaint().changeExhaust();

pro tip: test in your console

Join

http://www.macwright.org/mistakes/#5010465

Quick Review

List JS data types

({a: 1} == {a: 1}) = ?

What is chaining?

Explain enter/exit

D3 Primer

Evan Dana | Sapient

Preview

D3 Function Anatomy

selection
    .attr('cx', function (d, i) {return d*10;})

Function that gets your data
(or a static arg that becomes a functor)

Function

http://www.macwright.org/presentations/dcjq/

d3.selectAll('.chart')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function (d) {return d*10;})
.attr('cy', 10)
.attr('r', 20)
.style('fill', 'blue');

In the document,

select every <circle> element

in every element that has a class of 'chart'

d3.selectAll('.chart')
.selectAll('circle')

Bind

to the selection

the data (based on an index)

.data(data)

For the selection of elements bound to data

that do not yet have existing elements

(more on this later)

.enter()

To the selection of elements bound to data, for which elements are not created,

add a <circle> element

.append('circle')

To each appended element,

define these attributes

.attr('cx', function (d) {return d*10;})
.attr('cy', 10)
.attr('r', 20)
.style('fill', 'blue');

Quick Review

How do you...
Select all __ elements?

Bind those elements to data?
Add elements to the DOM?
Define attributes for elements?

Static D3

Evan Dana | Sapient

D3 + <div>

<div> vs <svg>

D3 + <svg>

define group
bind data to group
enter()
append group
define group attributes

append element to group
define element attributes

Group Pattern Example

Challenge

Partner up!

Create the chart of circles using d3

Click "Save" to Clone it

Dynamic D3

Evan Dana | Sapient

Dynamic Data

drawSVG = () {

selection | bind | enter | update | exit }

drawSVG()

updateData()

updateData = () {}

Use the code on the right as a template to create a d3 graphic with dynamic data

Setting up Dynamic Data

enter ()

update()

exit()

Use the code on the right as a template to
create a d3 graphic with dynamic data

Element Lifecycle

https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36

transition()

delay()

duration()

Use the code on the right as a template to
create a d3 graphic with dynamic data

Transitions

Constancy

enter, update, remove

transition, duration, delay

constancy

Dynamic D3 Review

Quick Review

Talk about

• Dynamic data template pattern

• Element lifecycle

• Transitions

• Constancy

Challenge

Partner up!

Create a chart with dynamic data

Click "Save" to Clone it

More D3

Evan Dana | Sapient

Scaling

Margin Conventions

Filling Container

Dynamic Line

d3 chart types

...

Pie Chart

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

Dynamic Pie Chart

http://jsfiddle.net/ragingsquirrel3/qkHK6/

Axes

https://github.com/mbostock/d3/wiki/SVG-Axes | http://alignedleft.com/tutorials/d3/axes

Final Challenge

1. Bar chart that resizes with the window

2. Updates with dynamic data

3. Handles enter/exit

4. Add bonus!

Click "Save" to Clone it

Intro to D3

Intro to D3

Since presenting this deck years ago, jsbin has revoked embedding their live code editors for the free version. For now, follow the links to use the editors.

Getting Started with D3.js

Class Overview

Evan Dana

JavaScript Developer

You

Interest in D3?

Daily occupation?

Programming experience?

This is a class on d3

so, what is d3?

Data Viz SVG Static D3 Dynamic D3

Objective

Assumptions

Focus

JSBin

Data Viz

Data Viz on web?

Canvas

<div>

SVG

Pixels | Graphics API

Limited Shapes

Scalable | Direct Element Interaction

Selection of viz scripting libraries

data

documents

SVG

d3 libraries

Quick Review

Canvas vs SVG?

Pros & cons

Great use for each

D3 uses __ ?

SVG

Rectangle

SVG Basic Elements

Common Attributes

Line, Circle, Text

More SVG

Challenge

Style Sheets & SVG

Quick Review

Define with attrs: SVG Rectangle SVG Circle SVG Line SVG Text

JavaScript

JS Data Types

Comparison & Casting

Functions

Chaining

Join

Quick Review

List JS data types

({a: 1} == {a: 1}) = ?

What is chaining?

Explain enter/exit

D3 Primer

Preview

D3 Function Anatomy

Quick Review

How do you... Select all __ elements?

Bind those elements to data? Add elements to the DOM? Define attributes for elements?

Static D3

D3 + <div>

<div> vs <svg>

D3 + <svg>

Group Pattern Example

Challenge

Dynamic D3

Dynamic Data

drawSVG = () {

drawSVG()

updateData()

updateData = () {}

Setting up Dynamic Data

enter ()

update()

exit()

Element Lifecycle

Getting Started with
D3.js

Data Viz
SVG
Static D3
Dynamic D3

Define with attrs:
SVG Rectangle
SVG Circle
SVG Line
SVG Text

How do you...
Select all __ elements?

Bind those elements to data?
Add elements to the DOM?
Define attributes for elements?