d3 v4 tutorial

A basic d3.v4 tutorial explaining how to create a simple chart binding to data

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg></svg>

JavaScript

var svg = d3.select('svg');
		
		var dataSet = [20, 20];
		
		var group=svg.append("g");
		var circles = group.selectAll('circle')
		.data(dataSet)
		.enter()
		.append('circle')
		.attr("r",function(d){ return d })
		.attr("cx",function(d, i){ return i * 100 + 50 })
		.attr("cy",50)
		.attr("fill",'black');
		
		var t1 = d3
		.transition()
		.duration(1000)
		.ease(d3.easeLinear)
		.attr("fill","orange")
		.transition()
		.duration(1000)
		.ease(d3.easeLinear)
		.attr("fill","purple");
		
		var t2 = d3
		.transition()
		.duration(1000)
		.ease(d3.easeLinear)
		.attr("fill","blue")
		.transition()
		.duration(1000)
		.ease(d3.easeLinear)
		.attr("fill","yellow");
	
		group.select(":nth-child(1)")
		.transition(t1).transition(t2); 
		group.select(":nth-child(2)")
		.transition(t2).transition(t1);