Update d3.js data with button press

This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.

It demonstrates the loading of new data and updating a graph on a button press. It should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from d3noob's block: Update d3.js data with button press

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

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

// Set the dimensions of the canvas / graph
var svg = d3.select('body')
					.append('svg')
          .attr('width', width)
          .attr('height', height)
          .attr('id', 'linechart');

var x_ = d3.scaleBand()
              .range([0,w])

var y_ = d3.scaleLinear()
              .range([h, margin.bottom])

var line = d3.line()
                .x(function(d) {return x_(d.education)})
                .y(function(d) {return y_(d.number)})
                .curve(d3.curveStepBefore)
          
          var xAxis = d3.axisBottom(x_);

var yAxis = d3.axisLeft(y_);
  
  	svg.append('rect')
    	.attr('width', 40)
    	.attr('height', 40)
    	.on('click', update);

d3.csv('data.csv', function(error, data) {
      if (error) throw error;

data.forEach(function(d) {
      d.number = +d.number;
      d.education = d.education;
    });
 		
      x_.domain(data.map(function(d) {return d.education}));
     y_.domain([0,d3.max(data, function(d) {return d.number})]);

svg.append('g')
          .attr('class', 'yaxis')
        	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        	.style('opacity', 1)
          .call(yAxis);

svg.append('g')
          .attr('class', 'xaxis')
        	.attr('transform', "translate(" + margin.left + "," + (h + margin.top) + ")")
        	.call(xAxis)
//           .selectAll('text')
//           .attr('transform', 'translate(0,15)rotate(-25)')

var line1 = svg.append('path')
        .attr('class', 'line')
        .attr('d', line(data))
        .attr('transform', 'translate('+(margin.left+28.1818)+','+margin.top+')');

})

// ---- update ----

function update() {

// Get the data again
    d3.csv("data-alt.csv", function(error, data) {
       	data.forEach(function(d) {
          d.number = +d.number;
          d.education = d.education;
	    });
      
    	// Scale the range of the data again

x_.domain(data.map(function(d) {return d.education}));
      y_.domain([0,d3.max(data, function(d) {return d.number})]);

// Select the section we want to apply our changes to
    //
    var svg = d3.select('body')
    .transition();
    //
    // // Make the changes
        svg.select(".line")
            .attr("d", line(data))
        	.transition()// change the line
            .duration(750)
        svg.select(".xaxis")
            .transition()// change the x axis
            .duration(750)
            .call(xAxis);
        svg.select(".yaxis")
            .transition()// change the y axis
            .duration(750)
            .call(yAxis);

});
  }
</script>
</body>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js