![Page 1: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/1.jpg)
D3 Practicum
CS 4460 – Information Visualization
Megha Sandesh
Prepared under advisement by Dr.Fames Foley
![Page 2: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/2.jpg)
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
![Page 3: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/3.jpg)
Background
• D3 – Data Driven Documents• Developed by Mike Bostock, creator
of Protovis• Free Javascript library• Bind data to DOM, apply
transformations
3CS 4460
![Page 4: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/4.jpg)
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
![Page 5: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/5.jpg)
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
![Page 6: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/6.jpg)
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
![Page 7: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/7.jpg)
Hello D3 – First program
CS 4460 7
• Root element – d3• select()• append()• Structure and aesthetic – attr() and
style()• Method chaining• Animation• Anonymous methods
![Page 8: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/8.jpg)
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
![Page 9: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/9.jpg)
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
![Page 10: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/10.jpg)
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
![Page 11: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/11.jpg)
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
![Page 12: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/12.jpg)
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
![Page 13: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/13.jpg)
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
![Page 14: D3 Practicum CS 4460 – Information Visualization Megha Sandesh Prepared under advisement by Dr.Fames Foley](https://reader036.vdocuments.us/reader036/viewer/2022070416/5697c01f1a28abf838cd18e3/html5/thumbnails/14.jpg)
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