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

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 Tools covered •Many Eyes •Google Charts •D3.js No coding

    Some coding Need a developer Saturday, December 8, 12
  4. @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
  5. @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
  6. @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
  7. @pydanny Follow emailed instructions Talk to me afterwards if you

    have any problems. Saturday, December 8, 12
  8. @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
  9. @pydanny Example I • I run a site called •

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

    from to CSV. • Opened the CSV with Excel Saturday, December 8, 12
  11. @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
  12. @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
  13. @pydanny Easy Conclusions • Dogs are clearly the most popular

    pet • Cats come second • Birds, Fish, Rabbits are roughly the same Saturday, December 8, 12
  14. @pydanny Example II • I built a site called •

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

    author http://bit.ly/WPfEde Saturday, December 8, 12
  16. @pydanny Example III • I’m the CTO of • We

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

    with Excel Saturday, December 8, 12
  18. @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
  19. @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
  20. @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
  21. @pydanny D3.js • You will need a developer • Very

    steep learning curve Cons Saturday, December 8, 12
  22. @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
  23. @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
  24. @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
  25. @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
  26. @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
  27. @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
  28. @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