Hadoop meetup 2014

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

Data Visualization (Meetup)
Art

UI/UX

Data

Coding

Github: https://github.com/dudaspm/Pittsburgh-Data-Visualization

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

Infographic, Model, or
Visualization

Visualization

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

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

Normalize

Data
0.06383
0.180851
0.228723
0.053191
0.18617
0.12234
0.117021
0.047872

Visualization
?

Steamgraph, Sparklines, and
Treemaps

Hive Plots, Star Plots, and Parallel
Coordinates

Back to the #1 Asked Question


I have “this data.”
 What
 Ask

visualization should I use?
your users or experts

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





mouse events (example8)
transitions (example9)




remove svg using that data (example7)

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
Things
32




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
34

http://www.baddesigns.com

Trapped between the doors!
35




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("strokewidth", 2)})
// on mouse-out, change the border back to the original (0)
.on("mouseout", function() {d3.select(this).style("strokewidth", 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('quadin').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/

Dynamic Twitter Network
Analysis

43

Ubiquitous Platform
45






Built upon HTML5 standards
Does not require any additional software to be
downloaded
All major browsers:
 IE,



Firefox, Chrome, Safari, Opera, etc.

Supports all UTF-8 and Unicode character
types

Networks
46



James tweets: “Just saw @Dannie at the
#Pittsburgh #Library. Checked out this book:
http://bit.ly/U8AGsc”


Username -> Username:




Username -> Hashtag:




James -> Pittsburgh and James -> Library

Hashtag -> Hashtag:




James -> Dannie

Pittsburgh -> Library

Username -> URL:


James -> http://bit.ly/U8AGsc

Saliency and Network
48




limited to 100 nodes
clustering algorithm






differentiated by color
coding

bias to inner-cluster
strength to inter-cluster
strength
edge directionality
bias inner-cluster vs.
inter-cluster


log-based degree centrality
st
 highlight 1 degree
Blondel, V. D.,connections
Guillaume, J. L., Lambiotte, R., & Lefebvre, E. (2008). Fast unfolding of communities in large networks. Journal of


Statistical Mechanics: Theory and Experiment, 2008(10), P10008.

Export Network
51



Export:
 UCINET
 Gephi
 Palantir
 Pajek

Sentiment Analysis
54

F. Å. Nielsen, "A new ANEW: Evaluation of a word list for sentiment analysis in microblogs," Arxiv preprint arXiv:1103.2903, 2011.

Sentiment Analysis
55

Negative
Words:
• Sad
• Murder
• Disgust
• WTF
• Kill
• 

http://www.youtube.com/watch?v=ao6V_5sK3-A

Positive
Words:
• Praise
• Love
• Dear
• kind
• Hope
• 

Thank you!


Contact:
 dudaspm@gmail.com
 Github:
 https://github.com/dudaspm/Pittsburgh-Data-

Visualization

Hadoop meetup 2014

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (12)

Semelhante a Hadoop meetup 2014

Semelhante a Hadoop meetup 2014 (20)

Último

Último (20)

Hadoop meetup 2014