Your SlideShare is downloading. ×
Intro to Data Visualizations
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro to Data Visualizations

2,104
views

Published on

My introductory talk for the Data Summit on Immigration

My introductory talk for the Data Summit on Immigration

Published in: News & Politics

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,104
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
41
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Data Visualization Fundamentals Source: US Census Renderer: Many Eyes Created: 12/8/2012 by Daniel Greenfeld @pydannySaturday, December 8, 12
  • 2. @pydanny • Learned Data Visualization at NASA • Principal at Cartwheel Web • Author of pydanny.com, a popular technology blog • Entrepreneur and CTO @pydannySaturday, December 8, 12
  • 3. Helping tomorrow! I’ll be there to help, so ask away! Or email me at pydanny@cartwheelweb.com @pydannySaturday, December 8, 12
  • 4. Tools covered • Many Eyes No coding • Google Charts Some coding • D3.js Need a developer @pydannySaturday, December 8, 12
  • 5. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  • 6. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  • 7. Many Eyes Pros: • Great for rapid visualizations • Free service provided by IBM. • All data posted is freely available. • Generates accessible content. @pydannySaturday, December 8, 12
  • 8. Many Eyes Cons: • Closed source - IBM can shut it down. • All data posted is freely available. • Uses Java applets to present data. @pydannySaturday, December 8, 12
  • 9. Using Many Eyes 1. Go to bit.ly/many-eyes 2. Sign up with your email 3. Upload some data 4. Create a visualization Let’s try it out! @pydannySaturday, December 8, 12
  • 10. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  • 11. Signing Up I Click ‘login’ bit.ly/many-eyes @pydannySaturday, December 8, 12
  • 12. Signing Up II Click ‘register’ @pydannySaturday, December 8, 12
  • 13. Signup III Email and Captcha @pydannySaturday, December 8, 12
  • 14. Follow emailed instructions Talk to me afterwards if you have any problems. @pydannySaturday, December 8, 12
  • 15. What data to use? • Many Eyes has a lot of free data on it. • I want a new report. • On data that I generated. @pydannySaturday, December 8, 12
  • 16. Example I • I run a site called • I want to know how many of each pet type is registered. @pydannySaturday, December 8, 12
  • 17. Example I Data Prep • I exported the data from to CSV. • Opened the CSV with Excel @pydannySaturday, December 8, 12
  • 18. Uploading Data I Copy/paste from your spreadsheet @pydannySaturday, December 8, 12
  • 19. Uploading Data II Copy/pasted from Excel Many Eyes interpretation of my data @pydannySaturday, December 8, 12
  • 20. Upload saved! Visualize! @pydannySaturday, December 8, 12
  • 21. Choosing Visualizations • Analyze Text • Compare a set of values • See relationships among data points • See the parts of a whole • See the world • Track rises and falls over time @pydannySaturday, December 8, 12
  • 22. Choosing Visualizations • Analyze Text Bar/Bubble charts • Compare a set of values • See relationships among data points • See the parts of a whole Pie Charts • See the world • Track rises and falls over time @pydannySaturday, December 8, 12
  • 23. Bar Chart @pydannySaturday, December 8, 12
  • 24. Bubble Chart @pydannySaturday, December 8, 12
  • 25. Pie Chart @pydannySaturday, December 8, 12
  • 26. Easy Conclusions • Dogs are clearly the most popular pet • Cats come second • Birds, Fish, Rabbits are roughly the same @pydannySaturday, December 8, 12
  • 27. Many Eyes Text Analysis @pydannySaturday, December 8, 12
  • 28. Example II • I built a site called • I want to do some text analysis. @pydannySaturday, December 8, 12
  • 29. Scraping Text copy/paste with explicit permission of site and author http://bit.ly/WPfEde @pydannySaturday, December 8, 12
  • 30. Upload the Data @pydannySaturday, December 8, 12
  • 31. Word Tree Click for better view Warning: Dependent on java applets @pydannySaturday, December 8, 12
  • 32. Tag Cloud http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/ @pydannySaturday, December 8, 12
  • 33. Word Cloud @pydannySaturday, December 8, 12
  • 34. Many Eyes Geo Analysis @pydannySaturday, December 8, 12
  • 35. Example III • I’m the CTO of • We want to share information about people moving. @pydannySaturday, December 8, 12
  • 36. Prep the data • Export to CSV • Open with Excel @pydannySaturday, December 8, 12
  • 37. Upload the Data @pydannySaturday, December 8, 12
  • 38. Choose Visualization @pydannySaturday, December 8, 12
  • 39. Destinations @pydannySaturday, December 8, 12
  • 40. Google Charts @pydannySaturday, December 8, 12
  • 41. Google Charts Boot Camp https://developers.google.com/chart/ @pydannySaturday, December 8, 12
  • 42. Google Charts Pros • Free for many use cases • Customizable skins and themes • Relatively easy to use • Really good documentation • Bootcamp coming up! @pydannySaturday, December 8, 12
  • 43. Google Charts Cons • Closed source - Google can change terms • You have to know a little code. • You won’t need much of my help! @pydannySaturday, December 8, 12
  • 44. D3.js @pydannySaturday, December 8, 12
  • 45. D3.js example I http://nyti.ms/SN5mfh Four Ways to Slice Obama’s Budget Proposal @pydannySaturday, December 8, 12
  • 46. D3.js example II http://www.isbarackobamathepresident.com/ @pydannySaturday, December 8, 12
  • 47. D3.js Pros • Open source! (source code on Github) • W3C Standard Friendly • Unbelievable power • Killer examples • Can use the same CSVs as Many-Eyes @pydannySaturday, December 8, 12
  • 48. D3.js Cons • You will need a developer • Very steep learning curve @pydannySaturday, December 8, 12
  • 49. Warning code ahead! @pydannySaturday, December 8, 12
  • 50. JQuery-like selectors d3.selectAll("p").style("color", "white"); @pydannySaturday, December 8, 12
  • 51. Dynamic Properties d3.selectAll("p").style("color", function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; }); d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; }); @pydannySaturday, December 8, 12
  • 52. Loading Data d3.json("census.json", function(error, data){} // Do logic here }); d3.csv("pets.csv", function(error, data){} // Do logic here }); d3.tsv("immigrants.tsv", function(error, data){} // Do logic here }); Supports JSON, CSV, and TSV. @pydannySaturday, December 8, 12
  • 53. Data Binding Binds values to the first six paragraphs d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) { return d + "px"; } ); Sets font-size per bound paragraph @pydannySaturday, December 8, 12
  • 54. Entering Data var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String); p.enter().append("p") .text(String); If less than six paragraphs, then add until six exist. Create nodes for incoming data @pydannySaturday, December 8, 12
  • 55. Exiting Data var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String); p.enter().append("p") .text(String); p.exit().remove(); Remove extra nodes Cleaning up your workspace @pydannySaturday, December 8, 12
  • 56. Transitions d3.select("body").transition() .style("background-color", "black"); @pydannySaturday, December 8, 12
  • 57. Build on Web-Standards • Creates SVG images on the fly • No Java or Flash needed • Works on modern browsers • Easy to debug with browser inspectors @pydannySaturday, December 8, 12
  • 58. Requires Javascript skill var m = [20, 120, 20, 120],     w = 1280 - m[1] - m[3],     h = 800 - m[0] - m[2],     i = 0,     root; var tree = d3.layout.tree()     .size([h, w]); var diagonal = d3.svg.diagonal()     .projection(function(d) { return [d.y, d.x]; }); var vis = d3.select("#body").append("svg:svg")     .attr("width", w + m[1] + m[3])     .attr("height", h + m[0] + m[2])   .append("svg:g")     .attr("transform", "translate(" + m[3] + "," + m[0] d3.json("flare.json", function(json) {   root = json;   root.x0 = h / 2;   root.y0 = 0;   function toggleAll(d) {     if (d.children) {       d.children.forEach(toggleAll);       toggle(d);     } Remember the Many-Eyes   }   // Initialize the display to show a few nodes. version of this data.   root.children.forEach(toggleAll);   toggle(root.children[1]);   toggle(root.children[1].children[2]);   toggle(root.children[9]);   toggle(root.children[9].children[0]); @pydannySaturday, December 8, 12   update(root);
  • 59. Thank you! @pydannySaturday, December 8, 12