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.
Civic Impact through Data
Visualization
May 24th, 2015
Formerly
@clearspandex
Formerly
@clearspandex
+
Currently
@clearspandex
Jonathan Dinu

VP of Academic Excellence, Galvanize

jonathan@galvanize.it

@clearspandex
The Power of DataVisualization
@EdwardTufte
Graphical Excellence
“Excellence in statistical graphics consist of complex
ideas communicated with clarity, precision, an...
• The Power of DataVisualization
• Your Role as a Data Scientist
• Basics ofVisual Theory
• The DataVisualization Process
...
http://dashingdemo.herokuapp.com/sample
Dashboarding (BI)
http://www.facebookstories.com/stories/2200/data-visualization-photo-sharing-explosions
Data Art
http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves
Explaining Complexity (through Simulation)
EricFischer,@enf
Tourists
Locals
https://www.flickr.com/photos/walkingsf/sets/72157624209158632/
DataViz as Data Science
Communication
“Your best insight is only as good as your ability to
communicate it to others.”
-- Jonathan Dinu
@clearspan...
Visual Encodings
Friday, July 18, 14
“Data graphics visually display measured quantities by
means of the combined use of points, lines, a coordinate
system, nu...
Gestalt Principles
http://emeeks.github.io/gestaltdataviz/section1.html
Similarity Proximity
http://emeeks.github.io/gestaltdataviz/section1.html
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
Deconstructing a D...
HTML5 Canvas, SVG
D3.js, Processing, Python
Rickshaw, Vega
Chartio, Excel
Abstractions
@clearspandex
D3
Friday, July 18, 14
@clearspandex
Friday, July 18, 14
D3
@clearspandex
LIVE CODE
Process
COMPUTER SCIENCE
INFOVIS
AND HCI
GRAPHIC DESIGN
MATHEMATICS, STATISTICS,
AND DATA MINING
acquire parse filter mine ...
Iterative Process
COMPUTER SCIENCE
INFOVIS
AND HCI
GRAPHIC DESIGN
MATHEMATICS, STATISTICS,
AND DATA MINING
acquire parse fi...
Process
COMPUTER SCIENCE
INFOVIS
AND HCI
GRAPHIC DESIGN
MATHEMATICS, STATISTICS,
AND DATA MINING
acquire parse filter mine ...
http://mbtaviz.github.io/
Friday, July 18, 14
http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html
http://map.datacanvas.org/
• Which chart type would you use to visualize air quality over
time?
• Which chart would you use to compare the reading of...
Air Quality
Temperature
Noise
LIVE CODE
http://visualizations.manassra.com/syria
Data Narrative (Author Driven)
Data Narrative (Reader Driven)
Friday, July 18, 14
http://sanfrancisco.crimespotting.org/
• What are the narrative structures of each of the previous
two visualizations?
• What techniques does the author use to a...
Friday, July 18, 14
Friday, July 18, 14
Data Narrative (Reader Driven)
http://www.antievictionmappingproject.net/ellis.html
• What are the narrative structures of each of the previous
two visualizations?
• What techniques does the author use to a...
Civic Impact
Engagement
(http://pulse.media.mit.edu/)
Empowerment
(https://recovers.org/)
(http://www.southbendvoices.com/)
• Talk to your partner about 3 potential “thesis” questions
• For each, come up with 2 exploratory questions
• Sketch a vi...
Questions?
ThankYou!
Jonathan Dinu

http://hopelessoptimism.com

@clearspandex
Extra Slides
SVG
Selection Data
world_cup.tsv
Data Binding
SVG
Selection Data
world_cup.tsv
{ date: 27-5-1934
attendance: 25000 }
{ date: 27-5-1934
attendance: 16000 }
{ date: 31-5-...
SVG
Selection Data
world_cup.tsv
{ date: 27-5-1934
attendance: 25000 }
<circle></circle>
<circle></circle>
<circle></circl...
SVG
Selection Data
world_cup.tsv
{ date: 27-5-1934
attendance: 25000 }
<circle></circle>
<circle></circle>
<circle></circl...
Upcoming SlideShare
Loading in …5
×

Civic Impact through Data Visualization

513 views

Published on

As a Data { Scientist | Artist | Engineer } you have incredible potential to impact the world at large, but often times how much change you can effect depends on how well you can communicate. This 3-hour workshop will focus on empowering civic minded developers and artists to leverage a wealth of open data through data visualization to inform public opinion. You will get hands on experience with D3.js and Javascript to explore and visualize the Data Canvas sensor data (along with city of SF data) to tell a compelling civic narrative. After all, you best insight is only as good as your ability to share it.

Published in: Technology
  • Be the first to comment

Civic Impact through Data Visualization

  1. 1. Civic Impact through Data Visualization May 24th, 2015
  2. 2. Formerly @clearspandex
  3. 3. Formerly @clearspandex
  4. 4. + Currently @clearspandex
  5. 5. Jonathan Dinu VP of Academic Excellence, Galvanize jonathan@galvanize.it @clearspandex
  6. 6. The Power of DataVisualization @EdwardTufte
  7. 7. Graphical Excellence “Excellence in statistical graphics consist of complex ideas communicated with clarity, precision, and efficiency.” -- Edward R.Tufte @EdwardTufte
  8. 8. • The Power of DataVisualization • Your Role as a Data Scientist • Basics ofVisual Theory • The DataVisualization Process • Narrative Structure Outline
  9. 9. http://dashingdemo.herokuapp.com/sample Dashboarding (BI)
  10. 10. http://www.facebookstories.com/stories/2200/data-visualization-photo-sharing-explosions Data Art
  11. 11. http://blogs.kqed.org/lowdown/2013/11/12/traffic-waves Explaining Complexity (through Simulation)
  12. 12. EricFischer,@enf Tourists Locals https://www.flickr.com/photos/walkingsf/sets/72157624209158632/ DataViz as Data Science
  13. 13. Communication “Your best insight is only as good as your ability to communicate it to others.” -- Jonathan Dinu @clearspandex
  14. 14. Visual Encodings Friday, July 18, 14
  15. 15. “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
  16. 16. Gestalt Principles http://emeeks.github.io/gestaltdataviz/section1.html
  17. 17. Similarity Proximity http://emeeks.github.io/gestaltdataviz/section1.html
  18. 18. http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html Deconstructing a DataVisualization
  19. 19. HTML5 Canvas, SVG D3.js, Processing, Python Rickshaw, Vega Chartio, Excel Abstractions @clearspandex
  20. 20. D3 Friday, July 18, 14 @clearspandex
  21. 21. Friday, July 18, 14 D3 @clearspandex
  22. 22. LIVE CODE
  23. 23. Process 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”
  24. 24. Iterative Process 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”
  25. 25. Process 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
  26. 26. http://mbtaviz.github.io/
  27. 27. Friday, July 18, 14 http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html
  28. 28. http://map.datacanvas.org/
  29. 29. • Which chart type would you use to visualize air quality over time? • Which chart would you use to compare the reading of a given location to other locations in the same city? • Which chart would you use to represent the historic distribution of temperature for each hour of the day • Which chart would you use to visualize how air quality, dust, and UV all relate and change over time? Exercise
  30. 30. Air Quality
  31. 31. Temperature
  32. 32. Noise
  33. 33. LIVE CODE
  34. 34. http://visualizations.manassra.com/syria Data Narrative (Author Driven)
  35. 35. Data Narrative (Reader Driven) Friday, July 18, 14 http://sanfrancisco.crimespotting.org/
  36. 36. • What are the narrative structures of each of the previous two visualizations? • What techniques does the author use to achieve this effect? • What is the story being told? • Anything that could be improved? Exercise
  37. 37. Friday, July 18, 14
  38. 38. Friday, July 18, 14
  39. 39. Data Narrative (Reader Driven) http://www.antievictionmappingproject.net/ellis.html
  40. 40. • What are the narrative structures of each of the previous two visualizations? • What techniques does the author use to achieve this effect? • What is the story being told? • Anything that could be improved? Exercise
  41. 41. Civic Impact
  42. 42. Engagement (http://pulse.media.mit.edu/)
  43. 43. Empowerment (https://recovers.org/) (http://www.southbendvoices.com/)
  44. 44. • Talk to your partner about 3 potential “thesis” questions • For each, come up with 2 exploratory questions • Sketch a visualization that explores each thesis question Exercise
  45. 45. Questions? ThankYou! Jonathan Dinu http://hopelessoptimism.com @clearspandex
  46. 46. Extra Slides
  47. 47. SVG Selection Data world_cup.tsv Data Binding
  48. 48. 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
  49. 49. 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
  50. 50. 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

×