This document provides an overview of D3.js, a JavaScript library for visualizing data using HTML, SVG, and CSS. It discusses how D3 allows binding arbitrary data to documents, uses common jQuery patterns for selections and properties. It also covers D3 features like transitions, scales and projections, SVG shapes, DOM manipulation, and APIs for loading external data. Examples of basic and advanced charts, maps, and interactive visualizations created with D3 are also referenced.

1. Data VisualizationsData Visualizations
with D3.jswith D3.js
Doug DomenyDoug Domeny
June 2014June 2014

2. Data-Driven DocumentsData-Driven Documents
 JavaScript + HTML + SVG + CSSJavaScript + HTML + SVG + CSS
 Bind arbitrary data to a Document ObjectBind arbitrary data to a Document Object
Model (DOM)Model (DOM)
 Similar to jQuery & PrototypeSimilar to jQuery & Prototype
• SelectionsSelections
• Dynamic PropertiesDynamic Properties
• Function ChainingFunction Chaining
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d)
{ return d + "px"; });

3. D3D3
 TransitionsTransitions
d3.selectAll("circle")
.transition()
.duration(750)
.delay(function(d, i)
{ return i * 10; })
.attr("r", function(d)
{ return Math.sqrt(d * scale); });
 Transformation, not RepresentationTransformation, not Representation
• Scaling and ProjectionsScaling and Projections
• Web standards: HTML, SVG and CSSWeb standards: HTML, SVG and CSS

4. SVGSVG
 Circle, Line, Ellipse, Path, Polygon,Circle, Line, Ellipse, Path, Polygon,
Text, Polyline, RectangleText, Polyline, Rectangle
 Clipping, Patterns, GradientsClipping, Patterns, Gradients

5. DOM ManipulationDOM Manipulation
 enterenter: create new nodes for incoming data: create new nodes for incoming data
 exit:exit: remove outgoing nodes that are no longerremove outgoing nodes that are no longer
needed.needed.
 Common PatternCommon Pattern
// Update…
var p = d3.select("body").selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(String);
// Enter…
p.enter().append("p").text(String);
// Exit…
p.exit().remove();

6. API ReferenceAPI Reference
 CoreCore - selections, transitions, data, localization,- selections, transitions, data, localization,
colors, etc.colors, etc.
 ScalesScales - convert between data and visual- convert between data and visual
encodingsencodings
 SVGSVG - utilities for Scalable Vector Graphics- utilities for Scalable Vector Graphics
 TimeTime - parse or format times, compute calendar- parse or format times, compute calendar
intervals, etc.intervals, etc.
 LayoutsLayouts - derive secondary data for positioning- derive secondary data for positioning
elementselements
 GeographyGeography - project spherical coordinates,- project spherical coordinates,
latitude & longitude mathlatitude & longitude math
 GeometryGeometry - utilities for 2D geometry, such as- utilities for 2D geometry, such as
Voronoi diagrams and quadtreesVoronoi diagrams and quadtrees
 BehaviorsBehaviors - reusable interaction behaviors- reusable interaction behaviors

7. Loading External ResourcesLoading External Resources
 d3.xhrd3.xhr - request using XMLHttpRequest (AJAX)- request using XMLHttpRequest (AJAX)
 d3.textd3.text - request a text file- request a text file
 d3.jsond3.json - request a JSON blob- request a JSON blob
 d3.htmld3.html - request an HTML document fragment- request an HTML document fragment
 d3.xmld3.xml - request an XML document fragment- request an XML document fragment
 d3.csvd3.csv - request a comma-separated values file- request a comma-separated values file
 d3.tsvd3.tsv - request a tab-separated values file- request a tab-separated values file

8. Browser SupportBrowser Support
 FirefoxFirefox
 Chrome (Google)Chrome (Google)
 Safari (WebKit)Safari (WebKit)
 OperaOpera
 IE9 and laterIE9 and later

9. Include D3 JSInclude D3 JS
 IncludeInclude
<script
src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>
 Self-HostSelf-Host
 CDNs AvailableCDNs Available

10. D3 GalleryD3 Gallery

11. Basic ChartsBasic Charts

12. Advanced Charts & MapsAdvanced Charts & Maps

13. Interactive & AnimatedInteractive & Animated

14. Visualizing Web Site UsageVisualizing Web Site Usage
WebActivity.swf

15. d3.geod3.geo
var projection = d3.geo.robinson()
.scale(200) // 150 = normal, 200 = zoom
.translate([1256/2, 480/2 + 40]) // +40=bias north
.rotate([71.4553, 0])
.precision(0.5);
var path = d3.geo.path().projection(projection);
var arc = d3.geo.greatArc()
.source(function (d) { return d.client_loc; })
.target(function (d) { return d.server_loc; });
var svg = d3.select("#main").append("svg")
.attr("width", 1256)
.attr("height", 480);
var container = svg.append("g").attr("id", "container");
var arcs = container.append("g").attr("id", "arcs");
arcs.selectAll("path.arc")
.data(conns).enter()
.append("path")
.attr("class", "arc")
.attr("d", function (d) { return path(arc(d)); });

16. Voronoi-based point pickerVoronoi-based point picker
http://bl.ocks.org/njvack/1405439

17. Voronoi DiagramVoronoi Diagram
http://mbostock.github.io/d3/talk/20111116/airports-all.html

18. Force Directed NodesForce Directed Nodes
Voronoi Diagram with Force Directed Nodes
and Delaunay Links
http://christophermanning.org/projects/voronoi-diagram-with-force-directed-nodes-and-delaunay-links/
VoronoiForceDirected.swf

19. Parallel SetsParallel Sets
Multidimensional categorical data
http://www.jasondavies.com/parallel-sets/
TitanicSurvivors.swf

20. Motion ChartMotion Chart
The Wealth & Health of NationsThe Wealth & Health of Nations
http://bost.ocks.org/mike/nations/
WealthOfNations.swf

21. ResourcesResources
 d3js.orgd3js.org d3js.org
 D3 Cheat SheetD3 Cheat Sheet
www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf
chimera.labs.oreilly.com/books/1230000000345/
Free OnlineEdition