D3.js - LabDay - 3 - Nuage de points

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
/*     body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } */
    
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

.axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
  </style>
</head>

<body>
  
  <script>
    
    // Largeur et hauteur
    var w = 600;
    var h = 400;
    var padding = 30;

// Ensemble dynamique de nombres aléatoires
    var dataset = [];
    var numDataPoints = 50;
    var xRange = Math.random() * 1000;
    var yRange = Math.random() * 1000;
    for (var i = 0; i < numDataPoints; i++) {
        var newNumber1 = Math.round(Math.random() * xRange);
        var newNumber2 = Math.round(Math.random() * yRange);
        dataset.push([newNumber1, newNumber2]);
    }

// ATTENTION ! en V4, scale().linear() devient scaleLinear()
    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]); // Inversion pour des y qui "montent"

var rScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d[1]; })])
        .range([3, 7]);
    
    var colorScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d[1]; })])
        .range(["#1137f2", "#ef0f00"]);

// Crée l'élément SVG
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

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", function(d) {
            return rScale(d[1]);
        })
    		// Ajout perso d'une couleur
        .attr("fill", function(d) {
            return colorScale(d[1]);
        })
        // Ajout perso des valeurs en tooltip
        .append("svg:title")
        .text(function(d) {
            return d[0] + "," + d[1];
        });

var xAxis = d3.axisBottom(xScale)
        .ticks(5);

// Créé l'axe X
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);

var yAxis = d3.axisLeft(yScale)
        .ticks(5);
    
    // Créé l'axe Y
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);

</script>
</body>

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