D3.js

Data and DOM Manipulations Library

Data Driven Documents. YES!

• fast, small (minimalisic core and extra modules)
• allows to template DOM element creation
• utilizes common idea "Find something in DOM and keep it in array"
• plays nicely with HTML5 and other tools (would also switch to Sizzle, if available)
• very well documented (mbostock.github.com/d3/api/)

Basic Example

SVG in Action

Comparing to jQuery, D3.js is...

• full of handy array and math utils, not just DOM operations
• half the size
• ignorant of pre-IE9 and other old browsers
  (having Sizzle saves you some pain but SVG is not supported in those anyway)

Few Examples

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

• Streamgraph
  Shows ways to build area charts, stack them and apply transitions. See also same data on stacked or plain bar chart.
• Population Pyramid
  Demonstrating stacked bar-chart with data loaded from CSV file
• Jason Davies' Sorting Visualization Shows data usage in sub-selections

Recommended Tutorials

• “Three Little Circles” and others from D3 website.
• “Try D3 Now” from Christophe Viau
• D3 whitepaper
• Visualizing Data with Web Standards 15min talk @W3Conf 2011

Should I stop using my pretty-pretty graph tool?

No, just consider following about those tools:

• They render and put standard UI around your charts
  D3 gives you data manipulation tools
• Some of them can do just so much and will behave irradically if you need 100 charts on same page or 10000 datapoints in one chart
  It's harder to put "too much" to DOM or stress CSS3 engines
• I wonder how many of them are extensivly tested and expandable
  Similar to jQuery D3.js uses node.js to compile/test/build code

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

• Many browsers are not supported
  Some people render SVGs into bitmaps using AJAX and other tools.
• Extension base and third party solutions just started to appear
  It's like with jQuery, think twice before you use plugin or library based on D3.js
• There is a huge learning curve to understand all of the D3 potential
  It's not a magic wand but there is usually a way to do more than you think is possible.
  

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

• We looked at it as a neat tool, expected very little
• Now we have functional DNS RTT Dashboard and reusable code:
  1. smokeping-like chart with ability to alter data and set markers for errors/availability
  2. tool to put few of those charts together on a dashboard and process update events
• Have visualization that uses d3.geo

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

• Based on html5slides from Google (needs more love)
• Example loader is actually in D3.js, calls google-code-prettify
• Everything you've seen is in Dyn's git repository
• I think we eventually will release our visualization utils for public
• Please help to make these slides better and we will release them too!
  (ask questions, provide feedback, share ideas and opinions)