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.

Building Interactive Data Visualizations (with D3)

1,543 views

Published on

Presentation from a Strata workshop, all materials/exercises can be found here: https://github.com/Jay-Oh-eN/strata-interactive-data-viz

--

Connecting data to business value depends on the capacity of CEOs, managers, and project leaders to understand and trust data insights. The most robust solution to bring trust in data is to allow decision-makers to explore relevant data and correlations through interactive visualizations that accurately represent data. This tutorial teaches participants the theory and know-how to design and build interactive data visualizations.

Published in: Technology
  • Microsoft Power BI for Healthcare Industry Data Visualization. Power BI provides Hawk Eye View of Insights from hidden data sources to Healthcare providers that are required to minimize costs, maximize revenue, improve patient service, abide regulatory compliances. https://goo.gl/WF3R2Z
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building Interactive Data Visualizations (with D3)

  1. 1. Building Interactive Data Visualizations (with D3) February 18th, 2015
  2. 2. Formerly Questions? tweet @clearspandex
  3. 3. Formerly Questions? tweet @clearspandex
  4. 4. + Currently Questions? tweet @clearspandex
  5. 5. Jonathan Dinu Director of Education, Galvanize jonathan@galvanize.it @clearspandex Questions? tweet @clearspandex
  6. 6. • The Power of DataVisualization • Basics ofVisual Theory • [Live Code]: Charts with Dimple.js • The DataVisualization Process • Why D3? • [Live Code]: Basics of D3 • BREAK • Author vs. Reader DrivenVisualizations • [Live Code]:Animation and Interaction with D3 • Narrative Structures • Q&A + Next Steps Outline Questions? tweet @clearspandex
  7. 7. Questions? tweet @clearspandex The Power of DataVisualization
  8. 8. Questions? tweet @clearspandex Graphical Excellence “Excellence in statistical graphics consist of complex ideas communicated with clarity, precision, and efficiency.” -- Edward R.Tufte
  9. 9. Questions? tweet @clearspandex Communication “Your best insight is only as good as your ability to communicate it to others.” -- Jonathan Dinu
  10. 10. http://dashingdemo.herokuapp.com/sample
  11. 11. http://www.facebookstories.com/stories/2200/data-visualization-photo-sharing-explosions
  12. 12. EricFischer,@enf Tourists Locals https://www.flickr.com/photos/walkingsf/sets/72157624209158632/
  13. 13. http://mbtaviz.github.io/
  14. 14. http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html Deconstructing a DataVisualization
  15. 15. Questions? tweet @clearspandex Visual Encodings Friday, July 18, 14
  16. 16. Questions? tweet @clearspandex Friday, July 18, 14 http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html
  17. 17. Questions? tweet @clearspandex “Data graphics visually display measured quantities by means of the combined use of points, lines, a coordinate system, numbers, symbols, words, shading, and color.” -- Edward R.Tufte
  18. 18. Questions? tweet @clearspandex • Add another city to chart (juxtaposition) • Change column visualized • Add scatter on top of line LIVE CODE
  19. 19. Process Questions? tweet @clearspandex COMPUTER SCIENCE INFOVIS AND HCI GRAPHIC DESIGN MATHEMATICS, STATISTICS, AND DATA MINING acquire parse filter mine represent refine interact Source: Ben Fry -- “Computational Information Design”
  20. 20. Process Questions? tweet @clearspandex COMPUTER SCIENCE INFOVIS AND HCI GRAPHIC DESIGN MATHEMATICS, STATISTICS, AND DATA MINING acquire parse filter mine represent refine interact Source: Ben Fry -- “Computational Information Design” Exploratory Explanatory
  21. 21. D3 Questions? tweet @clearspandex Friday, July 18, 14
  22. 22. Friday, July 18, 14 Questions? tweet @clearspandex D3
  23. 23. Questions? tweet @clearspandex HTML5 Canvas, SVG D3.js, Processing, Python Rickshaw, Vega Chartio, Excel Abstractions
  24. 24. Questions? Questions? tweet @clearspandex ThankYou! Jonathan Dinu Director of Education, Galvanize http://hopelessoptimism.com @clearspandex
  25. 25. Extra Slides
  26. 26. SVG Selection Data world_cup.tsv Data Binding
  27. 27. SVG Selection Data world_cup.tsv { date: 27-5-1934 attendance: 25000 } { date: 27-5-1934 attendance: 16000 } { date: 31-5-1934 attendance: 23000 } { date: 31-5-1934 attendance: 12000 } Data Binding
  28. 28. SVG Selection Data world_cup.tsv { date: 27-5-1934 attendance: 25000 } <circle></circle> <circle></circle> <circle></circle> <circle></circle> { date: 27-5-1934 attendance: 16000 } { date: 31-5-1934 attendance: 23000 } { date: 31-5-1934 attendance: 12000 } Data Binding
  29. 29. SVG Selection Data world_cup.tsv { date: 27-5-1934 attendance: 25000 } <circle></circle> <circle></circle> <circle></circle> <circle></circle> { date: 27-5-1934 attendance: 16000 } { date: 31-5-1934 attendance: 23000 } { date: 31-5-1934 attendance: 12000 } … … Data Binding

×