Scatterplot Updated

Browse more D3js Examples
<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
    .axis path,
    .axis line {
        stroke: teal;
        shape-rendering: crispEdges;
    }
    .axis text {
        font-family: Optima, Futura, sans-serif;
        font-weight: bold;
        font-size: 14px;
        fill: teal;
    }
</style>
<body>
<p>Click here to generate as many circles</p>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

//var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150]];

var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;

for(i = 0; i < numDataPoints; i++) {
    var newNumber1 = Math.floor(Math.random() * xRange);
    var newNumber2 = Math.floor(Math.random() * yRange);
    dataset.push([newNumber1, newNumber2]);
}

var w = 500;
var h = 300;
var padding = 30;

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 aScale = d3.scaleSqrt()
                .domain([0, d3.max(dataset, function(d){
                    return d[1];
                })])
                .range([0, 10]);

//Define X axis
var xAxis = d3.axisBottom()
            .scale(xScale)
            .ticks(5);
            //.tickValues([0, 100, 250, 600]);

//Define Y axis            
var yAxis = d3.axisLeft()
            .scale(yScale)
            .ticks(5);


var svg = d3.select("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", "circle")
    .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", function(d) {
        //return aScale(d[1]);
        return 2;
    });

// svg.selectAll("text")
//     .data(dataset)
//     .enter()
//     .append("text")
//     .attr("x", function(d) {
//         return xScale(d[0]);
//     })
//     .attr("y", function(d) {
//         return yScale(d[1]);
//     })
//     .text(function(d) {
//         return d[0] + "," + d[1];
//     })
//     .attr("font-family", "sans-serif")
//     .attr("font-size", "11px")
//     .attr("fill", "red");

//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);
    
d3.select("p")
    .on("click", function() {
        
        var dataset = [];
        var xRange = Math.random() * 1000;
        var yRange = Math.random() * 1000;
        
        for(i = 0; i < numDataPoints; i++) {
            var newNumber1 = Math.floor(Math.random() * xRange);
            var newNumber2 = Math.floor(Math.random() * yRange);
            dataset.push([newNumber1, newNumber2]);
        }
        
        // 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)
            .transition()
            .duration(1000)
            .on("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]);
            })
            .on("end", function() {
                d3.select(this)
                    .transition()
                    .duration(1000)
                    .attr("fill", "black")
                    .attr("r", 2);
            });
            // .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>
Scatterplot Updated

Follow

Newsletter
