D3 Examples - D3.js - LabDay - 3

xxxxxxxxxx
 
<!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>
​
    