Slides for my Spectory's dev meeting

1. D3
D3 is a JavaScript library for crea ng data
visualiza ons.
D3 provide the following capabili es:
Crea ng graphic elements.
Binding data to the elements.
Transforming the elements, by changing their
visual proper es.
Anima ons.
Handling user inputs.

2. It is not:
A chart library like highcharts or google charts.
You cannot build an out of the box graphs with it.
The advantage is that as a developer
you have much more control

3. Examples
Charts
Tree
Force­Directed Graph
Map
Fractal
Gallery

4. My rst d3
<h1>Hello, d3</h1>
In d3
d3.select("body").append("h1").html("Hello, D3")

5. My srt SVG:
<svg>
<circle cx="100" cy="100" r="50" fill="blue"></circle>
</svg>
In d3:
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "blue");

6. Selec on
select will retrieve the rst element that is qualify.
selectAll will retrieve all the elements that are
quali es.
D3 uses CSS­style selec ons to iden fy elements:
Type selec on: d3.select(“p”)
Class selec on d3.select(“.xAxis”);
ID selec on: d3.select(“#myLine”);
D3 also support elements that are contained by
other elements (div p) and mul ple classes
(.xPath.line).

7. append
Creates new DOM element appends it to the end of
whatever selec on it’s ac ng on.
a r
a r (or a rs for mul ple) is used to set an HTML
a ribute and its value on an element.

8. Chaining Methods
D3 uses chaining method technique.
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

9. My First graph!

10. var w = 800,h = 500, barWidth = 50, space = 2
var data = [150, 100, 200, 300, 150, 100];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attrs({
x: function(d, i) { return i * (barWidth + space) },
y: function(d) { return h - d; },
width: barWidth,
height: function(d) { return d; }});

11. Scaling and Axes
var yScale = d3.scaleLinear()
.domain([0, 5])
.range([0, 100]);
console.log(yScale(1));// 20
console.log(yScale(4));// 80
console.log(yScale(5));// 100
The axes is being de ned using the scale. e.g:
d3.axisLeft(yScale)

13. var w = 800, h = 500, barWidth = 50, space = 2, margin = 40
var data = [1, 2, 5, 3, 2, 4, 3, 2, 1, 5];
var svg = d3.select("body")
.append("svg")
.attrs({
width: w + margin*2,
height: h + margin*2,
})
.append("g")
.attr("transform", "translate(" + margin + ","
+ margin + ")");
var yScale = d3.scaleLinear()
.domain([0, 5])
.range([h, 0]);
svg.append("g")
.call(d3.axisLeft(yScale).ticks(5));

14. let xScale = d3.scaleBand()
.domain(d3.range(0, data.length))
.range([0, data.length * (barWidth + space)]);
svg.append("g")
.attr("transform", "translate(0, " + h + ")")
.call(d3.axisBottom(xScale));
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attrs({
x: function(d, i) { return i * (barWidth + space)
+ space },
y: function(d) { return yScale(d) },
width: barWidth,
height: function(d) { return h - yScale(d); }
});

15. Line chart

16. var w = 500, h = 200, margin = 40;
var svg = d3.select("body")
.append("svg")
.attrs({
width: w + margin * 2,
height: h + margin * 2,
})
.append("g")
.attr("transform", "translate(" + margin + "," + margin +
var data = [
{ date: new Date('2016-12-01'), value: 6 },
{ date: new Date('2016-12-02'), value: 1 },
{ date: new Date('2016-12-03'), value: 3 },
{ date: new Date('2016-12-04'), value: 2 },
{ date: new Date('2016-12-06'), value: 8 },
{ date: new Date('2016-12-07'), value: 1 }];

17. var minDate = data[0].date;
var maxDate = data[data.length - 1].date;
var xScale = d3.scaleTime()
.domain([minDate, maxDate])
.range([0, w]);
svg.append("g")
.attr("transform", "translate(0, " + h + ")")
.call(d3.axisBottom(xScale)
.ticks(d3.timeDay, 1)
.tickFormat(d3.timeFormat("%a %d")));
var yScale = d3.scaleLinear()
.domain([0, 10])
.range([h, 0]);
svg.append("g")
.attr("class", "axis")
.call(d3.axisLeft(yScale).ticks(5));

18. var line = d3.line()
.x(function(d) { return xScale(d.date); })
.y(function(d) { return yScale(d.value); })
svg.append("path")
.attrs({
d: line(data),
'class': 'myline',
'fill': 'none',
'stroke': 'black',
'stroke-width': 2
})