Building JavaScript Visualizations Part 1

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

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

Visualizations with JavaScript

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)

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>  <script src="js/flotr2.min.js"></script> </body> </html>

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 } ];

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...

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"} } );

Using a Library View the chart

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)

Time Lines (Timeline JS) • Data from public Google Docs
spreadsheet • Visualization in embedded <iframe>

Maps via Symbol Fonts

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>

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

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...

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); });

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%); }

Using a Symbol Font View the map

Tree Map (Treemap-Squared)

Heat Map (heat map.js)

Word Cloud (wordcloud2)

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...

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();

Network Graph View the nodes

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 }) } } } }

Network Graph View the nodes and edges

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

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 = ""; } }); });

Network Graph

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

Building JavaScript Visualizations Part 1

Building JavaScript Visualizations Part 1

Stephen Thomas

More Decks by Stephen Thomas

Other Decks in Technology

Featured

Transcript