D3 Practicum

CS 4460 – Information Visualization

Megha Sandesh

Prepared under advisement by Dr.Fames Foley

Agenda

• Background• D3 and SVG• Hello D3• Animation• Bind Data and Create a Simple Bar Chart• Syncing Between Views• Loading data from External Source • Summary

2CS 4460

Background

• D3 – Data Driven Documents• Developed by Mike Bostock, creator

of Protovis• Free Javascript library• Bind data to DOM, apply

transformations

3CS 4460

Background

• Uses method chaining model to simplify operations on datad3.select().append().attr()….Statements like the above are perfectly legal in d3.

• Compact, clean code – minimum looping

• Animations can be chained to create complex visualizations

4CS 4460

D3 and SVG

• D3 does not have a graphical renderer

• Uses SVG to visually present data transformation

• Leverages HTML5, CSS3 and SVG to create powerful visualizations

CS 4460 5

SVG - Scalable Vector Graphics

• SVG is a language for describing two-dimensional vector graphics in XML.

• Unlike raster/bitmap graphics (.JPEG, .PNG, .GIF etc.), does not lose quality upon zooming in more than 100%

• Can scale to any size dynamically; amenable to indexing and compression

• SVG files can be created in any text editor – SVG is an open standard.

CS 4460 6

Hello D3 – First program

CS 4460 7

• Root element – d3• select()• append()• Structure and aesthetic – attr() and

style()• Method chaining• Animation• Anonymous methods

Animation

• Animation achieved by binding event listeners to specific actions – mouse hover, click etc.

• Event listener can be inline or written as a separate methodE.g. - on("mouseover",animate)

CS 4460 8

Animation chaining

• Ability to add more than one transition to an SVG object.

• Achieved by the “each” function in d3

each("end",animatenext) • Animations can be chained with

other event listeners as well

CS 4460 9

Binding Data – A Simple Bar Chart

• Data bound to code by using the “data” method var dataset = [1,2,3,4,5];

d3.select(this).data(dataset);

The statement above binds data to the selection, creating an internal loop

CS 4460 10

Linking

• Sync 2 visualizations – pie chart and bar graph

• Method : Trigger a redraw of one view when an event occurs in the other visualization.

• Hover over individual pie slices to highlight corresponding bars

CS 4460 11

Loading External Data

• Loading data from external files – CSV

• Inbuilt routine – csv()• d3.csv(filename, action/method)• Method describes how to handle and

store the data

CS 4460 12

Some Pointers

• D3 is not the be-all, end-all of visualization.• Consider these as well – jquery, backbone.js

and any javascript library which adds to the convenience and power of d3 (don’t reinvent the wheel!)

• Aim for compact code. Programs will be much more maintainable and extensible – d3 will almost force you to do this.

• Avoid loops and inline data as much as possible – cleaner code, leaner HTML. Go for JSON, CSV and even MYSQL databases.

CS 4460 13

Further Learning

• http://mbostock.github.com/d3/ - d3 library, documentation and lots of examples

• http://www.drewconway.com/zia/?p=2857 – video tutorial

• http://www.janwillemtulp.com/category/d3/• http://christopheviau.com/d3_tutorial/• http://www.jeromecukier.net/blog/category/d3/• http://www.jeromecukier.net/blog/

2012/01/02/using-d3-with-a-mysql-database/ - d3 and MySQL

CS 4460 14