1 / 14

D3 Practicum

Learn about D3 and SVG for dynamic visualizations. Bind data, create animations, sync views, and load external data with D3. Discover the power of Scalable Vector Graphics (SVG) for precise graphics rendering.

maddie
Download Presentation

D3 Practicum

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  3. Background D3 – Data Driven Documents Developed by Mike Bostock, creator of Protovis Free Javascript library Bind data to DOM, apply transformations 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 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

  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

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

  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

  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 4460

  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

  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 4460

  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

  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 4460

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

More Related