visualizing data on the web/** this code runs when everything has been loaded on the page / /...

VISUALIZING DATA ON THE WEB

Brian Sletten

Bosatsu Consulting, Inc.

@bsletten

1

Tuesday, August 7, 12

SPEAKER QUALIFICATIONS

‣ 19 Years Experience

‣ First 7 in UI/Visualization/Simulation

‣ Specialize in benefits and applicability of next-generation technologies

‣ Author “Resource-Oriented Architectures : Building Webs of Data” Addison-Wesley 2011

‣ Contributor to “Beautiful Architecture”

2


AGENDA‣ Introduction

‣ JavaScript Libraries

‣ Exhibit

‣ Examples

‣ Resources

3


INTRODUCTION

4


5

JOSEPH PRIESTLEY


6


7

WILLIAM PLAYFAIR


8


9

JOHN SNOW


10

FLORENCE NIGHTINGALE


11

C.J. MINARD


12

EDWARD TUFTE


13


14


INFORMATION VISUALIZATION

15

Information visualization focuses on the development and empirical analysis of methods for presenting abstract information in visual form. The visual display of information allows people to become more easily aware of essential facts, to quickly see regularities and outliers in data, and therefore to develop a deeper understanding of data.

http://www.isr.uci.edu/research-visualization.html




INFORMATION VISUALIZATION

16

[V]isualisation is a cognitive activity, facilitated by graphical external representations from which people construct internal mental representation of the world





PRE-ATTENTIVE

17

‣ Elements that “pop out”

‣ Usually processed in 200ms or so

‣ No extra cognitive load


18http://www.csc.ncsu.edu/faculty/healey/PP/index.html


http://www.csc.ncsu.edu/faculty/healey/PP/index.html


22

STEVENS’ POWER LAW


KNOWLEDGE VISUALIZATION

‣ Visual metaphors help people share what they know

‣ Better able to integrate their experiences

‣ Improves Memorability of shared knowledge

23


24http://www.visual-literacy.org/periodic_table/periodic_table.html


http://www.visual-literacy.org/periodic_table/periodic_table.html

http://www.visual-literacy.org/periodic_table/periodic_table.html

25

GRAPHICAL EXCELLENCE

‣ Show the data

‣ Induce contemplation of substance, not

‣ methodology

‣ design

‣ graphic production technology

‣ Don’t lie


26


27


28


29


30


31


32


JAVASCRIPTLIBRARIES

33


JQUERY SPARKLINES

34http://omnipotent.net/jquery.sparkline


http://worrydream.com/Tangle/


35


36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><head>

<script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="jquery.sparkline.js"></script>

<script type="text/javascript"> $(function() { /** This code runs when everything has been loaded on the page */ /* Inline sparklines take their values from the contents of the tag */ $('.inlinesparkline').sparkline();

/* Sparklines can also take their values from the first argument passed to the sparkline() function */ var myvalues = [10,8,5,7,4,4,1]; $('.dynamicsparkline').sparkline(myvalues);

/* The second argument gives options such as chart type */ $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

/* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */ $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} ); }); </script></head>


http://www.w3.org/TR/html4/strict.dtd


37

<p>Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.</p><p>Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span></p><p>Bar chart with dynamic data: <span class="dynamicbar">Loading..</span></p><p>Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span></p>

</body></html>


RGRAPH‣ JavaScript library based upon HTML5 canvas element

‣ Dual-licensed

‣ Wide support for various charts and graphs

‣ http://www.rgraph.net/

38


http://www.rgraph.net

http://www.rgraph.net

39

<html> <head> ! <script src="../scripts/RGraph.common.core.js" ></script> <script src="../scripts/RGraph.common.annotate.js" ></script>! <script src="../scripts/RGraph.common.context.js" ></script>

! <script src="../scripts/RGraph.common.tooltips.js" ></script>! <script src="../scripts/RGraph.common.resizing.js" ></script>! <script src="../scripts/RGraph.bar.js" ></script>

! <script>! ! function buildCharts() {! ! ! var speakers=['Venkat', 'Tim', 'Ken','Nate','Mark', 'Matthew', 'Pratik', 'Peter', 'Craig', 'Neal'];! ! ! var attendance=[];! ! ! for(var i=0; i < speakers.length; i++) {! ! ! ! attendance[i] = Math.floor(Math.random() * 200);! ! ! }! ! !! ! var bar = new RGraph.Bar('bar1', attendance);! ! bar.Set('chart.background.barcolor1', 'white');! ! bar.Set('chart.background.barcolor2', 'white');! ! bar.Set('chart.title', 'Top Attended Speaker Sessions at Uberconf 2012');! ! bar.Set('chart.title.vpos', 0.6);! ! bar.Set('chart.labels', speakers);! ! bar.Set('chart.text.angle', 45);! ! bar.Set('chart.gutter.right', 5);! ! bar.Set('chart.gutter.left', 35);! ! bar.Set('chart.gutter.bottom', 50);! ! bar.Set('chart.shadow', true);! ! bar.Set('chart.shadow.blur', 15);! ! bar.Set('chart.shadow.color', '#ffa0a0');! !


40

bar.Set('chart.shadow.offsetx', 0);! ! bar.Set('chart.shadow.offsety', 0);! ! bar.Set('chart.colors', ['#FF6060']);! ! bar.Set('chart.key.position', 'gutter');! ! bar.Set('chart.text.size', 10); bar.Set('chart.text.angle', 45); bar.Set('chart.grouping', 'stacked'); bar.Set('chart.highlight.stroke', 'gray'); bar.Set('chart.highlight.fill', 'rgba(255,255,255,0.2)');

if (!RGraph.isIE8()) { bar.Set('chart.tooltips', speakers); }

bar.Draw();! ! }! </script> </head> <body onload="buildCharts()">! <div>! ! <canvas id="bar1" width="500" height="300"/>! </div> </body></html>


41


42

! <script>! ! function buildCharts() {! ! ! var speakers=['Venkat', 'Tim', 'Pratik','Neal'];! ! !! ! ! var days = [];! ! !! ! ! for(var i = 0; i < 5; i++) {! ! ! ! days[i] = [];! ! ! ! for(var j = 0; j < 4; j++) {! ! ! ! ! days[i][j] = Math.floor(Math.random() * 30);! ! ! ! }! ! ! }! ! !! ! ! var tooltips = [];! ! ! var idx = 0;! ! !! ! ! for(var i = 0; i < 5; i++) {! ! ! ! for(var j = 0; j < speakers.length; j++) {! ! ! ! ! tooltips[idx++] = speakers[j];! ! ! ! }! ! ! }


43

var bar = new RGraph.Bar('bar1', days);

bar.Set('chart.title', 'Attendees per speaker per day'); bar.Set('chart.title.vpos', 0.5); bar.Set('chart.colors', ['red', 'yellow', 'green', 'orange']);

bar.Set('chart.labels', ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']); bar.Set('chart.labels.above', true); bar.Set('chart.key', speakers); bar.Set('chart.key.background', 'rgba(255,255,255,0.7)'); bar.Set('chart.key.position', 'gutter'); bar.Set('chart.key.position.gutter.boxed', false); bar.Set('chart.key.position.y', bar.Get('chart.gutter.top') - 15); bar.Set('chart.key.border', false); bar.Set('chart.text.angle', 90); bar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); bar.Set('chart.tooltips.event', 'onmousemove'); if (!RGraph.isIE8()) { bar.Set('chart.tooltips', tooltips); }

bar.Draw();


44


45

bar.Set('chart.variant', 'sketch'); // A fun visual style

if (!RGraph.isIE8()) { bar.Set('chart.resizable', true);}


46


47


48


HIGHCHARTS

49

‣ Dual licensed JavaScript graphing and charting library

‣ Special attention to interactivity

‣ Support for printing and downloading fixed images of the graphs

‣ http://www.highcharts.com


http://www.highcharts.com

http://www.highcharts.com

50


51


52


RAPHAËL

53

‣ JavaScript library for building visualizations using SVG (or VML on IE)

‣ http://raphaeljs.com


http://raphaeljs.com

http://raphaeljs.com

54

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Raphael Playground</title> <script src="../scripts/raphael.js" type="text/javascript" charset="utf-8"></script> <script src="raphael1.js" type="text/javascript" charset="utf-8"></script> </head> <body style="background : #000"> </body></html>

window.onload = function() {! var paper = Raphael(10, 50, 320, 200);!! var circle = paper.circle(50, 40, 30);! circle.attr("fill", "#f00");! circle.attr("stroke", "#fff");}




55


56

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Raphael Playground</title> <script src="../scripts/raphael.js" type="text/javascript" charset="utf-8"></script> <script src="raphael1.js" type="text/javascript" charset="utf-8"></script> </head> <body style="background : #000"> <div id="holder"></div> </body></html>

window.onload = function() {! var paper = Raphael(document.getElementById("holder"), 320, 200);!! var circle = paper.circle(50, 40, 30);! circle.attr("fill", "#f00");! circle.attr("stroke", "#fff");}




57


58

window.onload = function() {! var paper = Raphael(document.getElementById("holder"), 320, 200);! paper.image("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg", 10, 10, 200, 286);}


http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg




59

window.onload = function() {! var paper = Raphael(document.getElementById("holder"), 320, 300);! paper.image("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg", 10, 10, 200, 286);}






60http://www.w3.org/TR/SVG/paths.html#PathData

COMMAND MEANING

M/m Absolute/Relative move to

Z/z Closepath

L/l Absolute/Relative lineto

H/h Absolute/Relative horizontal lineto

V/v Absolute/Relative vertical lineto

C/c Absolute/Relative Cubic Bézier curveto

S/s Absolute/Relative Smooth curveto


http://www.w3.org/TR/SVG/paths.html#PathData

http://www.w3.org/TR/SVG/paths.html#PathData

61

window.onload = function() {! var paper = Raphael(document.getElementById("holder"), 320, 200);! var c = paper.path("M10 10L90 90");! c.attr("stroke", "#fff");}


62

window.onload = function() {! var paper = Raphael(document.getElementById("holder"), 320, 200);! var p = paper.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z") .attr({stroke: "#ddd"}),! e = paper.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}),! b = paper.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {! e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {! e.attr({rx: 4, ry: 4});! });! });}


63http://raphaeljs.com/github/dots.html


http://raphaeljs.com/github/dots.html

http://raphaeljs.com/github/dots.html

64http://raphaeljs.com/polar-clock.html


http://raphaeljs.com/polar-clock.html

http://raphaeljs.com/polar-clock.html

D3.JS

65

‣ Builds on the successes of ProtoViz

‣ Primarily about data-driven document manipulation

‣ Doesn’t seek to produce new intermediate or proprietary forms (CSS3, HTML5, SVG)

‣ Declarative approach, dynamic properties

‣ http://mbostock.github.com/d3/


http://mbostock.github.com/d3/

http://mbostock.github.com/d3/

66http://mbostock.github.com/d3/ex/calendar.html


http://mbostock.github.com/d3/ex/calendar.html

http://mbostock.github.com/d3/ex/calendar.html

67http://mbostock.github.com/d3/ex/chord.html


http://mbostock.github.com/d3/ex/chord.html

http://mbostock.github.com/d3/ex/chord.html

68http://mbostock.github.com/d3/ex/choropleth.html


http://mbostock.github.com/d3/ex/choropleth.html

http://mbostock.github.com/d3/ex/choropleth.html

69http://worrydream.com/Tangle/




EXHIBIT

70


EXHIBIT

71

‣ JavaScript-based “Publishing Framework for Data-Rich Interactive Web Pages”

‣ Joint effort between MIT CSAIL and W3C

‣ http://www.simile-widgets.org/exhibit/


http://www.simile-widgets.org/exhibit/

http://www.simile-widgets.org/exhibit/

72

EXHIBIT DEMOS


73

<html> <head> <title>MIT Nobel Prize Winners</title> <link href="nobelists.js" type="application/json" rel="exhibit/data" /> <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js" type="text/javascript"></script>

<style> </style> </head> <body> <h1>MIT Nobel Prize Winners</h1> <table width="100%"> <tr valign="top"> <td ex:role="viewPanel"> <div ex:role="view"></div> </td> <td width="25%"> browsing controls here... </td> </tr> </table> </body> </html>


http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js


74






75

{ "items" : [ { type : "Nobelist", label : "Burton Richter", discipline : "Physics", shared : "yes", "last-name" : "Richter", "nobel-year" : "1976", relationship : "alumni", "co-winner" : "Samuel C.C. Ting", "relationship-detail" : "MIT S.B. 1952, Ph.D. 1956", imageURL : "http://nobelprize.org/nobel_prizes/physics/laureates/1976/richter_thumb.jpg" }, { type : "Nobelist", label : "George A. Akerlof", discipline : "Economics", shared : "yes", "last-name" : "Akerlof", "nobel-year" : "2001", relationship : "alumni", "relationship-detail" : "MIT Ph.D. 1966", imageURL : "http://nobelprize.org/nobel_prizes/economics/laureates/2001/akerlof_thumb.jpg" },...


http://nobelprize.org/nobel_prizes/physics/laureates/1976/richter_thumb.jpg




http://nobelprize.org/nobel_prizes/economics/laureates/2001/akerlof_thumb.jpg




76






77






78


79


<style> </style> </head> <body> <h1>MIT Nobel Prize Winners</h1> <table width="100%"> <tr valign="top"> <td ex:role="viewPanel"> <div ex:role="view"></div> </td> <td width="25%"> <div ex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline"></div> <div ex:role="facet" ex:expression=".relationship" ex:facetLabel="Relationship"></div> <div ex:role="facet" ex:expression=".shared" ex:facetLabel="Shared?"></div> <div ex:role="facet" ex:expression=".deceased" ex:facetLabel="Deceased?"></div> </td> </tr> </table> </body> </html>




80


81

<body> <h1>MIT Nobel Prize Winners</h1> <table width="100%"> <tr valign="top"> <td ex:role="viewPanel"> <div ex:role="view" ex:orders=".discipline, .nobel-year" ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year"> </div> </td> <td width="25%">! <div ex:role="facet" ex:facetClass="TextSearch"></div> <div ex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline"></div> <div ex:role="facet" ex:expression=".relationship" ex:facetLabel="Relationship"></div> <div ex:role="facet" ex:expression=".shared" ex:facetLabel="Shared?"></div> <div ex:role="facet" ex:expression=".deceased" ex:facetLabel="Deceased?"></div> </td> </tr> </table> </body> </html>


82


83

<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js" type="text/javascript"></script>

.

.

.

<div ex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div>


http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js




84

<div ex:role="exhibit-view" ex:viewClass="Exhibit.TabularView" ex:columns=".label, .imageURL, .discipline, .nobel-year, .relationship-detail" ex:columnLabels="name, photo, discipline, year, relationship with MIT" ex:columnFormats="list, image, list, list, list" ex:sortColumn="3" ex:sortAscending="false"> </div>


85

OTHER TOOLS‣ Google Visualization API (https://developers.google.com/

chart/)

‣ IBM ManyEyes (http://www-958.ibm.com/software/data/cognos/manyeyes/)

‣ http://daytum.com/

‣ http://selection.datavisualization.ch/


https://developers.google.com/chart/




http://www-958.ibm.com/software/data/cognos/manyeyes/




http://daytum.com

http://daytum.com

http://selection.datavisualization.ch

http://selection.datavisualization.ch

EXAMPLES

86


87HTTP://TINYURL.COM/CU3B55CTuesday, August 7, 12

http://tinyurl.com/cu3b55c


http://tinyurl.com/cqvrxew


88HTTP://TINYURL.COM/CU3B55CTuesday, August 7, 12





89HTTP://TINYURL.COM/BTWHE7OTuesday, August 7, 12

http://tinyurl.com/btwhe7o




95

‣ For a given area on a page, circular layout can support a larger data domain (2πz vs z)

‣ Resolution varies linearly, increases radially

‣ Eye motion follows curved lines

BENEFITS OF A CIRCULAR LAYOUT

HTTP://CIRCOS.CA/INTRO/CIRCULAR_APPROACH/




96HTTP://TINYURL.COM/25EXTQ4Tuesday, August 7, 12

http://tinyurl.com/25extq4


97HTTP://TINYURL.COM/4DCJRU7Tuesday, August 7, 12

http://tinyurl.com/4dcjru7

http://tinyurl.com/4dcjru7

98HTTP://TINYURL.COM/5RQHMA7Tuesday, August 7, 12



99HTTP://TINYURL.COM/25AFL9ZTuesday, August 7, 12



100HTTP://VISUAL.LY/MARS-MISSIONSTuesday, August 7, 12

http://visual.ly/mars-missions

http://visual.ly/mars-missions

101HTTP://TINYURL.COM/6D7L5TOTuesday, August 7, 12

http://tinyurl.com/6d7l5to

http://tinyurl.com/6d7l5to

SITES‣ http://visual.ly

‣ http://infosthetics.com/

‣ http://flowingdata.com/

‣ http://www.visualcomplexity.com/vc/

102


http://visual.ly

http://visual.ly

http://infosthetics.com

http://infosthetics.com

http://flowingdata.com

http://flowingdata.com

http://www.visualcomplexity.com/vc/

http://www.visualcomplexity.com/vc/

103HTTP://TINYURL.COM/6AW9W6ATuesday, August 7, 12

http://tinyurl.com/6aw9w6a

http://tinyurl.com/6aw9w6a

RESOURCES

104


105

PICTURE URL

Day of Muni http://tinyurl.com/6bctm8q

The Afghan Conflict http://tinyurl.com/y2jzcpz

Sluggish Traffic in Lisbon

http://tinyurl.com/3mwktx8


http://tinyurl.com/6bctm8q


http://tinyurl.com/y2jzcpz

http://tinyurl.com/y2jzcpz



106

RESOURCE URL

Visual Literacy http://www.visual-literacy.org

Edward Tuftehttp://www.edwardtufte.com/

tufte/

WikiViz http://www.wikiviz.org

Visual.ly http://visual.ly




http://www.edwardtufte.com/tufte/






http://visual.ly

http://visual.ly

Questions?

107

[email protected]

@bsletten


mailto:[email protected]

mailto:[email protected]

visualizing data on the web/** this code runs when everything has been loaded on the page */ /*...

Documents

visualizing data on the web/** this code runs when everything has been loaded on the page / /...