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

Transcript

  1. 1.

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

    Renderer: Many Eyes Created: 12/8/2012 Saturday, December 8, 12
  2. 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. 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. 4.

    @pydanny Tools covered •Many Eyes •Google Charts •D3.js No coding

    Some coding Need a developer Saturday, December 8, 12
  5. 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
  6. 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
  7. 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
  8. 14.

    @pydanny Follow emailed instructions Talk to me afterwards if you

    have any problems. Saturday, December 8, 12
  9. 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
  10. 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
  11. 17.

    @pydanny Example I Data Prep • I exported the data

    from to CSV. • Opened the CSV with Excel Saturday, December 8, 12
  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
  13. 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
  14. 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
  15. 28.

    @pydanny Example II • I built a site called •

    I want to do some text analysis. Saturday, December 8, 12
  16. 29.

    @pydanny Scraping Text copy/paste with explicit permission of site and

    author http://bit.ly/WPfEde Saturday, December 8, 12
  17. 31.
  18. 35.

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

    want to share information about people moving. Saturday, December 8, 12
  19. 36.

    @pydanny Prep the data • Export to CSV • Open

    with Excel Saturday, December 8, 12
  20. 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
  21. 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
  22. 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
  23. 48.

    @pydanny D3.js • You will need a developer • Very

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