<form>
    <p>
      <label>Choisissez le facteur de déformation <select id="field"></select></label>
      <label>pendant la présidentielle de <select id="year"></select></label>
      <span id="status"></span>
    </p>
</form>

<div id="container">
<svg id="map"></svg>
</div>

<script>

      // cache le formulaire si l'explorateur ne fait pas du SVG
      if (!document.createElementNS) {
    document.getElementsByTagName("form")[0].style.display = "none";
      }

    /* déclaration des premières variables, notamment celles des champs de sélection
    les différentes "key" doivent correspondre aux colonnes du CSV 
    (%d s'adaptera à la valeur de #year) */ 
      var percent = (function() {
    var fmt = d3.format(".2f");
    return function(n) { return fmt(n) + "%"; };
      })(),
    fields = [
    {name: "Aucun", id: "none"},
    {name: "Abstention", id: "abs", key: "ABS%d", format: percent},
     {name: "Vote FN", id: "fn", key: "FN%d", format: percent},
      ],
      years = [2012, 2007,2002,1995], 
       fieldsById = d3.nest()
    .key(function(d) { return d.id; })
    .rollup(function(d) { return d[0]; })
    .map(fields),
      field = fields[0],
      year = years[0],
      colorsFN = colorbrewer.Greys[8];
      var colorFN = d3.scale.quantize().range(colorsFN).domain([0,25]);

      colorsAbs = colorbrewer.Reds[8];
      var colorAbs = d3.scale.quantize().range(colorsAbs).domain([0,45]);

       var body = d3.select("body");

    // paramètre la navigation dans le champ #field
     var fieldSelect = d3.select("#field")
    .on("change", function(e) {
      field = fields[this.selectedIndex];
      update();
    });

      fieldSelect.selectAll("option")
    .data(fields)
    .enter()
    .append("option")
      .attr("value", function(d) { return d.id; })
      .text(function(d) { return d.name; });

    // paramètre de la même manière la nav' dans le champ #year

      var yearSelect = d3.select("#year")
    .on("change", function(e) {
      year = years[this.selectedIndex]; 
      update();
    });

      yearSelect.selectAll("option")
    .data(years)
    .enter()
    .append("option")
      .attr("value", function(y) { return y; })
      .text(function(y) { return y; })

    // déclaration de la carte

       var map = d3.select("#map"),
      zoom = d3.behavior.zoom()
      .translate([-38, 32])
       .scale(.94)
       .scaleExtent([0.5, 10.0])
       .on("zoom", updateZoom),
      layer = map.append("g")
    .attr("id", "layer"),
      states = layer.append("g")
    .attr("id", "states")
    .selectAll("path");

      updateZoom();

      function updateZoom() {
    var scale = zoom.scale();
    layer.attr("transform",
      "translate(" + zoom.translate() + ") " +
      "scale(" + [scale, scale] + ")");
      }

    // on passe à la déclaration de la projection et du cartogramme, notamment

      var projection = d3.geo.albers().origin([8.5, 45.7]).scale(2600).parallels([40, 52]),
       topology,
      geometries,
      rawData,
      dataById = {},
      carto = d3.cartogram()
    .projection(projection)
    .properties(function(d) {
      var c= dataById[d.id];

      return dataById[d.id];
    })
    .value(function(d) {
      return +d.properties[field.key.replace("%d",year)];
    });

    // on charge les polygones et les données

    d3.json("dpts_fr_topo.json", function(topo) {
    topology = topo;
    geometries = topology.objects.layer1.geometries;
      d3.csv("presidentielle_fn_abstention_final.csv", function(data) {
      rawData = data;   
      dataById = d3.nest()
        .key(function(d) { return d.id; })
        .rollup(function(d) { return d[0]; })
        .map(data);
      init();
     });
    });

    // on initialise la carte via les variables précédentes

    function init() {
    var features = carto.features(topology, geometries),
        path = d3.geo.path()
          .projection(projection);

    states = states.data(features)
      .enter()
      .append("path")
        .attr("class", "state")
       /* .attr("id", function(d) {
          return d.properties.id;
        }) */ 
        .attr("fill", "#fafafa")
        .attr("d", path);

       states.append("title");
    update();
      }
    // et on met à jour à chaque changement dans un champ de sélection

    function update() {
    if(field.key!=undefined){
    body.classed("updating", true);

      var key = field.key.replace("%d",year);
      var fmt = (typeof field.format === "function")
      ? field.format
      : d3.format(field.format || ","),
    value = function(d) {
    if(d.properties != undefined){
              return +d.properties[key];
        }else{ return NaN};
    };

    var values = states.data().map(value)
      .filter(function(n) {
        return !isNaN(n);
      })
      .sort(d3.ascending);

    lo = values[0],
    hi = values[values.length - 1];

    // normalise l'échelle en nombre positif
    var scale = d3.scale.linear()
      .domain([lo, hi])
      .range([1, 1000]);

    // dit au cartogramme d'utiliser les valeurs échelonnées
    carto.value(function(d) {
      return scale(value(d));
    });

    // génère les nouvelles caractéristiques, pré projetées
    var features = carto(topology, geometries).features;
    // met à jour les données
    states.data(features)
      .select("title")
    .text(function(d) {
      if(d.properties != undefined){
      return [d.properties.NAME, fmt(value(d))].join(": ");
      }
    });

    states.transition()
      .duration(750)
      .ease("linear")
      .attr("fill", function(d) {
    if(field.id=="fn"){
        return colorFN(value(d))
    }else{
        return colorAbs(value(d))
    }
      })
      .attr("d", carto.path);

    body.classed("updating", false);

    }else{
    var features = carto.features(topology, geometries);
    // met à jour les données
    states.data(features)
    path = d3.geo.path()
      .projection(projection);
    states.transition()
      .duration(750)
      .ease("linear")
      .attr("fill","#fafafa")
      .attr("d", path);

    }
}

</script>