Pittsburgh code and supply

D3, VISUALIZATIONS,
N’AT
Patrick M. Dudas
@pdudders

Data Visualization (Meetup)
Art
Data
Coding
UI/UX
Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization

(And in this corner..) AI vs. IA
 Artificial
Intelligence
John
McCarthy
 Intelligence Amplification
Man-Computer Symbiosis
William Ross Ashby
J.C.R. Licklider

Infographic
Infographic, Model, or
Visualization
Model
http://fold.it/portal/info/about - University of Washington
Visualization

When Graphics Go Bad
7
 Challenger
January 28, 1986

Can Anyone Spot the Problem?
8

#1 Asked Question
 I have “this data.”
What visualization should I use?
 http://www.datavis.ca/gallery/evil-pies.php
Data
12
34
43
10
35
23
22
9
Data
0.06383
0.180851
0.228723
0.053191
0.18617
0.12234
0.117021
0.047872
Normalize
Visualization
?

Steamgraph, Sparklines, and
Treemaps

Hive Plots, Star Plots, and Parallel
Coordinates

Back to the #1 Asked Question
 I have “this data.”
What visualization should I use?
 Ask your users or experts

Edward Tufte
“With most visualizations and graphics, the main
focus is to take multiple dimensions of
information and project it on to a two-
dimension plot”

How to Get to D3
HTML
Javascript/JQuery
XML SVG D3

HTML
<html>
<head>
<title>I am metadata</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
the body of HTML
</body>
</html>
http://boxnumbertwo.com/D3Simple/1.0/example1.html

DIV
<html>
<head>
<title>I am metadata</title>
<script src="../d3/d3.min.js"></script>
</head>
<body>
<div id="visualization_here"></div>
</body>
</html>

Not Well Formatted HTML
<html>
<head>
<title>I am a webpage</title>
<script src="../d3/d3.min.js"></script>
</header>
<ody>
<div id="visualization_here"></div>
</body
</html>

XML (Must Be Well Formatted)
<?xml version="1.0"?>
<note>
<to>Dave</to>
<from>Jamie</from>
<heading>Reminder</heading>
<message>Don't forget me this
weekend!</message>
</note>

SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px"
height="400px">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke-width:1"/>
</svg>

SVG vs. Canvas or Vector vs. Raster
 Canvas = Pixels
 Raster
 SVG
Points
Lines
Polygons
 Vector

D3 - http://d3js.org/
 Data Driven Documents
Enter, Update, Exit
Interactions
Transitions
 Big List of Examples (1900)
http://christopheviau.com/d3list/index.html

D3.js
 SVG, CSS, and HTML
 update
update your data
 enter
enter svg objects using that data (example6)
OR
 exit
remove svg using that data (example7)
 mouse events (example8)
 transitions (example9)
smoothly change data
 example10 – adding affordances and a little fun

Simple Exam of D3
 var circleData = [4, 8, 15, 16, 23, 42];

Bertin’s Retinal/Visual Variable

Adding Some Aesthetics
var color = d3.scale.category10();
newCircles.enter().append("circle")
.attr("cx", function(d) { return d*10; })
.attr("cy", function(d) { return d*10; })
.attr("r", function(d) { return d; })
.style("fill", function(d) { return color(d); });
https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-category10
http://boxnumbertwo.com/D3Simple/NetworkX/1.6/index.php?sizeOfGraph=60&Pro
babilityOfEdge=.03

Enter, Update, Exit

Change Blindness
 Minimizing changes in a scene to make visual changes more
noticeable.

Sometimes We Miss the
Change
 Change Blindness - phenomenon that occurs
when a person viewing a visual scene
apparently fails to detect large changes in the
scene (Wikipedia)
 http://www.csc.ncsu.edu/faculty/healey/PP/mo
vies/Dinner.gif
vies/Airplane.gif
vies/Chopper_Truck.gif

Smooooooth Transitions
newerCircles.exit()
.transition()
.duration(3000)
.attr("r", 0)
.remove();
http://boxnumbertwo.com/D3Simple/1.0/example9.ht
http://www.boxnumbertwo.com/PitterPatter/1.2/ml

Don Norman’s Design of Everyday
Things34
 Builds on the notion of affordances
 Affordance – "refers to the perceived and actual
properties of the thing, primarily those
fundamental properties that determine just how
the thing could possibly be used … Affordances
provide strong clues to the operations of things"
(Norman, 1988)
This can include objects or words/numbers!
Norman, D. A. (1988). The design of everyday things. New York, Doubleday

Affordance Scenario 1
36
http://www.baddesigns.com

Trapped between the doors!
37
 She was walking from one building to the other
with a co-worker. They pulled the handles that
opened the doors and went down the walkway.
Upon reaching the other end they again pulled
the handles, but the doors wouldn't budge.
Assuming the doors were locked, they returned
to the doors they originally opened to enter the
walkway. But when they tried to pull open these
doors, they wouldn't open either. They were
trapped in the walkway between the two
buildings!
 My friend and her co-worker spent the next few
minutes trying to signal to people though the
windows in the buildings, but the people they
signaled seemed strangely reluctant to come to
the rescue. Finally, after trying the doors again,
they discovered they needed to push the doors
rather than pull them.

Let’s Add Some Affordances
newCircles.enter().append("circle")
.attr("cx", function(d) { return d*10; })
.attr("cy", function(d) { return d*10; })
.attr("r", function(d) { return d; })
.style("fill", function(d) { return color(d); })
.style("stroke-width", 0)
.style("stroke", "black")
.style("cursor", "pointer")
// on mouse-over, change the border of the given circle to 2
.on("mouseover", function() {d3.select(this).style("stroke-
width", 2)})
// on mouse-out, change the border back to the original (0)
.on("mouseout", function() {d3.select(this).style("stroke-
width", 0)})

Matrix + Layers + Color = Heatmap
redM.push(0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0)
redM.push(0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0)
redM.push(0,0,0,0,0,1,0,1,1,0,1,0,0,0,0,0)
redM.push(0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0)
redM.push(0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0)
redM.push(0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
redM.push(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
http://boxnumbertwo.com/D3Simple/mario/standing.html

Chaining Transitions
var t0 = vis.transition().ease('quad-
in').selectAll("rect");
t0.style("fill", function(d,i) { return
marioColors[d[1][1]]; });
var t1 = t0.transition();
t1.style("fill", function(d,i) { return
marioColors[d[2][1]]; });
http://boxnumbertwo.com/D3Simple/mario/marioMoving.html

Javascript Timers + D3 =
Animation
var cloud_scale_1 = .8, cloud_translate_1 = [700,100];
setInterval(function(){moveCloud_1();},25);
var boo_2 = 0;
var boo_3 = 0;
var boo_4 = 0;
http://boxnumbertwo.com/D3Simple/6.1/

Thank you!
 Contact:
dudaspm@gmail.com
Github:
 https://github.com/dudaspm/Pittsburgh-Data-
Visualization

Pittsburgh code and supply

Recommended

Recommended

More Related Content

Similar to Pittsburgh code and supply

Similar to Pittsburgh code and supply (20)

Recently uploaded

Recently uploaded (20)

Pittsburgh code and supply