Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Visualizations with JavaScript

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

Using a Library (flotr2) HTML5 skeleton

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Using a Library View the chart

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Maps via Symbol Fonts

Slide 15

Slide 15 text

Using a Symbol Font HTML skeleton

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Using a Symbol Font View the map

Slide 21

Slide 21 text

Tree Map (Treemap-Squared)

Slide 22

Slide 22 text

Heat Map (heat map.js)

Slide 23

Slide 23 text

Word Cloud (wordcloud2)

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Network Graph Draw the nodes var s = new sigma("graph"); for (var idx=0; idx

Slide 26

Slide 26 text

Network Graph View the nodes

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Network Graph View the nodes and edges

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Network Graph

Slide 32

Slide 32 text

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