Building JavaScript Visualizations Part 1

Building JavaScript Visualizations Part 1

A5b424d4146905962a24acd6815aeb84?s=128

Stephen Thomas

October 18, 2014
Tweet

Transcript

  1. Building JavaScript Visualizations Part 1: You Might Not Need D3.js

    Stephen Thomas (stephen@sathomas.me)
  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. Why Visualize Data? The US health care system is not

    as cost-effective as the systems of other developed countries.
  5. Visualizations with JavaScript

  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)
  7. 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>
  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 } ];
  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...
  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"} } );
  11. Using a Library View the chart

  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)
  13. Time Lines (Timeline JS) • Data from public Google Docs

    spreadsheet • Visualization in embedded <iframe>
  14. Maps via Symbol Fonts

  15. 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>
  16. Using a Symbol Font Stack the symbols with CSS #map

    { position: relative; } #map > [class*="map-"] { position: absolute; top: 0; left: 0; }
  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...
  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); });
  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%); }
  20. Using a Symbol Font View the map

  21. Tree Map (Treemap-Squared)

  22. Heat Map (heat map.js)

  23. Word Cloud (wordcloud2)

  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...
  25. 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();
  26. Network Graph View the nodes

  27. 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 }) } } } }
  28. Network Graph View the nodes and edges

  29. Network Graph Automate the layout s.startForceAtlas2({ gravity: 100, scalingRatio: 70,

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

  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