The document provides a comprehensive guide on the d3.js library for data visualization, covering essential concepts such as selections, SVG graphics, scales, layouts, transitions, and various chart types. It includes practical tips, tasks, and solutions related to exporting SVG files, handling user interactions, and implementing various visualization techniques like Sankey diagrams and force layout diagrams. Additionally, it introduces tools like Crossfilter and dc.js for data immersion and offers external resources and references for further learning.

1. D3.JS TIPS & TRICKS
(export to svg, crossfilter, maps etc.)
_by Oleksii Prohonnyi

3. INTRODUCTION

4. Introduction
D3.js is a JavaScript library for manipulating
documents based on data.
 D3 - Data-Driven Documents
 d3js.org
 github.com/mbostock/d3
 github.com/mbostock/d3/wiki/API-Reference

5. DATA VISUALIZATION

6. Overview
 Data visualization is the presentation of data in a
pictorial or graphical format.
 Reasons to use:
 helps people see things that were not obvious
to them before;
 patterns can be spotted quickly and easily;
 conveys information in a universal manner;
 answer questions like “What would happen if
we made an adjustment to that area?”.

8. Tools
 Charts wizards (Libre Office, MS Office, Numbers)
 Google Charts
 Modest Maps (mapping tool)
 Visual.ly
 Tableau
 RAW (from Density Design)
 D3.js

9. See more
 www.storytellingwithdata.com
 vizwiz.blogspot.com
 www.visualisingdata.com
 flowingdata.com
 helpmeviz.com
 plot.ly (collaboration online tool)

10. D3 CORE

11. Selections
 A selection is an array of elements pulled from the
current document. D3 uses CSS3 to select elements.
 After selecting elements, you apply operators to them
to do stuff. These operators can get or set attributes,
styles, properties, HTML and text content.
 d3.select(selector), d3.select(node)
 d3.selectAll(selector), d3.selectAll(nodes)
 See more: github.com/mbostock/d3/wiki/Selections
Demo: core/selections.html

12. SVG
Scalable Vector Graphics (SVG) is an XML-based
vector image format for two-dimensional graphics with
support for interactivity and animation.
 Shapes - generate geometric shapes and
primitives in SVG.
 Axes - generate standard axes for visualizations in
SVG.
 Controls - generate standard interactive
visualization controls in SVG.
Demo: core/svg.html

13. External resources
 d3.csv - request a comma-separated values (CSV) file.
 d3.html - request an HTML document fragment.
 d3.json - request a JSON blob.
 d3.text - request a text file.
 d3.tsv - request a tab-separated values (TSV) file.
 d3.xhr - request a resource using XMLHttpRequest.
 d3.xml - request an XML document fragment.
 See more: github.com/mbostock/d3/wiki/Requests
Demo: core/external-data.html

14. Scales
 Quantitative Scales - for continuous input
domains, such as numbers.
 Ordinal Scales - for discrete input domains,
such as names or categories.
 Time Scales - for time domains.

15. Layouts
 A layout encapsulates a strategy for laying out data elements
visually, relative to each other. Many layouts are built in to D3
itself:
 Chord - produce a chord diagram from a matrix of relationships.
 Partition - recursively partition a node tree into a sunburst or icicle.
 Pie - compute the start and end angles for arcs in a pie or donut
chart.
 Tree - position a tree of nodes tidily.
 etc.
 See more: github.com/mbostock/d3/wiki/Layouts
Demo: core/layouts.html

16. Transitions
 A special type of selection where the operators apply
smoothly over time rather than instantaneously.
 May have per-element delays and durations, computed
using functions of data similar to other operators.
 Multiple transitions may operate on any selection
sequentially or in parallel.
 See more: github.com/mbostock/d3/wiki/Transitions
Demo: core/transitions.html

17. Geography
 Paths - display geographic shapes.
 Projections - convert locations (latitude and
longitude) to pixel coordinates.
 Streams - streaming geometry transformations.

18. Even more
 Formatting
 Colors
 Localization
 Math
 Time
 etc.
Demo: core/other.html

19. Charts
Main purpose of data visualization:
 Comparison
 Composition
 Distribution
 Relationship
 See more:
www.storytellingwithdata.com/blog/2013/04/chart-chooser
 Try by yourself:
labs.juiceanalytics.com/chartchooser/index.html

20. Source: storytellingwithdata.com

21. D3 COOKBOOK

22. Coordinates axes
 Task:
 change chart 0,0 coordinate position to
svg left bottom corner.
 Solutions:
 y coordinate of chart bars should be
calculated depending on chart height;
 set range of the axis scale.
Demo: cookbook/coordinates.html

23. Multiple graphs
 Task:
 arrange more than one d3 graph on a web
page
 Solution:
 use a separate container and selector for
each of the graphs
Demo: cookbook/multi-graph.html

24. User actions
 Task:
 handle user’s mouse events on a graph
element and change view of groups
corresponding to them
 Solution:
 default JavaScript events should be
listened through on function
Demo: cookbook/mouse-events.html

25. Runtime dataset
 Task:
 change graph’s dataset in runtime on user
action
 Solution:
 request a new dataset after page load,
redraw existing svg element
Demo: cookbook/runtime-dataset.html

26. User-friendly graph’s API
 Task:
 create and configure the graph using user-
friendly API
 Solution:
 use dimple.js library for d3 core wrapping
and work with DOM through the API
 use c3.js library for d3 core wrapping and
work with DOM through the API
Demo: cookbook/friendly-api.html

27. Export to svg
 Task:
 export the graph to svg file
 Solution:
 browser build-in functionality (<img>, <canvas>)
 server-side conversion of svg data
 node.js/phantom.js for saving svg data into file
 canvas graph copy export (canvg.js)
 FileSaver.js API using
Demo: cookbook/export-to-svg.html

28. Export to svg – FileSaver.js API using
 Connect Blob.js and FileSaver.js scripts.
 Graph should be implemented using svg.
 Use FileSaver.js API:
Demo: cookbook/export-to-svg.html

29. Sankey diagram
 Task:
 visualize dataset using Sankey diagram
 Solution:
 compose d3 bar and line charts
 Sankey library
 Sankey plugin for d3
Demo: cookbook/sankey.html

30. Sankey diagram – About
 A specific type of flow diagram, in which the width
of the arrows is shown proportionally to the flow
quantity.
 Are typically used to visualize energy or material or
cost transfers between processes. They can also
visualize the energy accounts or material flow
accounts on a regional or national level.
 See more: www.sankey-diagrams.com

31. Sankey diagram – About
Source: wikimedia.org

32. Sankey diagram – Sankey plugin
 Connect sankey.js script.
 Dataset should contain “links” and “nodes” collections.
 Use Sankey plugin:
Demo: cookbook/sankey.html

33. Force layout diagram
 Task:
 visualize dataset using force layout
diagram
 Solution:
 instantiate d3.layout.force object and
extend it with configurations
Demo: cookbook/force-layout.html

34. Force layout diagram – About
 It’s purpose: to position the nodes of a graph in two-
dimensional or three-dimensional space so that all the
edges are of more or less equal length and there are as few
crossing edges as possible.
 It could be implemented by assigning forces among the set
of edges and the set of nodes, based on their relative
positions, and then using these forces either to simulate the
motion of the edges and nodes or to minimize their energy.
 See more: github.com/mbostock/d3/wiki/Force-Layout

35. Force layout diagram – About
Source: homes.cs.washington.edu

36. Force layout diagram – Pros & Cons
Pros:
 Good-quality results
 Flexibility
 Intuitive
 Simplicity
 Interactivity
 Strong theoretical
foundations
Cons:
 High running time
 Poor local minima

37. Force layout diagram – Implementation
 Dataset should contain “links” and “nodes” collections.
 Use d3.layout.force() function:
Demo: cookbook/force-layout.html

38. Map
 Task:
 visualize dataset using geographical
features of D3
 Solution:
 use d3.geo object for data display and it’s
manipulation
Demo: cookbook/map-simple.html

39. Map – Geo Paths
 For cartographic visualizations, D3 supports a handful of
components for displaying and manipulating geographic data.
 Datasets could be presented in the following formats:
 Shape file (binary format) – could be converted using
ogr2ogr utility
 GeoJSON - a standard way of representing geographic
features in JavaScript
 TopoJSON - an extension of GeoJSON that is significantly
more compact
 The primary mechanism for displaying geographic data is
d3.geo.path.

40. Map – Projections

41. Map – Projections
D3 includes several common projections by
default. All of them are presented below:
 d3.geo.albersUsa
 d3.geo.azimuthalEqualArea
 d3.geo.azimuthalEquidistant
 d3.geo.conicEqualArea
 d3.geo.conicConformal
 d3.geo.conicEquidistant
 d3.geo.equirectangular
 d3.geo.gnomonic
 d3.geo.Mercator
 d3.geo.orthographic
 d3.geo.stereographic
 d3.geo.transverseMercator

42. Map – Projections
 Numerous (less-commonly used) projections are
available in the extended geographic projections
plugin and the polyhedral projection plugin.
 Most projections provided by D3 are created via
d3.geo.projection and are configurable.

43. Map – Geo Streams
 For fast transformations of geometry without
temporary copies of geometry objects, D3 uses
geometry streams.
 The main d3.geo.stream method converts a
GeoJSON input object to a stream: a series of
method calls on a stream listener.
 See more: github.com/mbostock/d3/wiki/Geo-
Streams

44. Map – Implementation
 Finding Data
 Installing Tools
 Converting Data
 Loading Data
 Displaying Polygons
 Styling Polygons
 Displaying Boundaries
 Displaying Places
 Do magic
Demo: cookbook/map-advanced.html

45. The road to data nirvana:
 Step 1: Raw data
 Step 2: Visualize data
 Step 3: Interact with data
 Step 4: Data immersion
One more thing

46. Data immersion – Crossfilter
 Crossfilter is a JavaScript library for exploring large
datasets that include many variables in the browser.
 Crossfilter provides a map-reduce function to data
using “dimensions” and “groups”.
 MapReduce is a programming model for processing
large data sets with a parallel, distributed algorithm on
a cluster.
 See more: square.github.io/crossfilter
Demo: cookbook/crossfilter.html

47. Data immersion – Dc.js
 Dc.js is designed to be an enabler for both libraries
(Crossfilter.js and D3.js). Taking the power of
crossfilter's data manipulation capabilities and
integrating the graphical capabilities of d3.js.
 It is designed to provide access to a range of
different chart types in a relatively easy to use
fashion.
 See more: dc-js.github.io/dc.js
Demo: cookbook/dc-js.html

48. Data immersion – Dc.js
The different (generic) types of chart that dc.js
supports are:
 Bar Chart
 Pie Chart
 Row Chart
 Line Chart
 Bubble Chart
 Geo Choropleth Chart
 Data Table
Demo: cookbook/dc-js.html

49. More examples
 github.com/mbostock/d3/wiki/Tutorials
 github.com/mbostock/d3/wiki/Gallery
 bost.ocks.org/mike
 bl.ocks.org/mbostock
 christopheviau.com/d3list
 techslides.com/over-1000-d3-js-examples-and-
demos

50. REFERENCES

51. References
 “Getting Started with D3” (Mike Dewar, 2012)
 “D3.js in Action” (Elijah Meeks, 2014)
 “D3 Tips and Tricks” (Malcolm Maclean, 2013)
 “Data Visualization with d3.js Cookbook” (Ari
Lerner, Victor Powell, 2014)
 github.com/mbostock/d3/wiki/Tutorials
 dashingd3js.com

52. THANK YOU
FOR YOUR ATTENTION

53. Q&A
Oleksii Prohonnyi
 oprohonnyi@gmail.com
 fb.com/oprohonnyi
 linkedin.com/in/oprohonnyi/en
 Sources: goo.gl/gjgHwO