D3.js

Data and DOM Manipulations Library

@alexsergeyev, February 2012

Data Driven Documents. YES!

Basic Example


        
        
Your lucky numbers are:

SVG in Action


        
        
Your lucky numbers are:
Rule 1:
Each new element inherits the data of the parent.
Rule 2:
You have to call text(...) again.
(or attr('d',...), or something else visual)

Comparing to jQuery, D3.js is...

Read apples vs oranges to find more things to compare.

Both are free! Modified BSD License (3-clause, BSD-new) for D3.js and MIT and GPL for jQuery.

Modules in D3.js

Core, d3.js

Time, d3.time.js

Various date/time calculation and formatting utils. Time scales and intervals.

Layout, d3.layout.js

Various classes to convert data to meaningful numbers for graps. Stack, tree, pie, and others.

Geography, d3.geo.js

GeoJSON parsers and shape drawing utlis. Map projections and specialized scales

Others Are Coming Up!

Geom: Specific layouts for exotic charts;
Chart: Box, bullet, horizon charts (so far)

Few Examples

D3.js source code has collection of examples. Here are few that I like the most.

Recommended Tutorials

Should I stop using my pretty-pretty graph tool?

No, just consider following about those tools:

Too much good things about D3.js? Here are negatives:

How to start?

Clone git repository or download a release, explore examples!
(it's better to have a web-server to look at them)

Modify them with your data or try to visualize differently.
(feel free to improve them and offer your ideas back to developers)

Don't forget to use in-browser tools to peek behind the curtains.

Join D3 discussion group to find inspiration or to solve a problem.

Dyn Labs Experience

Questions?

...

My Goals

Read more about SVG

Continue to use D3.js more

Try look for alternative visualisations for particular data

What are yours after this introduction?

About this slide deck

PRESS '1' TO SWITCH TO PRESENTATION MODE