Data Visualization on the Web - Intro to D3

Data Visualization on the Web
(Advanced)
February 3, 2014
Angela Zoss
Data Visualization Coordinator
Data & GIS Services, Perkins 226

Workshop Feedback Form
To give feedback on this workshop:
http://library.duke.edu/data/feedback.html

D3 Resources
• Interactive DataVisualization for theWeb
http://chimera.labs.oreilly.com/books/123000000
0345
• Tutorial and Cheat Sheet, c. 2012
www.jeromecukier.net/blog/2012/10/15/d3-
tutorial-at-visweek-2012/
• D3Tips andTricks
https://leanpub.com/D3-Tips-and-Tricks/read

When to use D3
• Need for unusual, highly customized chart types
(http://bl.ocks.org/mbostock)
• Relatively low number of data points or visible
elements (SVG vs. HTML5 Canvas)
• Impress your friends

About D3
• JavaScript library
• Fairly low level; building with rectangles and circles
and lines, instead of pre-made chart structures*
• Basic functioning makes it easy to join HTML
elements with data points

*D3 Middleware
Basic line/area chart:
• xCharts ~10 lines?
http://tenxer.github.io/xcharts/
• Rickshaw (specifically for time series) ~16 lines
http://code.shutterstock.com/rickshaw/
• NVD3 ~31 lines
http://nvd3.org/
• Vega ~57 lines
http://trifacta.github.io/vega/
http://chimera.labs.oreilly.com/books/12300000003
45/ch02.html#_tools_built_with_d3

Developing with D3
• Text editors (Sublime,TextWrangler, etc.) and
browsers with developer tools (esp. Chrome)
• In-browser JavaScript prototyping
– Tributary (http://tributary.io/)
– Livecoding (http://livecoding.io/)
– JSFiddle (http://jsfiddle.net/)
– Plunker (http://plnkr.co/)
• GitHub Gist/bl.ocks.org
http://bl.ocks.org/

Basic Structure
• HTML
– Empty element to insert chart into
• JavaScript
– Load data, build chart
• CSS
– Add style based on tags, classes, IDs

Example: Gapminder Subset
http://bl.ocks.org/dukevis/8782982

To grab your own copy
Running a local web server
(optional for today)
http://chimera.labs.oreilly.com/books/1230000000345/ch04.html#_
setting_up_a_web_server
• Install git and run:
git clone https://gist.github.com/8782982.git
• Download zip archive of files, edit in text editor,
view in browser
https://gist.github.com/dukevis/8782982/download

Code Structure
<html>
<head>…</head>
<body>…</body>
</html>

Code Structure
<html>
<head>
<style>…</style>
</head>
<body>…</body>
</html>

Code Structure
<html>
<head>
<style>…</style>
</head>
<body>
<div id=“chart”></div>
<script>…</script>
</body>
</html>

Code Structure (often)
<script>
//Set up static and global elements
//Load data
//Draw the chart
</script>

JavaScript Syntax
• Declaring variables
var number1 = 1;
var number2 = 2;
• Defining functions
function sum(a, b) {return a+b;}
• Operations
sum(number1, number2);
• Method chaining
sum(number1, number2).toFixed(2);

D3 selections
In a nutshell, you use JavaScript selections (“selectAll”) to
create a holding pen to store data and/or visual elements,
which may or may not have been connected to each other yet.
http://bost.ocks.org/mike/selection/

Additional Example: Coordinated
Views
http://bl.ocks.org/dukevis/6768900

Handy D3 Techniques
• Transitions, to animate changes in state
http://bost.ocks.org/mike/transition/
• Dispatch, to coordinate multiple charts
http://bl.ocks.org/mbostock/5872848
• Crossfilter, for larger datasets
http://square.github.io/crossfilter/
• Using make files to simplify chart regeneration
http://bost.ocks.org/mike/make/

Data & GIS Services
• Data collections, LibGuides, etc.
http://library.duke.edu/data/
• Blog (tutorials, announcements, etc.)
http://blogs.library.duke.edu/data/
• Walk-in consultations
http://library.duke.edu/data/about/schedule.html
(or by appointment – askdata@duke.edu)
• Perkins 226 computing cluster
http://library.duke.edu/data/about/lab.html
(fast hardware, diverse software)
• Additional workshops
http://library.duke.edu/data/news/
(listserv – dgs-announce@duke.edu)

More on Data Visualization
What kinds of visualizations are out there?
How hard are they to reproduce?
See the Intro to DataVisualization LibGuide for general
examples and tools/tutorials.
http://guides.library.duke.edu/datavis/
AdditionalVisualization LibGuides:
http://guides.library.duke.edu/vis_types
http://guides.library.duke.edu/topten
http://guides.library.duke.edu/visualcomm

Reminder: to give feedback on this workshop:
http://library.duke.edu/data/feedback.html
Thank you!

QUESTIONS? SUGGESTIONS?
angela.zoss@duke.edu
http://twitter.com/duke_vis

Data Visualization on the Web - Intro to D3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Data Visualization on the Web - Intro to D3

Similar to Data Visualization on the Web - Intro to D3 (20)

More from Angela Zoss

More from Angela Zoss (7)

Recently uploaded

Recently uploaded (20)

Data Visualization on the Web - Intro to D3