D3 Examples - scatterplot

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: ScatterPlot</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <p>Click!</p>
    
        <script type="text/javascript">
​
            var w = 500;
            var h = 300;
            var padding = 30;
            
            var dataset = [];                                           
            var numDataPoints = 50;                                     
            var maxRange = Math.random() * 1000;                        
            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 xScale = d3.scaleLinear()
                                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                                 .range([padding, w - padding * 2]);
​
            var yScale = d3.scaleLinear()
                                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                                 .range([h - padding, padding]);
​
            var xAxis = d3.axisBottom()
                              .scale(xScale)
                              .ticks(5);
​
            var yAxis = d3.axisLeft()
                              .scale(yScale)
                              .ticks(5);
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            svg.append("clipPath")
                .attr("id", "chart-area")
                .append("rect")
                .attr("x", padding)
                .attr("y", padding)
                .attr("width", w - padding * 3)
                .attr("height", h - padding * 2);
​
            svg.append("g")
               .attr("id", "circles")
               .attr("clip-path", "url(#chart-area)")
               .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);
            
            
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - padding) + ")")
                .call(xAxis);
            
            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding + ",0)")
                .call(yAxis);
​
            d3.select("p")
                .on("click", function() {
​
                    
                    var numValues = dataset.length;                             
                    var maxRange = Math.random() * 1000;                    
                    dataset = [];                                               
                    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]; })]);
​
                    svg.selectAll("circle")
                       .data(dataset)
                       .transition()
                       .duration(1000)
                       .on("start", function() {
                           d3.select(this)
                             .attr("fill", "red")
                             .attr("r", 7);
                       })
                       .attr("cx", function(d) {
                            return xScale(d[0]);
                       })
                       .attr("cy", function(d) {
                            return yScale(d[1]);
                       })
                       .on("end", function() {
                           d3.select(this)
                             .transition()
                             .duration(1000)
                             .attr("fill", "black")
                             .attr("r", 2);
                       });
​
                    svg.select(".x.axis")
                        .transition()
                        .duration(1000)
                        .call(xAxis);
                    
                    svg.select(".y.axis")
                        .transition()
                        .duration(1000)
                        .call(yAxis);
​
                });
            
        </script>
    </body>
</html>
    