Lukáš Císar
History
Initial release:
18 February 2011; 6 years ago
Stable release:
4.10.2 / 3 September 2017;
Authors' definition
D3.js is a JavaScript library for producing
dynamic, interactive data visualizations in
web browsers. It makes use of the widely
implemented SVG, HTML5, and CSS standards.
Functionality
● Library uses pre-built JavaScript functions to select
elements, create SVG objects, style them, or add
transitions, dynamic effects or tooltips to them.
● Large datasets can be easily bound to SVG objects
using simple D3.js functions to generate rich
text/graphic charts and diagrams.
● The data can be in various formats, most commonly
JSON, comma-separated values (CSV) or geoJSON,
but, if required, JavaScript functions can be written to
read other data formats.
DOM example
Selections
● The selection can be based on tag, class,
identifier, attribute, or place in the hierarchy.
● Once elements are selected, one can apply
operations to them. This includes getting and
setting attributes, display texts, and styles
● Elements may also be added and removed. This
process of modifying, creating and removing
HTML elements can be made dependent on
data, which is the basic concept of D3.js.
Selections
d3.selectAll("p") // select all <p> elements
.style("color", "lavender") // set style "color" to value "lavender"
.attr("class", "squares") // set attribute "class" to value "squares"
.attr("x", 50); // set attribute "x" (horizontal position)
to value 50px
Transitions
d3.selectAll("p") // select all <p> elements
.transition("trans_1") // transition with name "trans_1"
.delay(0) // transition starting 0ms after trigger
.duration(500) // transitioning during 500ms
.ease("linear") // transition easing progression is linear...
.style("color", "pink"); // ... to color:pink
Dynamic properties
● styles, attributes, and other properties can be
specified as functions of data in D3, not just
simple constants.
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
Data-binding// Data
var data = [
{ name:"Ireland", income:53000, life: 78, pop:6378, color: "black"},
{ name:"Norway", income:73000, life: 87, pop:5084, color: "blue" },
{ name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" }
];
// Create SVG container
var svg = d3.select("#hook").append("svg")
.attr("width", 120)
.attr("height", 120)
.style("background-color", "#D0D0D0");
// Create SVG elements from data
svg.selectAll("circle") // create virtual circle template
.data(data) // bind data
.enter() // for each row in data...
.append("circle") // bind circle & data row such that...
.attr("id", function(d) { return d.name }) // set the circle's id
according to the country name
.attr("cx", function(d) { return d.income / 1000 }) // set the
circle's horizontal position according to income
.attr("cy", function(d) { return d.life }) // set the circle's
vertical position according to life expectancy
.attr("r", function(d) { return d.pop / 1000 *2 }) // set the
circle's radius according to country's population
.attr("fill", function(d) { return d.color }); // set the
circle's color according to country's color
API structure
● Selections
● Transitions
● Arrays
● Math
● Color
● Scales
● SVG
● Time
● Layouts
● Geography
● Geometry
● Behaviors
Examples
● http://www.nytimes.com/newsgraphics/2013/09/1
3/fashion-week-editors-picks/
● https://bl.ocks.org/mbostock/4330486
Resources
● https://www.w3.org/TR/WD-DOM/introduction.ht
ml
https://en.wikipedia.org/wiki/D3.js
● https://www.dashingd3js.com/d3js-first-steps
● https://d3js.org
Lukáš Císar