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

Building JavaScript Visualizations Part 1

Building JavaScript Visualizations Part 1

Stephen Thomas

October 18, 2014
Tweet

More Decks by Stephen Thomas

Other Decks in Technology

Transcript

  1. Building JavaScript Visualizations
    Part 1: You Might Not Need D3.js
    Stephen Thomas ([email protected])

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Visualizations with JavaScript

    View full-size 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 full-size slide

  7. Using a Library (flotr2)
    HTML5 skeleton












    View full-size 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 full-size 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 full-size 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 full-size slide

  11. Using a Library
    View the chart

    View full-size 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 full-size slide

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

    View full-size slide

  14. Maps via Symbol Fonts

    View full-size slide

  15. Using a Symbol Font
    HTML skeleton











    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  20. Using a Symbol Font
    View the map

    View full-size slide

  21. Tree Map (Treemap-Squared)

    View full-size slide

  22. Heat Map (heat map.js)

    View full-size slide

  23. Word Cloud (wordcloud2)

    View full-size 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 full-size 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 full-size slide

  26. Network Graph
    View the nodes

    View full-size 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 full-size slide

  28. Network Graph
    View the nodes and edges

    View full-size slide

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

    View full-size 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 full-size slide

  31. Network Graph

    View full-size 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 full-size slide