Introduction to D3.js v.4

Slides: bit.ly/d3-v4

@AysSomething

Nrwl.io

D3.JS

By Mike Bostock

d3js.org

Migration

”d3.min.js”
”d3.v4.min.js”

Selection


var p = d3.select("body").append('p');
p.html('hello');

Fiddle

Selection


var p = d3.select("body").append('p').data([42, 34, 54, 65, 75]);
p.text(function(d){ return 'hello ' + d;})

Fiddle

Selection


var p = d3.select("body").append('p').data([42, 34, 54, 65, 75]);
p.enter().append()
	.text(function(d){ return 'hello ' + d;})

Fiddle

Selection


hello 42;
var p = d3.select("body").selectAll('p')
	.append('p').data([42, 34, 54, 65, 75]);
p.enter().append('p')
	.text(function(d){ return 'hello ' + d;})
	.style('color', 'red')

Fiddle

Selection



	var els = d3.select("body")
    .selectAll("p")
    .data(data, function(d) { return d; });// UPDATE

  var updating = els.style("color", "red");

  var entering = els.enter().append("p")// ENTER
    .text(String)
    .style("color", "blue")

  var exiting = els.exit().style("color", "lightgrey");//EXIT

  var merged = els.merge(entering)// ENTER + UPDATE
    .style("color", "green");

Fiddle

Transition


var exiting = els.exit()
  	.transition()
    .duration(750)
    .ease(d3.easeLinear)
  	.style("color", "lightgrey");//EXIT

Fiddle

Scales


x = d3.scaleLinear()
    .range([0, width])

Scales


x = d3.scaleLinear()
    .range([0, width])
		.domain([0, 100]);

Fiddle

Axis


var xAxis = d3.axisBottom(x).ticks(12);

Axis


var xAxis = d3.axisBottom(x).ticks(12);
svg.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

Steps

Setup the config for size, scales
Build svg with config
Populate data
Draw axis


render() {
	setup();
	populate();
}

Setup


function setUp() {
	var margin = {top: 20, right: 20,bottom: 30,left: 50};
	width = 800 - margin.left - margin.right,
		height = 400 - margin.top - margin.bottom;

	var x = d3.scaleLinear()
		.range([0, width]);

	var y = d3.scaleLinear()
		.range([height, 0]);
}

Demo

Fun

THE END

Thank you for you attention!

- @AysegulYonet
- Slides and code