d3 v4 tutorial

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

by duto_guerra

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<h1>d3v4 Tutorial Step 4: svg</h1>
<div id="chart"></div>

CSS

rect {
  fill:steelblue;
}

JavaScript

var myData = [12, 15, 20, 5, 8];

var BAR_HEIGHT=20;
var chart = d3.select("#chart")
	.append("svg")
  .attr("width", 400)
  .attr("height", 400);


function update(myData) {

  var ps = chart.selectAll("rect")
    .data(myData);
	
  //Enter
  var psEnter = ps.enter()
    .append("rect")
    .merge(ps)
  	.attr("x", 0)
    .attr("y", function (d, i) {
    	return i*(BAR_HEIGHT+1);
  	})
    .attr("width", function (d) {
	  	return d;
  	})
    .attr("height", BAR_HEIGHT);

    
  //Update
  ps
  	.attr("x", 0)
    .attr("y", function (d, i) {
    	return i*BAR_HEIGHT;
  	})
    .attr("width", function (d) {
	  	return d;
  	})
    .attr("height", BAR_HEIGHT);

  //Remove
  ps.exit()
    .remove();

}

update(myData);