Intro to Data Visualizations

3,134 views

Published on

My introductory talk for the Data Summit on Immigration

Published in: News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,134
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
50
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Intro to Data Visualizations

  1. 1. Data Visualization Fundamentals Source: US Census Renderer: Many Eyes Created: 12/8/2012 by Daniel Greenfeld @pydannySaturday, December 8, 12
  2. 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. 3. Helping tomorrow! I’ll be there to help, so ask away! Or email me at pydanny@cartwheelweb.com @pydannySaturday, December 8, 12
  4. 4. Tools covered • Many Eyes No coding • Google Charts Some coding • D3.js Need a developer @pydannySaturday, December 8, 12
  5. 5. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  6. 6. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  7. 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. 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. 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. 10. Many Eyes bit.ly/many-eyes @pydannySaturday, December 8, 12
  11. 11. Signing Up I Click ‘login’ bit.ly/many-eyes @pydannySaturday, December 8, 12
  12. 12. Signing Up II Click ‘register’ @pydannySaturday, December 8, 12
  13. 13. Signup III Email and Captcha @pydannySaturday, December 8, 12
  14. 14. Follow emailed instructions Talk to me afterwards if you have any problems. @pydannySaturday, December 8, 12
  15. 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. 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. 17. Example I Data Prep • I exported the data from to CSV. • Opened the CSV with Excel @pydannySaturday, December 8, 12
  18. 18. Uploading Data I Copy/paste from your spreadsheet @pydannySaturday, December 8, 12
  19. 19. Uploading Data II Copy/pasted from Excel Many Eyes interpretation of my data @pydannySaturday, December 8, 12
  20. 20. Upload saved! Visualize! @pydannySaturday, December 8, 12
  21. 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. 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. 23. Bar Chart @pydannySaturday, December 8, 12
  24. 24. Bubble Chart @pydannySaturday, December 8, 12
  25. 25. Pie Chart @pydannySaturday, December 8, 12
  26. 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. 27. Many Eyes Text Analysis @pydannySaturday, December 8, 12
  28. 28. Example II • I built a site called • I want to do some text analysis. @pydannySaturday, December 8, 12
  29. 29. Scraping Text copy/paste with explicit permission of site and author http://bit.ly/WPfEde @pydannySaturday, December 8, 12
  30. 30. Upload the Data @pydannySaturday, December 8, 12
  31. 31. Word Tree Click for better view Warning: Dependent on java applets @pydannySaturday, December 8, 12
  32. 32. Tag Cloud http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/ @pydannySaturday, December 8, 12
  33. 33. Word Cloud @pydannySaturday, December 8, 12
  34. 34. Many Eyes Geo Analysis @pydannySaturday, December 8, 12
  35. 35. Example III • I’m the CTO of • We want to share information about people moving. @pydannySaturday, December 8, 12
  36. 36. Prep the data • Export to CSV • Open with Excel @pydannySaturday, December 8, 12
  37. 37. Upload the Data @pydannySaturday, December 8, 12
  38. 38. Choose Visualization @pydannySaturday, December 8, 12
  39. 39. Destinations @pydannySaturday, December 8, 12
  40. 40. Google Charts @pydannySaturday, December 8, 12
  41. 41. Google Charts Boot Camp https://developers.google.com/chart/ @pydannySaturday, December 8, 12
  42. 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. 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. 44. D3.js @pydannySaturday, December 8, 12
  45. 45. D3.js example I http://nyti.ms/SN5mfh Four Ways to Slice Obama’s Budget Proposal @pydannySaturday, December 8, 12
  46. 46. D3.js example II http://www.isbarackobamathepresident.com/ @pydannySaturday, December 8, 12
  47. 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. 48. D3.js Cons • You will need a developer • Very steep learning curve @pydannySaturday, December 8, 12
  49. 49. Warning code ahead! @pydannySaturday, December 8, 12
  50. 50. JQuery-like selectors d3.selectAll("p").style("color", "white"); @pydannySaturday, December 8, 12
  51. 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. 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. 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. 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. 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. 56. Transitions d3.select("body").transition() .style("background-color", "black"); @pydannySaturday, December 8, 12
  57. 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. 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. 59. Thank you! @pydannySaturday, December 8, 12

×