Intro to D3 workshop

This site is part of a d3.js workshop taking place May 2nd in San Francisco. The workshop is geared towards people who are comfortable with data but haven't gotten deep into web programming. We only have 15 spots total and there will be 5 instructors/TAs supporting you.Click here to apply. If you're accepted, the ticket costs $99.

This workshop is interactive!

Just like tributary.io, the demos in this document are explorable! Any text section with a black background is editable. It's an "explorable workshop" and is not intended to stand alone but some may still find it useful. You can find the code for this page at on github.

Find the fullscreen html playground here.

Session 1

- 10am - 12pm

Quick Intros

Getting Excited

The DOM

SVG

<rect> Rectangle

MDN documentation: <rect>

<circle> Circle

MDN documentation: <circle>

<path> Path

MDN documentation: <path>

<text> Text

MDN documentation: <text>

<g> Groups and transforms (translate, rotate, scale)

MDN documentation: <g>

Nested <g> Groups

SVG Styles

Fill

Stroke

Getting fancy

A more complicated example

JavaScript

With D3

JavaScript lets us change the DOM tree we created with SVG.

Chainable APIs

Two examples in pseudo code of a non-chainable and chainable API

selector.style()

We can now change SVG styles programmably

selector.attr()

Same for SVG attributes

accessors

JavaScript functions refresher

Creating SVGs from scratch in JavaScript

selector.enter()

A new way of adding elements.

Documentation: selector.enter()

Breaking down selector.enter()

Transitions

Documentation: transitions

Chaining transitions

data binding and transitions

Documentation: d3.range()

Lunch

- 12pm - 12:45pm

Time to eat!

Session 2

- 12:45pm - 2:15pm

Data

Getting data into the browser

Assuming our server has a /data/setosa.csv file.

Documentation: d3.csv(), JSON.stringify()

Manipulating data

Documentation: d3.nest()

Visualizing data using layouts

Documentation: d3.layout.pie(), d3.svg.arc()

Breaking down d3.layout.pie()

The result

Breaking down d3.svg.arc()

The result

"A shape generator, such as that returned by d3.svg.arc, is both an object and a function. That is: you can call the shape like any other function, and the shape has additional methods that change its behavior. Like other classes in D3, shapes follow the method chaining pattern where setter methods return the shape itself, allowing multiple setters to be invoked in a concise statement." - D3 Documentation

(Linear) scales

Documentation: d3.scales.linear()

Axis

Documentation: d3.svg.axis()

The schedule for this workshop

Creating a histogram

Documentation: d3.layout.histogram()

Scatterplot matrix

See the original by Mike Bostock on bl.ocks.org

Break

- 2:15pm - 2:30pm

Chillax

Session 3

- 2:30pm - 4:00pm

Using D3 locally with a python web server

Now that we know enough D3 to get by, let's setup a D3 project outside of this workshop. (If your computer doesn't already have python, you can download it from: here.)

python -m SimpleHTTPServer

This will start up a local webserver that you can access at: http://localhost:8000/. This your own little private website that only you can access.

Any scripts or data files you load will need to be relative to the directory your server is running from. If we ran our server from ~/Documents/projects/workshop and we had a file called setosa.csv in it, we could load it by using: d3.csv('/setosa.csv', ...);.

The remaining workshop will be more open ended. Pick a data set below to try and visualize.

Here are a few blocks to use as inspiration.

Playground