The document discusses D3, a JavaScript library for visualizing data using web standards. It provides selections, joins, and data binding to connect data to DOM elements. D3 uses scales and layouts to map data to visual properties like position, color, and size. It supports a variety of visualizations including maps, sunbursts, streamgraphs, and more. The D3 philosophy emphasizes representational transparency and flexibility over fixed chart types.

1. The D3 Toolbox
Morphing and projecting visual data
Mark Rickerby

3. Data
Set of items from which
information and knowledge
are derived

4. Visualisation
Communicates the internal
structure and relationships
within data

5. Visualisation
Amplifies knowledge
and cognition

6. D3.js
d3js.org

7. Data-Driven Documents
Created by Mike Bostock
Stanford Vis Group, New York Times

8. Data-Driven Documents
Mapping data to elements in
a document

9. Data-Driven Documents
§ HTML
§ CSS
§ DOM
§ JavaScript
§ SVG

10. D3 API
• Selecting elements
• Joining data to selections
• Transforming selections
• Group selections in layouts

11. Selections
Target an array of elements
in the current document
using CSS3

12. Selections
// single element
d3.select(node)
d3.select(selector)
// array of elements
d3.selectAll(nodes)
d3.selectAll(selector)

13. Selections
viz = d3.select("#viz svg")
.attr("width", w)
.attr("height", h);
viz.selectAll("circle")
.attr("x", x)
.attr("y", y);

14. API Style
Method chaining pattern

15. Data
Join values in a dataset to
elements in a selection

16. Data
// joining data
selection.data(dataset);

17. Data
// datasets must be arrays
var dataset1 = [1, 2, 3];
var dataset2 = [
{ x: 1, y: 1 },
{ x: 2, y: 2 },
{ x: 3, y: 4 }
];

18. Data Selections
selection.data() returns the
selection of elements joined
to the give data values

19. Data Selections
What happens when there
are no existing elements for
the data values to join?

20. Update Selections
selection.data()
Data Elements

21. Enter & Exit Selections
Create new elements for
incoming data and remove
outgoing elements when data
selection changes

22. Enter Selections
selection.data().enter()
where there are fewer
existing elements than
incoming data values

23. Enter Selections
selection.data().enter()
Data Elements

24. Exit Selections
selection.data().exit()
where there are more
existing elements than
current data values

25. Exit Selections
selection.data().exit()
Data Elements

26. D3 philosophy
Emphasis on transforming
documents, not visual
representations

27. Transitions
Selections where the
operations apply smoothly
over time

28. Transitions
Apply attribute changes
across elements in a
selection

29. Transitions
// animate a style change
d3.select("#a").transition()
.style("color", value);

30. Interpolators
Simplify transforming
attributes for various data
types

31. Interpolators
§ Numbers
§ Strings
§ Colors
§ Arrays and Objects
§ Affine transforms

32. Layouts
Organise data for specific
types of visualisation

33. Layouts
§ Bundle § Pack
§ Chord § Partition
§ Cluster § Pie
§ Force § Stack
§ Hierarchy § Tree
§ Histogram § Treemap

34. D3 philosophy
Representational transparency

35. D3 philosophy
Not a charting library

36. Computing Data
var languages = [
{"key":"PHP","projects":4283},
{"key":"Ruby","projects":9162},
{"key":"Python","projects":3102}
];
var pie = d3.layout.pie()
.value(function(d){
return d.projects;
});
selection.data(pie(languages));

37. API Style
Constructors return functions

38. Scales
Mapping from data to
attributes (data-space to
visual-space)

39. Scales
Domain —› Range

40. Scales
§ Linear § Threshold
§ Square Root § Quantile
§ Exponential § Identity
§ Logarithmic § Ordinal
§ Quantize

41. Ordinal Scales
Often used to assign colours

42. Ordinal Scales
var colors = ["#98abc5",
"#8a89a6", "#7b6888"];
// create a color function
var col = d3.scale.ordinal()
.range(colors);

43. Geography
Display geographic shapes
and project location values
to pixel coordinates

44. Projections
§ Mercator
§ Albers
§ Azimuthal

45. Choropleth Map
d3.geo.path + d3.scale.quantize:

46. Sunburst Chart
d3.layout.partition + d3.svg.arc:

47. Streamgraph
d3.layout.stack + d3.scale.linear:

48. Composition
D3 visualisations are
composed from atomic
functions and chained
operations

49. Representation
Operating directly on data
and the DOM is more
complex, but also more
flexible and powerful than
traditional tools

50. Learn
§ Functional programming
§ Statistics and algebra
§ Information design

51. Programming as play
The best results with D3
come from trial and error,
experimentation, and
constant visual tweaking

52. Documentation
https://github.com/mbostock/d3/wiki
The D3 API documentation is
amazingly detailed

53. Exploration
http://bl.ocks.org/
Converts GitHub Gists into
interactive demos

54. Exploration
http://enjalot.com/
An experimental
environment for prototyping
visualisations

55. Thanks
@maetl
mark.rickerby@bigcommerce.com