D3 Scatterplot (Animations)

<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
 
    
    <style type="text/css">
            /* Format X and Y Axis */
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }

.axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
    </style>
    
 
  <body>
    <h2>D3 Scatterplot </h2>
    <p>This is a data visualization using transitions with a scatterplot</p>
    <h4>Click on this text to update chart with new values</h4>
    <h3></h3>
  
  
  <script type="text/javascript">
  
    // Setup data
            var dataset = [];  // Initialize empty array
            var numDataPoints = 15;  // Number of dummy data points
            var maxRange = Math.random() * 1000;  // Max range of new values
            for(var i=0; i<numDataPoints; i++) {
                var newNumber1 = Math.floor(Math.random() * maxRange);  // New random integer
                var newNumber2 = Math.floor(Math.random() * maxRange);  // New random integer
                dataset.push([newNumber1, newNumber2]);  // Add new number to array
            }

// Setup settings for graphic
            var canvas_width = 500;
            var canvas_height = 300;
            var padding = 30;  // for chart edges

// Create scale functions
            var xScale = d3.scale.linear()  // xScale is width of graphic
                            .domain([0, d3.max(dataset, function(d) {
                                return d[0];  // input domain
                            })])
                            .range([padding, canvas_width - padding * 2]); // output range

var yScale = d3.scale.linear()  // yScale is height of graphic
                            .domain([0, d3.max(dataset, function(d) {
                                return d[1];  // input domain
                            })])
                            .range([canvas_height - padding, padding]);  // remember y starts on top going down so we flip

// 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("h3")  // This is where we put our vis
                .append("svg")
                .attr("width", canvas_width)
                .attr("height", canvas_height)

// Create Circles
            svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")  // Add circle svg
                .attr("cx", function(d) {
                    return xScale(d[0]);  // Circle's X
                })
                .attr("cy", function(d) {  // Circle's Y
                    return yScale(d[1]);
                })
                .attr("r", 2);  // radius

// Add to X axis
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (canvas_height - padding) +")")
                .call(xAxis);

// Add to Y axis
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding +",0)")
                .call(yAxis);
            
            // On click, update with new data
            d3.select("h4")
                .on("click", function() {
                    var numValues = dataset.length;  // Get original dataset's length
                    var maxRange = Math.random() * 1000;  // Get max range of new values
                    dataset = [];  // Initialize empty array
                    for(var i=0; i<numValues; i++) {
                        var newNumber1 = Math.floor(Math.random() * maxRange);  // Random int for x
                        var newNumber2 = Math.floor(Math.random() * maxRange);  // Random int for y
                        dataset.push([newNumber1, newNumber2]);  // Add new numbers to array
                    }

// 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 circles
                    svg.selectAll("circle")
                        .data(dataset)  // Update with new data
                        .transition()  // Transition from old to new
                        .duration(1000)  // Length of animation
                        .each("start", function() {  // Start animation
                            d3.select(this)  // 'this' means the current element
                                .attr("fill", "red")  // Change color
                                .attr("r", 5);  // Change size
                        })
                        .delay(function(d, i) {
                            return i / dataset.length * 500;  // Dynamic delay (i.e. each item delays a little longer)
                        })
                        //.ease("linear")  // Transition easing - default 'variable' (i.e. has acceleration), also: 'circle', 'elastic', 'bounce', 'linear'
                        .attr("cx", function(d) {
                            return xScale(d[0]);  // Circle's X
                        })
                        .attr("cy", function(d) {
                            return yScale(d[1]);  // Circle's Y
                        })
                        .each("end", function() {  // End animation
                            d3.select(this)  // 'this' means the current element
                                .transition()
                                .duration(500)
                                .attr("fill", "black")  // Change color
                                .attr("r", 2);  // Change radius
                        });

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

// Update Y Axis
                        svg.select(".y.axis")
                            .transition()
                            .duration(100)
                            .call(yAxis);
                });
 
  </script>
  </body>
</html>

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

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