Résultats 2011

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Scatterplot</title>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <style type="text/css">
  
  body {
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
  }

h1 {
    font-size: 20px;
    margin: 0;
  }

p {
    font-size: 11px;
    margin: 10px 0 0 0;
  }

svg {
    background-color: white;
  }
  
  circle { 
    shape-rendering: crispEdges;
  }
   /* AJOUTÉ ceci pour donner l'illusion de barres aux nombres arrondis, car supprimé rangeRoundBands plus bas. */

circle:hover {   /* configure le mouse  */
    fill: #6d6d6d;
  } 
  
  .axis path,
  .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
  }
  
  .axis text {
    font-family: sans-serif;
    font-size: 11px;
  }

.tooltip {
  position: absolute;
  pointer-events: none;
  font: 12px sans-serif;
  background: white;
}

</style>

</head>

<body>

<h1>Participation électorale en 2011</h1>

<p>Taux par circonscription. Source: <a href="https://www.elections.ca">Élections Canada</a></p>

var w = 800;
  var h = 400;
  var padding = [ 20, 10, 30, 35 ];  //Top, right, bottom, left

var xScale = d3.scale.linear()  
                .range([ padding[3], w - padding[1] - padding[3] ]);
  
  var yScale = d3.scale.linear()  // écart entre les barres
            .range([ padding[0], h - padding[2] ]);  
            
            // enlevé rangeRoundBands, car arrondir causait trop d'espace entre le début du graphique et les barres.
            // Aussi, augmenté le padding à 0.2 pour espacer les barres.
  
  var xAxis = d3.svg.axis()
          .scale(xScale)
          .ticks(5)
          .orient("bottom");

var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left")
          .ticks(5)
          .tickFormat(function(d) {
                return d + " %";
              });

var svg = d3.select("body")
          .append("svg")
          .attr("width", w)
          .attr("height", h);

yScale.domain([ 
          d3.max(data, function(d) {
            return +d.tauxParticipation;
          }),
          d3.min(data, function(d) {
            return +d.tauxParticipation;
          })
        ]);
    
    var circles = svg.selectAll("circle")
          .data(data)
          .enter()
          .append("circle");

/*
Après avoir changé tous les "rect" par "circle",
modifié "x" pour "cx", "y" pour "cy"
Enlevé le height, changé le "width" pour "r"
Modifié le "r" de function(d) { return xScale(d.tauxParticipation);} par "3" - hardcodé
Modifié le "cx" hardcodé du padding pour une fonction calée sur le nb d'électeurs, qu'on va ensuite encapsulé dans le xScale (sinon, seulement valeurs absolues)
Modifié le "cy", fonction qui affichait la circonscription pour une fonction calée sur le taux de participation. Idem : encapsulé dans le yScale.
Changé widthScale pour xScale, parce qu'on ne parle plus de longueur de barres, idem pour heightScale. 
yScale : changé d'ordinal à linear, donc modifié rangeRoundBands pour seulement range + enlevé l'espace en extra entre les barres (0.2) à la fin du padding
Changé les xdomain et ydomain, y n'est plus sur le ".domain(data.map(function(d) { return d.circonscription; } ));", mais sur un d3.max. 
Modifié le padding : .range([padding[3], w - padding[1] ]);
Inversé le 0 et le d3.max dans le y domain pour partir de 0 dans l'axe.

Changé les ticks de y et x

Ajouté des transitions pour les cercles (cf fichier 3_transitions)

Les délais : 4_delay : trier les points, les afficher après un court délai, avec une fonction.
*/
    
    circles
      .attr("cx", function(d) {
        return xScale(d.electeurs);})
     .attr("cy", function(d) {
        return yScale(d.tauxParticipation);
      })
      .attr("r", 0.1)
      .attr("fill", "firebrick")
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d.circonscription + "<br>" + "Nb d'électeurs : " + d.electeurs + "<br>" + "Taux de participation : " +  d.tauxParticipation + " %")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

// transition : on fait le tri (function nécessite a et b pour comparer), puis on ajoute un délai et on fait la transition

circles
    .sort(function(a, b) {
        return d3.ascending(+a.electeurs, +b.electeurs);
    })
    .transition()
    .delay(function(d, i) {
        return i * 15;
    })      
    .duration(500)
    .attr("r", 3);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h - padding[2]) + ")")
    .call(xAxis)
  .append("text")
    .attr("class", "label")
    .attr("x", (w - 45))
    .attr("y", -6)
    .style("text-anchor", "end")
    .text("Nb d'électeurs");

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + padding[3] + ",0)")
    .call(yAxis)
  .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("x", -20)
    .attr("y", 5)
    .attr("dy", ".91em")
    .style("text-anchor", "end")
    .text("Taux de participation");

});
  
    </script>

</body>
</html>

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

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