D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by...
-
Upload
katherine-phelps -
Category
Documents
-
view
215 -
download
0
Transcript of D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by...
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