This presentation has been prepared by Oleksii Prohonnyi for LvivJS 2015 conference (http://lvivjs.org.ua/)
See the speech in Russian by the following link: https://youtu.be/oi7JhB8eWnA
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
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?”.
7.
8. Tools
Charts wizards (Libre Office, MS Office, Numbers)
Google Charts
Modest Maps (mapping tool)
Visual.ly
Tableau
RAW (from Density Design)
D3.js
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
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
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
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
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.
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