Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Data Visualizations

Intro to Data Visualizations

My introductory talk for the Los Angeles Data Summit on Immigration

67e05420d4dd3492097aeb77f44f7867?s=128

Daniel Greenfeld

December 08, 2012
Tweet

More Decks by Daniel Greenfeld

Other Decks in Education

Transcript

  1. @pydanny Data Visualization Fundamentals by Daniel Greenfeld Source: US Census

    Renderer: Many Eyes Created: 12/8/2012 Saturday, December 8, 12
  2. @pydanny • Principal at Cartwheel Web • Author of pydanny.com,

    a popular technology blog • Entrepreneur and CTO @pydanny • Learned Data Visualization at NASA Saturday, December 8, 12
  3. @pydanny Helping tomorrow! I’ll be there to help, so ask

    away! Or email me at pydanny@cartwheelweb.com Saturday, December 8, 12
  4. @pydanny Tools covered •Many Eyes •Google Charts •D3.js No coding

    Some coding Need a developer Saturday, December 8, 12
  5. @pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

  6. @pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

  7. @pydanny Many Eyes • Great for rapid visualizations • Free

    service provided by IBM. • All data posted is freely available. • Generates accessible content. Pros: Saturday, December 8, 12
  8. @pydanny Many Eyes • Closed source - IBM can shut

    it down. • All data posted is freely available. • Uses Java applets to present data. Cons: Saturday, December 8, 12
  9. @pydanny 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! Saturday, December 8, 12
  10. @pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

  11. @pydanny Signing Up I Click ‘login’ bit.ly/many-eyes Saturday, December 8,

    12
  12. @pydanny Signing Up II Click ‘register’ Saturday, December 8, 12

  13. @pydanny Signup III Email and Captcha Saturday, December 8, 12

  14. @pydanny Follow emailed instructions Talk to me afterwards if you

    have any problems. Saturday, December 8, 12
  15. @pydanny What data to use? • Many Eyes has a

    lot of free data on it. • I want a new report. • On data that I generated. Saturday, December 8, 12
  16. @pydanny Example I • I run a site called •

    I want to know how many of each pet type is registered. Saturday, December 8, 12
  17. @pydanny Example I Data Prep • I exported the data

    from to CSV. • Opened the CSV with Excel Saturday, December 8, 12
  18. @pydanny Uploading Data I Copy/paste from your spreadsheet Saturday, December

    8, 12
  19. @pydanny Uploading Data II Copy/pasted from Excel Many Eyes interpretation

    of my data Saturday, December 8, 12
  20. @pydanny Upload saved! Visualize! Saturday, December 8, 12

  21. @pydanny 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 Saturday, December 8, 12
  22. @pydanny 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 Bar/Bubble charts Pie Charts Saturday, December 8, 12
  23. @pydanny Bar Chart Saturday, December 8, 12

  24. @pydanny Bubble Chart Saturday, December 8, 12

  25. @pydanny Pie Chart Saturday, December 8, 12

  26. @pydanny Easy Conclusions • Dogs are clearly the most popular

    pet • Cats come second • Birds, Fish, Rabbits are roughly the same Saturday, December 8, 12
  27. @pydanny Many Eyes Text Analysis Saturday, December 8, 12

  28. @pydanny Example II • I built a site called •

    I want to do some text analysis. Saturday, December 8, 12
  29. @pydanny Scraping Text copy/paste with explicit permission of site and

    author http://bit.ly/WPfEde Saturday, December 8, 12
  30. @pydanny Upload the Data Saturday, December 8, 12

  31. @pydanny Word Tree Click for better view Warning: Dependent on

    java applets Saturday, December 8, 12
  32. @pydanny Tag Cloud http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/ Saturday, December 8, 12

  33. @pydanny Word Cloud Saturday, December 8, 12

  34. @pydanny Many Eyes Geo Analysis Saturday, December 8, 12

  35. @pydanny Example III • I’m the CTO of • We

    want to share information about people moving. Saturday, December 8, 12
  36. @pydanny Prep the data • Export to CSV • Open

    with Excel Saturday, December 8, 12
  37. @pydanny Upload the Data Saturday, December 8, 12

  38. @pydanny Choose Visualization Saturday, December 8, 12

  39. @pydanny Destinations Saturday, December 8, 12

  40. @pydanny Google Charts Saturday, December 8, 12

  41. @pydanny Google Charts Boot Camp https://developers.google.com/chart/ Saturday, December 8, 12

  42. @pydanny Google Charts • Free for many use cases •

    Customizable skins and themes • Relatively easy to use • Really good documentation • Bootcamp coming up! Pros Saturday, December 8, 12
  43. @pydanny Google Charts • Closed source - Google can change

    terms • You have to know a little code. • You won’t need much of my help! Cons Saturday, December 8, 12
  44. @pydanny D3.js Saturday, December 8, 12

  45. @pydanny D3.js example I http://nyti.ms/SN5mfh Four Ways to Slice Obama’s

    Budget Proposal Saturday, December 8, 12
  46. @pydanny D3.js example II http://www.isbarackobamathepresident.com/ Saturday, December 8, 12

  47. @pydanny D3.js • Open source! (source code on Github) •

    W3C Standard Friendly • Unbelievable power • Killer examples • Can use the same CSVs as Many-Eyes Pros Saturday, December 8, 12
  48. @pydanny D3.js • You will need a developer • Very

    steep learning curve Cons Saturday, December 8, 12
  49. @pydanny Warning code ahead! Saturday, December 8, 12

  50. @pydanny JQuery-like selectors d3.selectAll("p").style("color", "white"); Saturday, December 8, 12

  51. @pydanny 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"; }); Saturday, December 8, 12
  52. @pydanny 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. Saturday, December 8, 12
  53. @pydanny Data Binding d3.selectAll("p") .data([4, 8, 15, 16, 23, 42])

    .style("font-size", function(d) { return d + "px"; } ); Binds values to the first six paragraphs Sets font-size per bound paragraph Saturday, December 8, 12
  54. @pydanny 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 Saturday, December 8, 12
  55. @pydanny 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 Saturday, December 8, 12
  56. @pydanny Transitions d3.select("body").transition() .style("background-color", "black"); Saturday, December 8, 12

  57. @pydanny 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 Saturday, December 8, 12
  58. @pydanny 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); } } // Initialize the display to show a few nodes. root.children.forEach(toggleAll); toggle(root.children[1]); toggle(root.children[1].children[2]); toggle(root.children[9]); toggle(root.children[9].children[0]); update(root); Remember the Many-Eyes version of this data. Saturday, December 8, 12
  59. @pydanny Thank you! Saturday, December 8, 12