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

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

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

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

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

Hello D3 – First program CS 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 method E.g. - on("mouseover",animate) CS

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

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

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

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

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

Further Learning - d3 library, documentation and lots of exampleshttp://mbostock.github.com/d3/ – video tutorialhttp:// using-d3-with-a-mysql-database/ - d3 and MySQLhttp:// using-d3-with-a-mysql-database/ CS