Ch9_EventHandler_Transition

This code leverages the base code for Chapter 9 bar chart exercises and adds event handling testing with transitions.

forked from eychang9's block: Ch9_Bar_Base

forked from eychang9's block: Ch9_EventHandler

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .txtLabel {
      font-family: Century Gothic;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <p>Click here for event handler.</p>
  <script>
    // Dataset and other constants
    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 
                   11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    var svgW = 900;
    var svgH = 500;
    var pad = 100;
    
		// Develop axial scales
    var xScale = d3.scaleBand()
    	.domain(d3.range(dataset.length))
    	.rangeRound([pad, svgW-pad])
    	.paddingInner(0.05);
    var yScale = d3.scaleLinear()
    	.domain([0, d3.max(dataset, function (d) { return (d);})])
    	.rangeRound([svgH-pad, pad])
    
    // Establish SVG    
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", svgW)
      .attr("height", svgH);

// Draw rectangles
    svg.selectAll("rect")
    	.data(dataset)
    	.enter()
    	.append("rect")
    	.attr("x", function (d,i) { return xScale(i); })
      .attr("y", function (d) { return yScale(d); })
    	.attr("width", xScale.bandwidth())
      .attr("height", function (d) { return (svgH-pad-yScale(d)); })
    	.attr("fill", function (d) { return "rgb(0,0," + d*10 + ")" });
    
    // Draw text
    svg.selectAll("text")
    	.data(dataset)
    	.enter()
    	.append("text")
    	.attr("x", function (d,i) { return (xScale(i) + 0.5 * xScale.bandwidth());})
    	.attr("y", function (d) { return (yScale(d) + 15); })
    	.text(function (d) { return (d);})
    	.attr("fill", "rgb(255,255,255)")
    	.attr("text-anchor", "middle")
    	.attr("class", "txtLabel");

// Event handler
    d3.select("p")
    	.on("click", function () {
      
      var transTime = 1000;
      
      // New values for dataset 
      dataset = []; 
      var maxVal = 25;
      for (var ii = 0; ii < 20; ii++) {
        var newNum = Math.round(Math.random()*maxVal);
        dataset.push(newNum);
      }
      
      // Update all rects 
      svg.selectAll("rect")
        .data(dataset)
      	.transition()
      	.duration(transTime)
				.ease(d3.easeQuadInOut)
        .attr("y", function(d) { return yScale(d); })
      	.attr("height", function (d) { return (svgH-pad-yScale(d)); })
      	.attr("fill", function (d) { return "rgb(0,0," + d*10 + ")" });
      
      // Update text lables
      svg.selectAll("text")
      	.data(dataset)
      	.transition()
      	.duration(transTime)
      	.ease(d3.easeQuadInOut)
      	.attr("y", function (d) { return (yScale(d) + 15); })
    		.text(function (d) { return (d);});

});
    
  </script>
</body>

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