This document provides an overview of D3.js, a JavaScript library for data visualization. It discusses why data visualization is useful, some key concepts in D3 like selections, entering and updating data, and creating reusable components. It also covers transitions, scales, axes, SVG, and common layouts. The document encourages exploring more examples on the bl.ocks website and concludes by thanking the audience.

1. D3.js
A picture is worth a thousand words

2. Why data visualization?
<- Because of that

3. But what do we GET?
{
“id” : 6,
“wall_id” : 55,
“resource_id” : 42,
“project_id” : 3,
“hours” : 3,
“intervals” : [
{
“start_date” : “2016-05-06” ,
“end_date” : “2016-05-08” ,
“booking_id” : 6
} ,
{
“start_date” : “2016-05-19” ,
“end_date” : “2016-05-19” ,
} ,
{
“start_date” : “2016-05-21” ,
“end_date” : “2016-05-24” ,
“booking_id” : 6
} ,
{
“start_date” : “2016-06-01” ,
“end_date” : “2016-10-25” ,
“booking_id” : 6
}

4. The two paths

5. The imperative one
For each of the element do…
Change width to 100px and then…
Rotate if rotate===true…
...
Then debug

6. The declarative one
I want the elements to be there
(I want an animation for the elements
that are not there)
I don’t give a …
how it all happens

7. D3 is...
Declarative approach
Data-oriented
Lots of built-in stuff

8. Basics of D3 - selection
JS
var selection = d3.select('#root')
.selectAll('span');
HTML
<div id="root">
</div>
● Looks a bit empty

9. Basics of D3 - enter, update, exit
JS
var updateSelection = d3.select('#root')
.selectAll('span');
.data([
'Lorem',
'Ipsum'
]);
updateSelection.enter().append('span');
updateSelection.text(el => el);
updateSelection.exit().remove();
HTML
<div id="root">
<span>Lorem</span>
<span>Ipsum</span>
</div>

10. Enter Exit
Data Elements
Update

11. Basics of D3 - complete render function
let render = function(data) {
let selection = d3.select('#root').selectAll('span');
let updateSelection = selection.data(data);
updateSelection.enter().append('span');
updateSelection.text(d => d);
updateSelection.exit().remove();
};

12. Components (codepen)
let spanComponent = function(selection) {
let updateSelection = selection.selectAll('span').data(data =>
data.lorem);
updateSelection.enter().append('span');
updateSelection.text(d => d + ' ');
updateSelection.exit().remove();
};
let render = function(data) {
let selection = d3.select('#root').selectAll('div');
let updateSelection = selection.data(data);
updateSelection.enter().append('div');
updateSelection.call(spanComponent);
updateSelection.exit().remove();
};
render([{lorem: ['foo', 'bar']}, {lorem: ['ipsum', 'dolor']}]);

13. Transitions (codepen)
let spanComponent = function(selection) {
let updateSelection = selection.selectAll('span').data(data =>
data.lorem);
updateSelection.enter().append('span')
.style('opacity', 0)
.transition()
.delay((d, i) => i * 400)
.duration(500)
.style('opacity', 1);
updateSelection
.text(d => d + ' ');
updateSelection.exit().remove();
};

14. Scales
let myLinearScale = d3.scale
.linear()
.domain([0, 10])
.range([0, 800]);
let x = myLinearScale(5);
console.log(x); // prints 400

15. Scales (2)
let myTimeScale = d3.time
.scale()
.domain([new Date('2016-01-01'), new Date('2017-01-01')])
.range([0, 800]);
let anyDate = new Date('2016-05-10');
let x = myTimeScale(anyDate);
myTimeScale.invert(x); // equals anyDate

16. SVG, Axes (codepen)
let svg = d3.select('#root').append('svg')
.attr("width", 300)
.attr("height", 300);
let x = d3.scale.linear()
.range([0, 300]);
let xAxis = d3.svg.axis()
.ticks(4)
.scale(x);
svg.append("g")
.attr("transform", "translate(0,100)")
.call(xAxis);
let line = d3.svg.line()
.x(d => d.x)
.y(d => d.y)
.interpolate('monotone');
svg.data([[ {x: x(0.1), y: 60}, {x: x(0.3), y: 20},
{x: x(0.5), y: 30}, {x: x(0.7), y: 10},
{x: x(0.9), y: 80} ]]);
svg.append("path")
.attr('fill', 'none')
.attr('stroke', '#000')
.attr("d", line);

17. Layouts

18. And much more
A lot of examples here: https://bl.ocks.org/mbostock

19. Thank you for your attention!
Tymoteusz Bleja
Junior Frontend Developer @ Apptension