Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Data Visualization on the Web - Intro to D3

707 views

Published on

  • Be the first to comment

  • Be the first to like this

Data Visualization on the Web - Intro to D3

  1. 1. Data Visualization on the Web (Advanced) February 3, 2014 Angela Zoss Data Visualization Coordinator Data & GIS Services, Perkins 226
  2. 2. Workshop Feedback Form To give feedback on this workshop: http://library.duke.edu/data/feedback.html
  3. 3. D3 Resources • Interactive DataVisualization for theWeb http://chimera.labs.oreilly.com/books/123000000 0345 • Tutorial and Cheat Sheet, c. 2012 www.jeromecukier.net/blog/2012/10/15/d3- tutorial-at-visweek-2012/ • D3Tips andTricks https://leanpub.com/D3-Tips-and-Tricks/read
  4. 4. When to use D3 • Need for unusual, highly customized chart types (http://bl.ocks.org/mbostock) • Relatively low number of data points or visible elements (SVG vs. HTML5 Canvas) • Impress your friends
  5. 5. About D3 • JavaScript library • Fairly low level; building with rectangles and circles and lines, instead of pre-made chart structures* • Basic functioning makes it easy to join HTML elements with data points
  6. 6. *D3 Middleware Basic line/area chart: • xCharts ~10 lines? http://tenxer.github.io/xcharts/ • Rickshaw (specifically for time series) ~16 lines http://code.shutterstock.com/rickshaw/ • NVD3 ~31 lines http://nvd3.org/ • Vega ~57 lines http://trifacta.github.io/vega/ http://chimera.labs.oreilly.com/books/12300000003 45/ch02.html#_tools_built_with_d3
  7. 7. Developing with D3 • Text editors (Sublime,TextWrangler, etc.) and browsers with developer tools (esp. Chrome) • In-browser JavaScript prototyping – Tributary (http://tributary.io/) – Livecoding (http://livecoding.io/) – JSFiddle (http://jsfiddle.net/) – Plunker (http://plnkr.co/) • GitHub Gist/bl.ocks.org http://bl.ocks.org/
  8. 8. Basic Structure • HTML – Empty element to insert chart into • JavaScript – Load data, build chart • CSS – Add style based on tags, classes, IDs
  9. 9. Example: Gapminder Subset http://bl.ocks.org/dukevis/8782982
  10. 10. To grab your own copy Running a local web server (optional for today) http://chimera.labs.oreilly.com/books/1230000000345/ch04.html#_ setting_up_a_web_server • Install git and run: git clone https://gist.github.com/8782982.git • Download zip archive of files, edit in text editor, view in browser https://gist.github.com/dukevis/8782982/download
  11. 11. Code Structure <html> <head>…</head> <body>…</body> </html>
  12. 12. Code Structure <html> <head> <style>…</style> </head> <body>…</body> </html>
  13. 13. Code Structure <html> <head> <style>…</style> </head> <body> <div id=“chart”></div> <script>…</script> </body> </html>
  14. 14. Code Structure (often) <script> //Set up static and global elements //Load data //Draw the chart </script>
  15. 15. JavaScript Syntax • Declaring variables var number1 = 1; var number2 = 2; • Defining functions function sum(a, b) {return a+b;} • Operations sum(number1, number2); • Method chaining sum(number1, number2).toFixed(2);
  16. 16. D3 selections In a nutshell, you use JavaScript selections (“selectAll”) to create a holding pen to store data and/or visual elements, which may or may not have been connected to each other yet. http://bost.ocks.org/mike/selection/
  17. 17. Additional Example: Coordinated Views http://bl.ocks.org/dukevis/6768900
  18. 18. Handy D3 Techniques • Transitions, to animate changes in state http://bost.ocks.org/mike/transition/ • Dispatch, to coordinate multiple charts http://bl.ocks.org/mbostock/5872848 • Crossfilter, for larger datasets http://square.github.io/crossfilter/ • Using make files to simplify chart regeneration http://bost.ocks.org/mike/make/
  19. 19. Data & GIS Services • Data collections, LibGuides, etc. http://library.duke.edu/data/ • Blog (tutorials, announcements, etc.) http://blogs.library.duke.edu/data/ • Walk-in consultations http://library.duke.edu/data/about/schedule.html (or by appointment – askdata@duke.edu) • Perkins 226 computing cluster http://library.duke.edu/data/about/lab.html (fast hardware, diverse software) • Additional workshops http://library.duke.edu/data/news/ (listserv – dgs-announce@duke.edu)
  20. 20. More on Data Visualization What kinds of visualizations are out there? How hard are they to reproduce? See the Intro to DataVisualization LibGuide for general examples and tools/tutorials. http://guides.library.duke.edu/datavis/ AdditionalVisualization LibGuides: http://guides.library.duke.edu/vis_types http://guides.library.duke.edu/topten http://guides.library.duke.edu/visualcomm
  21. 21. Reminder: to give feedback on this workshop: http://library.duke.edu/data/feedback.html Thank you!
  22. 22. QUESTIONS? SUGGESTIONS? angela.zoss@duke.edu http://twitter.com/duke_vis

×