d3intro_ex17

Intro d3js

### Example17 - Transitions

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      p.update:hover {
        cursor: pointer;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      
      .axis text {
        font-family: sans-serif;
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Intro d3js - example17</h1>
    <p class="update">click this text to update the data.</p>
    
    <script type="text/javascript">
    	//generate random 2D points
      function get_data(numValues, xMax, yMax) {
          var xRange = Math.random() * xMax; //Max range of new x values
          var yRange = Math.random() * yMax; //Max range of new y values        
          dataset = []; //Initialize empty array
          for (var i = 0; i < numValues; i++) {    //Loop numValues times
            var newNumber1 = Math.floor(Math.random() * xRange);
            var newNumber2 = Math.floor(Math.random() * yRange); 
            dataset.push([newNumber1, newNumber2]);
          }
          return dataset;
      }

//Width and height
      var w = 500;
      var h = 300;
      var padding = 30;
      
      //Dynamic, random dataset
      var dataset = get_data(50,1000,500);

//Create scale functions
      var xScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                 .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                 .range([h - padding, padding]);

//Define X axis
      var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(5);

//Define Y axis
      var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);

//Create SVG element
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

//Create circles
      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", 2);
      
      //Create X axis
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
      
      //Create Y axis
      svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);

//On click, update with new data      
      d3.select("p.update")
        .on("click", function() {

var dataset = get_data(50,1000,500);
          
          //Update scale domains
          xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
          yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);

//Update all circles
          svg.selectAll("circle")
             .data(dataset)
             .transition()
             .duration(1000)
             .each("start", function() {
               d3.select(this)
                 .attr("fill", "magenta")
                 .attr("r", 7);
             })
             .attr("cx", function(d) {
                 return xScale(d[0]);
             })
             .attr("cy", function(d) {
                 return yScale(d[1]);
             })
             .each("end", function() {
               d3.select(this)
                 .transition()
                 .duration(500)
                 .attr("fill", "black")
                 .attr("r", 2);
             });

//Update X axis
          svg.select(".x.axis")
              .transition()
              .duration(1000)
            .call(xAxis);
          
          //Update Y axis
          svg.select(".y.axis")
              .transition()
              .duration(1000)
            .call(yAxis);

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js