D3 Examples - Hexagonal cartogram of electorate results from 2011 New Zealand election.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Hexagonal Map of NZ General Electorate Party Wins 2011</title>
<style>
.hexagon {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
​
.hex-wrapper {
  display: table;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding:0;
  margin:0;
}
​
.hex-label {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  color: white;
  font-size: 12px;
  font-family: sans-serif;
  text-align: center;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.hexbin.v0.min.js?5c6e4f0"></script>
<script src="electorate_data.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
​
//map data
var mapdata = [
    '..','..','..','..','..','..','..','..','..','..','..','..','..',
    '..','..','..','..','..','..','..','01','02','..','..','..','..',
    '..','..','..','..','..','..','..','..','03','..','..','..','..',
    '..','..','..','..','..','..','..','04','05','06','..','..','..',
    '..','..','..','..','..','..','..','..','07','08','..','..','..',
    '..','..','..','..','..','..','..','09','10','11','..','..','..',
    '..','..','..','..','..','..','..','..','12','13','14','15','..',
    '..','..','..','..','..','..','..','16','17','18','19','..','..',
    '..','..','..','..','..','..','..','..','..','20','21','..','..',
    '..','..','..','..','..','..','..','..','..','22','23','..','..',
    '..','..','..','..','..','..','..','..','..','..','24','25','..',
    '..','..','..','..','..','..','..','..','..','26','27','28','29',
    '..','..','..','..','..','..','..','..','..','..','30','31','..',
    '..','..','..','..','..','..','..','..','..','32','33','34','35',
    '..','..','..','..','..','..','..','..','..','..','36','37','..',
    '..','..','..','..','..','..','..','..','..','38','39','..','..',
    '..','..','..','..','..','..','..','..','..','40','41','..','..',
    '..','..','..','..','..','..','..','..','42','43','..','..','..',
    '..','..','..','..','..','..','..','..','44','45','..','..','..',
    '..','..','..','..','48','49','..','46','47','..','..','..','..',
    '..','..','..','..','..','50','..','..','..','..','..','..','..',
    '..','..','..','51','52','53','..','..','..','..','..','..','..',
    '..','..','..','..','54','55','..','..','..','..','..','..','..',
    '..','..','..','56','57','..','..','..','..','..','..','..','..',
    '..','..','..','58','..','..','..','..','..','..','..','..','..',
    '..','..','59','..','..','..','..','..','..','..','..','..','..',
    '..','..','60','61','..','..','..','..','..','..','..','..','..',
    '..','62','..','..','..','..','..','..','..','..','..','..','..',
    '..','63','..','..','..','..','..','..','..','..','..','..','..'
];
​
var colors = {
    '': '#fff',
    'National Party': '#0776A0',
    'Labour Party': '#FF2C00',
    'ACT New Zealand': '#444',//'#FF8500',
    'United Future': '#444'//'#CD0074'
};
​
//svg sizes and margins
var margin = {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
}, 
width = 1200,
height = 2300;
//width = 960,
//height = 800;
​
//The number of columns and rows of the cartogram
var MapColumns = 13, MapRows = 30;
 
//The maximum radius the hexagons can have to still fit the screen
var hexRadius = d3.min([width/((MapColumns + 0.5) * Math.sqrt(3)),
   height/((MapRows + 1/3) * 1.5)]);
​
//Calculate the center positions of each hexagon 
var points = [];
for (var r = 0; r < MapRows; r++) {
    for (var c = 0; c < MapColumns; c++) {
        points.push([hexRadius * c * 1.75, hexRadius * r * 1.5]);
    }//for c
}//for r
​
//Create SVG element
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
//Set the hexagon radius
var hexbin = d3.hexbin()
            .radius(hexRadius);
​
var radius = d3.scale.sqrt()
    .domain([1, electorates.max_turnout])
    .range([1, hexRadius]);
​
//Draw the hexagons
var hex = svg.selectAll(".hexagon")
      .data(hexbin(points))
    .enter().append("path")
      .attr("class", "hexagon")
      .attr("d", function(d, i) {
        if (i<mapdata.length) {
          electorate = electorates.results[mapdata[i]];
          if ("total_votes_cast" in electorate) { return hexbin.hexagon(radius(electorate.total_votes_cast)); }
        }
        return hexbin.hexagon(radius(2000));
      })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .style("stroke", function (d, i) {
        if (i<mapdata.length) {
          electorate = electorates.results[mapdata[i]];
          if (electorate.party != '') {
            return colors[electorate.party];          };
        }
        return '#fff';
       })
      .style("stroke-width", "1px")
      .style("stroke-opacity", "0.5")
      .style("fill-opacity", function (d,i) {
        if (i>=mapdata.length) {return 1;};
        electorate = electorates.results[mapdata[i]];
        if (electorate.party == '') {return 0;}
        per = electorate.percentage_of_elected_candidate_votes_cast_in_electorate.replace('%', '');
        per = parseFloat(per);
        if (per > 60) {return 1;}
        else if (per > 50) {return 0.75;}
        else if (per > 40) {return 0.5}
        else {return 0.25};
      })
      .style("fill", function (d, i) {
        if (i<mapdata.length) {
          electorate = electorates.results[mapdata[i]];
          return colors[electorate.party];
        }
        return '#fff';
       });
​
//a second layer of hexagons for labels
var labels = svg.selectAll(".labels")
    .data(hexbin(points))
  .enter()
    .append("foreignObject");
​
//label box scale factor
var sf = 1.75;
​
var labelAttributes = labels
    .attr('width', hexRadius*sf)
    .attr('height', hexRadius*sf)
    .attr("x", function (d) { return d.x - hexRadius*sf/2; })
    .attr("y", function (d) { return d.y - hexRadius*sf/2; })
    .append("xhtml:body")
    .html(function(d, i) {
        if (i<mapdata.length) {
          electorate = electorates.results[mapdata[i]];
          if (electorate.party == '') {return '';};
          per = electorate.percentage_of_elected_candidate_votes_cast_in_electorate.replace('%', '');
          per = parseInt(per);
          return '<div class="hex-wrapper"><div class="hex-label">'
            + electorate.electoral_district + '<br/>'
            + '<small>' + electorate.party.substring(0,3) + ' ' + per + '%<small>'
            + '</div></div>';
        }
      });
  //jquery hack to set the label wrapper heights
  $('.hex-wrapper').height( hexRadius*sf );
</script>
</body>
</html>
    