Super basic tutorial about how to create an interactive web graphic with d3.js for those that know how to program/use the command line but not any web technology.

1. INTERACTIVITY
It’s alive!!!
Tuesday, January 29, 13

2. Why?
Our data is large and multi-faceted---multiple parameters, data
types, sources of information, etc.
At times it is difficult to explore it fully and build an integrated
understanding of the system
Even with statistical or numerical analyses it is difficult to
translate results to actual physical phenomena or situations in the
data
It is important to be able to check our assumptions with active
exploration of the system
Tuesday, January 29, 13

3. Compare:
Module 23
41
18
41
18 18
41 18
42
41
18
41
Tuesday, January 29, 13

4. Compare:
Tuesday, January 29, 13

5. How?
HTML, CSS, Javascript
HTML - HyperText Markup Language
A webpage, if you will. This is just to hold the meat really.
Don’t worry, this isn’t 1999 on MySpace.
CSS - Cascading Style Sheets
This is for styling our page elements in a sane and modular
fashion
Javascript - ...just Javascript
This is a programming language, no relation to Java (Thank God)
Tuesday, January 29, 13

6. But...How does it work?
HTML is, for our purposes, more like just a dumb container.
CSS is just to do styling on elements and isn’t needed to start.
REAL TALK: Javascript on its own...isn’t great.
BUT: There are tons of libraries for javascript that make it great
to work with. The rate of libraries is also growing at an
astonishing rate (for actual programming use check out node.js)
Specifically we will make heavy use of:
jQuery (adds lots of methods, functional programming elements)
d3.js (this is how we graph)
Tuesday, January 29, 13

7. What can d3 do?
http://mbostock.github.com/d3/ex/force.html
http://square.github.com/crossfilter/
http://bl.ocks.org/1136236
Pros: Easy to use, Web standard (with WebKit), SVG,
Interactive
Cons: Examples are the primary reference material. There is an
excellent primer by Scott Murray (http://alignedleft.com), but
you have to get your hands dirty
Tuesday, January 29, 13

8. Case Study
Let’s graph a freaking time series!
What do we even input as data to this?
JSONs (JavaScript Object Notation), Don’t worry it’s awesome.
CSVs (Comma Separated Values)
Tuesday, January 29, 13

9. Our Data
It’s basically just a saved dictionary into a file.
Python has a ‘JSON’ module that can import/export dictionaries
as a json string for saving
Tuesday, January 29, 13

10. How do I do that?
Tuesday, January 29, 13

11. But how do I get it going?
Just tell it that
it’s HTML
These are library
imports
Importing supported
styling
Tuesday, January 29, 13

12. Now....What?
Make a div
Call our script
Tuesday, January 29, 13

13. Getting our hands dirty
Load our data, the graph creation is wrapped inside this (`$` is jQuery)
We populate the
arrays with our
x and y data
Define the height and width for our graphic to be used later (this is important)
Tuesday, January 29, 13

14. Making a place to place
We have to place
Create our svg
our svg in a div (our
to place our graph
div had an id
in (uses our width
‘party-viz’)
and height from
before)
Tuesday, January 29, 13

15. Let’s place some data
We append a path,
with our data, using
a previously defined
line function
This is our function,
it just iterates
through the data,
returning the x and
y transformed
positions for a point
Tuesday, January 29, 13

16. But now we need to know
what’s a point
We add the data
circles as a svg
container type
Now we actually
append and give the
attributes for the
circles
Tuesday, January 29, 13

17. But wait, now let’s make this
interactive
We use tipsy/jQuery
to generate an
interactive tooltip
Return an
appropriately
formatted string to
display
Tuesday, January 29, 13

18. Now for looking at it!
We can just open the .html file in a web browser or...
We need a server.
WAIT ISN’T THAT HARD??????
We can use a super quick, simple server with python.
In the directory with the page and code just do:
Tuesday, January 29, 13

19. Now, the moment of glory
Tuesday, January 29, 13

20. As help
I have a web template repo on bitbucket that you can use, with a
special branch for this example.
Tuesday, January 29, 13

21. As a note
This is all really new, cool stuff.
As such, it requires effort on your part to make it work and
understand it.
Not everything needs to be interactive/web. It takes work to do
this, so think first if it is worth your time.
I am more than willing to help you, but there is one master of
d3.js right now---the guy who wrote it.
Tuesday, January 29, 13