5. 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”
17. 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>
18. 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>
20. SVG vs. Canvas or Vector vs. Raster
Canvas = Pixels
Raster
SVG
Points
Lines
Polygons
Vector
21. D3 - http://d3js.org/
Data Driven Documents
Enter,
Update, Exit
Interactions
Transitions
Big List of Examples (1900)
http://christopheviau.com/d3list/index.html
22. 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
23. Simple Exam of D3
var circleData = [4, 8, 15, 16, 23, 42];
http://boxnumbertwo.com/D3Simple/1.0/example6.html
28. 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
http://www.csc.ncsu.edu/faculty/healey/PP/mo
vies/Airplane.gif
http://www.csc.ncsu.edu/faculty/healey/PP/mo
vies/Chopper_Truck.gif
32. 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
35. 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.
36. 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)})
http://boxnumbertwo.com/D3Simple/1.0/example10.html
45. 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
46. 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
48. 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.
54. Sentiment Analysis
54
F. Å. Nielsen, "A new ANEW: Evaluation of a word list for sentiment analysis in microblogs," Arxiv preprint arXiv:1103.2903, 2011.