uk map

gistfile1.txt

(function() {
  'use strict';

  // map viewport dimensions
  var width = 460,
    height = 650;

  // create a scale of colours for each party, so we can map results to constituency segments
  var quantize = d3.scale.quantize()
    .domain([1, 11])
    .range(d3.range(11).map(function(i) {
      return "f" + i;
    }));
  
  // set up map projection, and position it.
  var projection = d3.geo.albers()
    .center([1.5, 55.2])
    .rotate([4.4, 0])
    .parallels([50, 50])
    .scale(3300)
    .translate([width / 2, height / 2]);
  var path = d3.geo.path().projection(projection);
  
  // add d3 zoom behaviour to map container.
  var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);
  
  // set up SVG, viewport and clipping mask for map
  var svg = d3.select('#electionMap')
    .append('svg:svg')
    .attr('width', width)
    .attr('height', height)
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .attr('perserveAspectRatio', 'xMinYMid')
    .attr('id', "sizer-map")
    .attr('class', "sizer")
    .call(zoom);
  var main = svg.append("g")
    .attr('transform', 'translate(0,0)')
    .attr('width', width)
    .attr('height', height)
    .attr('class', 'main');
  var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "overlay")
    .style("fill", "none")
    .style("pointer-events", "all");
  var mapContainer = svg.append("g");
  var tooltip = d3.select("#tooltipContainer")
    .append("div")
    .attr("class", "tooltip");
  tooltip.html(" ");

  // Barchart
  var barchart = d3.select("#tooltipContainer")
    .append("div")
    .attr("class", "charty")
    .style("opacity", 0)
    .style("height", 0);

  //Width and height of barchart
  var w = 260,
    h = 200,
    barPadding = 1;

  //Create bar chart
  var barsvg = barchart
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr('viewBox', '0 0 ' + w + ' ' + h)
    .attr('perserveAspectRatio', 'xMinYMid')
    .attr('id', "sizer-result")
    .attr('class', "sizer");

  // use queue function to load map and results data asynchronously, then call ready function when done.
  queue()
    .defer(d3.json, "https://s3-us-west-2.amazonaws.com/s.cdpn.io/535422/map.json")
    .defer(d3.json, "https://s3-us-west-2.amazonaws.com/s.cdpn.io/535422/election-data.json")
    .await(ready);

  var uk, mapFeatures, boundaries, constituency;

  function ready(error, uk, boundaries) {
    mapFeatures = topojson.feature(uk, uk.objects.subunits).features;
    var map = mapContainer.append("g").attr("class", "subunits").selectAll("path").data(mapFeatures),
      constituency = boundaries.data,
      legend,
      content,
      conservativesCount = 0,
      labourCount = 0,
      ukipCount = 0,
      libCount = 0,
      greenCount = 0,
      plaidCount = 0,
      snpCount = 0,
      dupCount = 0,
      otherCount = 0,
      notCounted = 0;
    
    // count number of constituencies won by each party
    for (var i = 0; i < constituency.length; i++) {
      if (constituency[i].winner == 'Conservative') {
        conservativesCount++;
      } else if (constituency[i].winner == 'Labour') {
        labourCount++;
      } else if (constituency[i].winner == 'UKIP') {
        ukipCount++;
      } else if (constituency[i].winner == 'Liberal Democrat') {
        libCount++;
      } else if (constituency[i].winner == 'Green') {
        greenCount++;
      } else if (constituency[i].winner == 'Plaid Cymru') {
        plaidCount++;
      } else if (constituency[i].winner == 'Scottish National Party') {
        snpCount++;
      } else if (constituency[i].winner == 'Democratic Unionist Party') {
        dupCount++;
      } else if (constituency[i].winner == '0') {
        notCounted++;
      } else {
        otherCount++;
      }
    }

    // make legend
    var color = d3.scale.ordinal().range(["#0382AB", "#DA1502", "#722889", "#FDB218", "#7AB630", "#3C862D", "#F0DE4C", "#FF9900", "gray"]);
    color.domain(["Conservatives", "Labour", "UKIP", "Liberal Democrats", "Green Party", "Plaid Cymru", "Scottish National Party", "Democratic Unionist Party", "Other"]);

    /* legend = d3.select("#electionLegend")
      .append("svg:svg")
      .attr("width", 260)
      .attr("height", 200)
      .attr('viewBox', '0 0 260 200')
      .attr('perserveAspectRatio', 'xMinYMid')
      .attr('id', "sizer-legend")
      .attr('class', "legend")
      .selectAll("g")
      .data(color.domain().slice())
      .enter().append("g")
      .attr("transform", function(d, i) {
        return "translate(0," + i * 20 + ")";
      });

    legend.append("rect")
      .attr("width", 15)
      .attr("height", 15)
      .style("fill", color);

    legend.append("text")
      .attr("x", 30)
      .attr("y", 6)
      .attr("dy", ".5em")
      .text(function(d) {
        return d;
      });

    legend.append("text")
      .attr("x", 260)
      .attr("y", 6)
      .attr("dy", ".5em")
      .attr("style", "font-weight: bold")
      .attr("text-anchor", "end")
      .text(function(d) {
        switch (d) {
          case "Conservatives":
            return conservativesCount;
          case "Labour":
            return labourCount;
          case "UKIP":
            return ukipCount;
          case "Liberal Democrats":
            return libCount;
          case "Green Party":
            return greenCount;
          case "Plaid Cymru":
            return plaidCount;
          case "Scottish National Party":
            return snpCount;
          case "Democratic Unionist Party":
            return dupCount;
          case "Other":
            return otherCount;
        }
      }); */

    map.enter()
      .append("path")
      .attr("class", function(d, i) {
        var badge = "f0";
        if (typeof constituency[d.properties.id - 1] === "undefined") {
          badge = "f0";
        } else {
          if (constituency[d.properties.id - 1].id === "108") {
            badge = "f8";
          } else {
            badge = "f" + constituency[d.properties.id - 1].colour;
          }
        }
        return "ward ward-" + d.properties.id + " " + badge;
      })
      .attr("d", path);

    //Show/hide tooltip
    map.on("mousemove", function(d, i) {
        tooltip.style("opacity", 1);
        if (constituency[d.properties.id - 1].winner != "0") {
          d3.select(".charty").style("opacity", 1).style("height", "auto");
          content = "<h2>" + constituency[d.properties.id - 1].constit + "</h2>" +
            "<p><strong class='f" + constituency[d.properties.id - 1].colour + "'>" +
            (
              constituency[d.properties.id - 1].winner != constituency[d.properties.id - 1].previous_winner ? "Won" : "Held"
            ) + " by " +
            (
              (
                constituency[d.properties.id - 1].winner == "Liberal Democrat" || constituency[d.properties.id - 1].winner == "Conservative"
              ) ?
              constituency[d.properties.id - 1].winner + "s" : constituency[d.properties.id - 1].winner
            ) + "</strong>" +
            (
              constituency[d.properties.id - 1].winner != constituency[d.properties.id - 1].previous_winner ? "<strong> from " +
              (
                (
                  constituency[d.properties.id - 1].previous_winner == "Liberal Democrat" || constituency[d.properties.id - 1].previous_winner == "Conservative"
                ) ?
                constituency[d.properties.id - 1].previous_winner + "s" : constituency[d.properties.id - 1].previous_winner
              ) + "</strong>" : ""
            ) + "<br/><span>Votes:</span> <strong>" + constituency[d.properties.id - 1].votes + "</strong></p>";

          if (constituency[d.properties.id - 1].id === "108") {
            content = "<h2>" + constituency[d.properties.id - 1].constit + "</h2>" + "<p><strong class='f8'>Held by Speaker</strong><br/><span>Votes:</span> <strong>" + constituency[d.properties.id - 1].votes + "</strong></p>";
          }
          tooltip.html(content);

          var partyData = [{
            "party": "CON",
            "result": parseInt(constituency[d.properties.id - 1].con)
          }, {
            "party": "LAB",
            "result": parseInt(constituency[d.properties.id - 1].lab)
          }, {
            "party": "LIB",
            "result": parseInt(constituency[d.properties.id - 1].lib)
          }, {
            "party": "UKIP",
            "result": parseInt(constituency[d.properties.id - 1].ukip)
          }, {
            "party": "GREEN",
            "result": parseInt(constituency[d.properties.id - 1].grn)
          }];
          if (constituency[d.properties.id - 1].id === "108") {
            partyData = [{
              "party": "SPEAKER",
              "result": parseInt(constituency[d.properties.id - 1].con)
            }, {
              "party": "LAB",
              "result": parseInt(constituency[d.properties.id - 1].lab)
            }, {
              "party": "LIB",
              "result": parseInt(constituency[d.properties.id - 1].lib)
            }, {
              "party": "UKIP",
              "result": parseInt(constituency[d.properties.id - 1].ukip)
            }, {
              "party": "GREEN",
              "result": parseInt(constituency[d.properties.id - 1].grn)
            }];
          }
          var whatregion = constituency[d.properties.id - 1].region;

          switch (whatregion) {
            case "Wales":
              partyData.push({
                "party": "PC",
                "result": parseInt(constituency[d.properties.id - 1].pc)
              });
              break;
            case "Scotland":
              partyData.push({
                "party": "SNP",
                "result": parseInt(constituency[d.properties.id - 1].snp)
              });
              break;
            case "Northern Ireland":
              partyData.push({
                "party": "DUP",
                "result": parseInt(constituency[d.properties.id - 1].dup)
              });
              break;
          }
          partyData.push({
            "party": "OTHER",
            "result": parseInt(constituency[d.properties.id - 1].others)
          });

          var SortByResult = function(x, y) {
            return y.result - x.result;
          };

          var max = d3.max(partyData, function(d) {
            return d.result;
          });

          var barx = d3.scale.linear().domain([0, max]).range([0, 160]);
          var winner = constituency[d.properties.id - 1].colour;
          if (constituency[d.properties.id - 1].id === "108") {
            winner = 8;
          }

          barsvg.attr("width", w).attr("height", h).selectAll("rect")
            .data(partyData.sort(SortByResult).filter(function(d) {
              return d.result !== 0;
            }))
            .enter()
            .append("rect")
            .attr("x", 100)
            .attr("y", function(d, i) {
              return i * (h / partyData.length);
            })
            .attr("width", function(d, i) {
              return barx(d.result);
            })
            .attr("height", h / partyData.length - barPadding)
            .attr("class", function(d, i) {
              if (i < 1) {
                return "f" + winner;
              } else {
                return "lightbar";
              }
            });

          barsvg.selectAll("text")
            .data(partyData.sort(SortByResult).filter(function(d) {
              return d.result !== 0;
            }))
            .enter()
            .append("text")
            .text(function(d) {
              return d.party + ": " + d.result;
            })
            .attr("text-anchor", "left")
            .attr("x", function(d) {
              return 1;
            })
            .attr("y", function(d, i) {
              return i * (h / partyData.length - barPadding) + 20;
            })
            .attr("font-family", "Arial, Helvetica, sans-serif")
            .attr("font-size", "12px")
            .attr("fill", "black");

        } else {
          content = "<h2>" + constituency[d.properties.id - 1].constit + "</h2>" + "<p><strong>Previously held by " + ((constituency[d.properties.id - 1].previous_winner == "Liberal Democrat" || constituency[d.properties.id - 1].previous_winner == "Conservative") ? constituency[d.properties.id - 1].previous_winner + "s" : constituency[d.properties.id - 1].previous_winner) + "</strong></p>";
          d3.select(".charty").style("opacity", 0);
          tooltip.html(content);
        }

        var badge = "f0";
        if (!isNaN(constituency[d.properties.id - 1].colour)) {
          if (constituency[d.properties.id - 1].id === "108") {
            badge = "f8";
          } else {
            badge = "f" + constituency[d.properties.id - 1].colour;
          }
        }
        d3.select("#tooltipContainer h2").attr("class", badge);
      })
      .on("mouseout", function(d) {
        tooltip.html(" ");
        d3.select(".charty").style("height", 0);
        barsvg.attr("width", 0).attr("height", 0);
        barsvg.selectAll("rect,text").remove();
      });
  }

  function zoomed() {
    var t = d3.event.translate,
      s = d3.event.scale;
    t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s) - 150 * s, t[0]));
    t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
    zoom.translate(t);
    mapContainer.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
  }

  /* this code automatically resizes the content according to the viewport dimensions. It has been commented out for Codepen, but can be used elsewhere.
  var resizeMap = $("#sizer-map"),
    aspectMap = resizeMap.width() / resizeMap.height(),
    containerResizeMap = resizeMap.parent(),
    resizeLegend = $("#sizer-legend"),
    aspectLegend = resizeLegend.width() / resizeLegend.height(),
    containerResizeLegend = $("#electionLegend");

  $(window).on("resize", function() {
    var targetContainerResizeMapWidth = containerResizeMap.width();
    resizeMap.attr("width", targetContainerResizeMapWidth);
    resizeMap.attr("height", Math.round(targetContainerResizeMapWidth / aspectMap));
    var targetContainerResizeLegendWidth = containerResizeLegend.width();
    resizeLegend.attr("width", targetContainerResizeLegendWidth);
    resizeLegend.attr("height", Math.round(targetContainerResizeLegendWidth / aspectLegend));
  }).trigger("resize");
  */
}());