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.

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

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

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

Maps via Symbol Fonts

Using a Symbol Font HTML skeleton

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

Network Graph View the nodes

Network Graphs Draw the edges for (var srcIdx=0; srcIdx

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