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

Building JavaScript Visualizations Part 1

Building JavaScript Visualizations Part 1

Avatar for Stephen Thomas

Stephen Thomas

October 18, 2014
Tweet

More Decks by Stephen Thomas

Other Decks in Technology

Transcript

  1. Why Visualize Data? The US health care system is not

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

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

    as cost-effective as the systems of other developed countries.
  4. 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)
  5. Using a Library (flotr2) HTML5 skeleton <!DOCTYPE html> <html lang="en">

    <head> <meta charset="utf-8"> <title></title> </head> <body> <div id='chart' style="width:600px;height:300px;"></div> <!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]--> <script src="js/flotr2.min.js"></script> </body> </html>
  6. 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 } ];
  7. 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...
  8. 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"} } );
  9. 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)
  10. Time Lines (Timeline JS) • Data from public Google Docs

    spreadsheet • Visualization in embedded <iframe>
  11. Using a Symbol Font HTML skeleton <!DOCTYPE html> <html lang="en">

    <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/continental.css"> </head> <body> <div id="map"></div> </body> </html>
  12. Using a Symbol Font Stack the symbols with CSS #map

    { position: relative; } #map > [class*="map-"] { position: absolute; top: 0; left: 0; }
  13. 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...
  14. 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); });
  15. 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%); }
  16. 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...
  17. Network Graph Draw the nodes var s = new sigma("graph");

    for (var idx=0; idx<albums.length; idx++) { var 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();
  18. Network Graphs Draw the edges for (var srcIdx=0; srcIdx<albums.length; srcIdx++)

    { var src = albums[srcIdx]; for (var mscIdx=0; mscIdx<src.musicians.length; mscIdx++) { var msc = src.musicians[mscIdx]; for (var tgtIdx=srcIdx+1; tgtIdx<albums.length; tgtIdx++) { var tgt = albums[tgtIdx]; if (tgt.musicians.some(function(tgtMsc) {return tgtMsc === msc;})) { s.graph.addEdge({ id: srcIdx + "." + mscIdx + "-" + tgtIdx, source: ""+srcIdx, target: ""+tgtIdx }) } } } }
  19. Network Graph Automate the layout s.startForceAtlas2({ gravity: 100, scalingRatio: 70,

    slowDown: 100 }); setTimeout(function() { s.stopForceAtlas2(); }, 10000);
  20. 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 = ""; } }); });
  21. 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