Ch9_Scatter_trans

This example leverages some information in Chapter 9 to do the following:

Generate a scatter plot with a dynamic dataset
Mouseover/mouseout events
Generate a new dataset on SVG click with transitions

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      margin:0; 
    }
  </style>
</head>

<body>
  <script>
    // Variables of Interest
    var svgW = 900;
    var svgH = 600;
    var pad = 100;
    var numPoints = 20;
    var maxValueX = 300;
    var maxValueY = 200;
    var dataset = genDataset(numPoints, maxValueX, maxValueY);
    
    
    // Develop scales
    var xScale = d3.scaleLinear()
    	.domain([0, maxValueX])
    	.range([pad, svgW-pad]);
    var yScale = d3.scaleLinear()
    	.domain([0, maxValueY])
    	.range([svgH-pad, pad]);
    
    // Establish SVG
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", svgW)
      .attr("height", svgH)
    	.on("click", handleSVGclick);

// Random descriptive label
    svg.append("text")
    	.attr("x", svgW/2)
    	.attr("y", pad/2)
    	.text("Click in SVG to update data; note mouseover/out events")
    	.attr("text-anchor", "middle");
    
    // Plot scatter points
      // Remember to add mouse over events!
    svg.selectAll("circle")
    	.data(dataset)
    	.enter()
    	.append("circle")
    	.attr("cx", function (d) {
      	return xScale(d[0]);
      })
    	.attr("cy", function (d) {
      	return yScale(d[1]);
    	})
    	.attr("r", 5)
    	.on("mouseover", handleMouseover)
    	.on("mouseout", handleMouseout);
    
    // Draw axes
    var xAxis = d3.axisBottom(xScale);
    svg.append("g")
    	.attr("class", "axis")
    	.attr("transform", "translate(0," + (svgH-pad) + ")")
    	.call(xAxis);
    var yAxis = d3.axisLeft(yScale);
    svg.append("g")
    	.attr("class", "axis")
    	.attr("transform", "translate(" + pad + ",0)")
    	.call(yAxis);
    
    // Functions of interest
    function genDataset(nP, mVx, mVy) {
      // Do not need to re-establish dataset
      var output = [];
      for (var ii = 0; ii < nP; ii++) {
        var newNum1 = Math.round(Math.random() * mVx);
        var newNum2 = Math.round(Math.random() * mVy);
        output.push([newNum1,newNum2]);
      }
      return output;
    }
    
    function handleMouseover() {
      d3.select(this)
      	.attr("fill", "rgb(255,0,0)")
      	.attr("r", 10);
    }
      
    function handleMouseout() {
      d3.select(this)
      	.attr("fill", "rgb(0,0,0)")
      	.attr("r", 5);
    }
    
    function handleSVGclick() {
      // Generate new data
      dataset = genDataset(numPoints, maxValueX, maxValueY);
      
      // Rebind data and update plot
      svg.selectAll("circle")
        .data(dataset)
      	.transition()
      	.duration(1000)
        .attr("cx", function (d) {
          return xScale(d[0]);
        })
        .attr("cy", function (d) {
          return yScale(d[1]);
        });
    
    }
  </script>
</body>

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