D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)

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

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

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?”.

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

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

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

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

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

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.

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

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

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

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

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

Source: storytellingwithdata.com

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

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

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

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

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

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

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

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

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

Sankey diagram – About
Source: wikimedia.org

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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

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

D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.) (20)

More from Oleksii Prohonnyi (12)

Recently uploaded (20)

D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)