D3 Examples - 14.click-scatter-transition

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="utf-8">
    
        <title>D3: Transitioning points to randomized values</title>
    
        <script src="https://d3js.org/d3.v4.min.js"></script>
    
        <style type="text/css">
            
            .axis path,
      
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
    </head>
    <body>
    
        <p>Click on this text to update the chart with new data values as many times as you like!</p>
    
        <script type="text/javascript">
​
      var margin = {top: 20, right: 10, bottom: 20, left: 30};
      var w = 600;
            var h = 400;
            var width = w - margin.left - margin.right;
      var height = h - margin.top - margin.bottom;
      
            var dataset = []; 
            var numDataPoints = 50; 
            var maxRange = Math.random() * 1000;
​
// ---- create array of 50 (x,y) coords -----------------------
            for (var i = 0; i < numDataPoints; i++) {   
                var newNumber1 = Math.floor(Math.random() * maxRange);  
                var newNumber2 = Math.floor(Math.random() * maxRange);  
                dataset.push([newNumber1, newNumber2]);
            }
​
      
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h)
                .append("g")     
                .attr("transform", "translate(" + margin.left +", " + margin.top + ")");
      
      
            var xScale = d3.scaleLinear()
                                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                                 .range([0, width]); 
​
​
            var yScale = d3.scaleLinear()
                                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                 .range([height, 0]); // standard way 
​
​
            var xAxis = d3.axisBottom(xScale)
                              .ticks(10);
​
​
            var yAxis = d3.axisLeft(yScale)
                              .ticks(5);
​
​
            svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            
​
            svg.append("g")
                .attr("class", "axis")
                .call(yAxis);
      
      
      
            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);
            
​
​
            d3.select("p")
                .on("click", function() {
​
            var numValues = dataset.length;         
        
//          get maxRange value between 0 to 1000
                    var maxRange = Math.random() * 1000;                        
                    dataset = [];                       
​
//         create an array of equal length, element value within maxRange
                    for (var i = 0; i < numValues; i++) {                       
                        var newNumber1 = Math.floor(Math.random() * maxRange);  
            
                        var newNumber2 = Math.floor(Math.random() * maxRange);  
            
                        dataset.push([newNumber1, newNumber2]);                 
                    }
                    
​
                    xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
                    yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);
​
// ---- equal length of dataset, only update elements, no entering elements ----
                    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>
</html>
    