Building JavaScript Visualizations Part 1

Transcript

1. Building JavaScript Visualizations
   Part 1: You Might Not Need D3.js
   Stephen Thomas (stephen@sathomas.me)
   

   View Slide

2. Why Visualize Data?
   The US health care system is not as cost-effective
   as the systems of other developed countries.
   

   View Slide

3. Why Visualize Data?
   The US health care system is not as cost-effective
   as the systems of other developed countries.
   

   View Slide

4. Why Visualize Data?
   The US health care system is not as cost-effective
   as the systems of other developed countries.
   

   View Slide

5. Visualizations with JavaScript
   

   View Slide

6. Choosing a Library
   • Functionality: Does it support the
   visualizations you need?
   • License: Open source or commercial
   • Active development and support
   • Browser compatibility
   • HTML, SVG, or Canvas
   • Dependencies (e.g. jQuery)
   

   View Slide

7. Using a Library (flotr2)
   HTML5 skeleton
   
   
   
   
   
   
   
   
   
   
   
   
   

   View Slide

8. Using a Library
   The raw data
   var pacific_data = [
   { country: "Australia", spending: 9.1, life: 81.8 },
   { country: "New Zealand", spending: 10.1, life: 81.0 }
   ];
   var europe_data = [
   { country: "Austria", spending: 11.0, life: 80.7 },
   { country: "Belgium", spending: 10.5, life: 80.3 },
   { country: "Czech Republic", spending: 7.5, life: 77.7 },
   // Data set continues...
   var us_data = [
   { country: "United States", spending: 17.6, life: 78.7 }
   ];
   

   View Slide

9. Using a Library
   Structuring the data
   var pacific=[], europe=[], americas=[], mideast=[], asia=[], us=[];
   for (i = 0; i < pacific_data.length; i++) {
   pacific.push([ pacific_data[i].spending, pacific_data[i].life ]);
   }
   for (i = 0; i < europe_data.length; i++) {
   europe.push([ europe_data[i].spending, europe_data[i].life ]);
   }
   // Code continues...
   

   View Slide

10. Using a Library
    Drawing the chart
    Flotr.draw(
    document.getElementById("chart"),
    [
    { data: pacific, label: "Pacific", points: {show:true} },
    { data: europe, label: "Europe", points: {show:true} },
    { data: americas, label: "Americas", points: {show:true} },
    { data: mideast, label: "Middle East", points: {show:true} },
    { data: asia, label: "Asia", points: {show:true} },
    { data: us, label: "United States", points: {show:true} }
    ],{
    title: "Life Expectancy vs. Health Care Spending",
    subtitle: "(by Country, 2010 OECD data)",
    xaxis: {min: 5, max: 25, tickDecimals: 0,
    title: "Spending as Percentage of GDP",
    tickFormatter: function(val) {return val+"%"}},
    yaxis: {min: 70, max: 85, tickDecimals: 0, title: "Years"},
    legend: {position: "ne"}
    }
    );
    

    View Slide

11. Using a Library
    View the chart
    

    View Slide

12. Visualization: Not Just Charts
    • Time Lines (to show temporal changes)
    • Maps (to show patterns in geographic data)
    • Tree Maps (to show hierarchies)
    • Heat Maps (to show relative intensities)
    • Word Clouds (to show textual patterns)
    • Network Graphs (to show relationships)
    

    View Slide

13. Time Lines (Timeline JS)
    • Data from public Google Docs spreadsheet
    • Visualization in embedded
    

    View Slide

14. Maps via Symbol Fonts
    

    View Slide

15. Using a Symbol Font
    HTML skeleton
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

16. Using a Symbol Font
    Stack the symbols with CSS
    #map {
    position: relative;
    }
    #map > [class*="map-"] {
    position: absolute;
    top: 0;
    left: 0;
    }
    

    View Slide

17. Using a Symbol Font
    The raw data
    var median_ages = [
    { "country": "al", "age": 29.968 },
    { "country": "at", "age": 41.768 },
    { "country": "ba", "age": 39.291 },
    { "country": "be", "age": 41.301 },
    { "country": "bg", "age": 41.731 },
    // Data set continues...
    

    View Slide

18. Using a Symbol Font
    Add the HTML elements
    var map = document.getElementById("map");
    median_ages.forEach(function(age) {
    var span = document.createElement("span");
    span.className = "map-" + age.country;
    span.setAttribute("data-age", Math.round(age.age));
    map.appendChild(span);
    });
    

    View Slide

19. Using a Symbol Font
    Color code the symbols with CSS
    #map > [data-age="44"] { color: #2d9999; }
    #map > [data-age="43"] { color: #2a9493; }
    #map > [data-age="42"] { color: #278f8e; }
    /* CSS rules continue... */
    #map-legend .key {
    background: linear-gradient(to bottom, #004a4a 0%,#2d9999 100%);
    }
    

    View Slide

20. Using a Symbol Font
    View the map
    

    View Slide

21. Tree Map (Treemap-Squared)
    

    View Slide

22. Heat Map (heat map.js)
    

    View Slide

23. Word Cloud (wordcloud2)
    

    View Slide

24. Network Graph (sigmajs)
    The raw data
    var albums = [
    {
    album: "Miles Davis - Kind of Blue",
    musicians: [
    "Cannonball Adderley",
    "Paul Chambers",
    "Jimmy Cobb",
    "John Coltrane",
    "Miles Davis",
    "Bill Evans"
    ]
    },{
    album: "John Coltrane - A Love Supreme",
    musicians: [
    "John Coltrane",
    "Jimmy Garrison",
    "Elvin Jones",
    "McCoy Tyner"
    ]
    // Data set continues...
    

    View Slide

25. Network Graph
    Draw the nodes
    var s = new sigma("graph");
    for (var idx=0; idxvar theta = 2 * Math.PI * idx / albums.length;
    s.graph.addNode({
    id: ""+idx, // Note: 'id' must be a string
    label: albums[idx].album,
    x: radius*Math.sin(theta),
    y: radius*Math.cos(theta),
    size: 1
    });
    }
    s.refresh();
    

    View Slide

26. Network Graph
    View the nodes
    

    View Slide

27. Network Graphs
    Draw the edges
    for (var srcIdx=0; srcIdxvar src = albums[srcIdx];
    for (var mscIdx=0; mscIdxvar msc = src.musicians[mscIdx];
    for (var tgtIdx=srcIdx+1; tgtIdxvar tgt = albums[tgtIdx];
    if (tgt.musicians.some(function(tgtMsc) {return tgtMsc === msc;})) {
    s.graph.addEdge({
    id: srcIdx + "." + mscIdx + "-" + tgtIdx,
    source: ""+srcIdx,
    target: ""+tgtIdx
    })
    }
    }
    }
    }
    

    View Slide

28. Network Graph
    View the nodes and edges
    

    View Slide

29. Network Graph
    Automate the layout
    s.startForceAtlas2({
    gravity: 100,
    scalingRatio: 70,
    slowDown: 100
    });
    setTimeout(function() {
    s.stopForceAtlas2();
    }, 10000);
    

    View Slide

30. Network Graph
    Show labels on click
    s.bind('clickNode', function(ev) {
    var nodeIdx = ev.data.node.id;
    var nodes = s.graph.nodes();
    nodes.forEach(function(node) {
    if (nodes[nodeIdx] === node) {
    node.label = node.album;
    } else {
    node.label = "";
    }
    });
    });
    

    View Slide

31. Network Graph
    

    View Slide

32. More Information
    Web Site: jsDataV.is
    Book: Data Visualization with JavaScript
    (No Starch Press, available early 2015)
    Full content available for free on web site
    

    View Slide