1. D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley

2. 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 2 CS 4460

3. Background D3 – Data Driven Documents Developed by Mike Bostock, creator of Protovis Free Javascript library Bind data to DOM, apply transformations 3 CS 4460

4. Background Uses method chaining model to simplify operations on data d3.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 4 CS 4460

5. 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

6. 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

7. Hello D3 – First program CS 4460 7 Root element – d3 select() append() Structure and aesthetic – attr() and style() Method chaining Animation Anonymous methods

8. Animation Animation achieved by binding event listeners to specific actions – mouse hover, click etc. Event listener can be inline or written as a separate method E.g. - on("mouseover",animate) CS 4460 8

9. 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 44609

10. 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

11. 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 446011

12. 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

13. 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 446013

14. Further Learning http://mbostock.github.com/d3/ - d3 library, documentation and lots of exampleshttp://mbostock.github.com/d3/ http://www.drewconway.com/zia/?p=2857 – video tutorialhttp://www.drewconway.com/zia/?p=2857 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 MySQLhttp://www.jeromecukier.net/blog/2012/01/02/ using-d3-with-a-mysql-database/ CS 4460 14