D3 Examples - Electoral College Hexagon State Map

Hexagon Map as TopoJSON

This is a state hex map as topoJSON. The topoJSON uses GeoIDs (840 for the US, FIPS codes for state names). E.g. California is 84006. We added a REF or reference file for GeoIDs with full state names.

If you use it, it would be nice (but not necessary) if you can link back to Datamap

Hexagon Map designed with Tilegram by Pitch Interactive: https://pitchinteractiveinc.github.io/tilegrams/

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Electoral College Hexagon Map: US States</title>
<style>
​
.land {
  fill: #f23b17;
}
​
.bg {
  border-color: #ffffff;
}
​
.stateBorder {
  fill: #f23b17;
  stroke: #ffffff;
  stroke-width: 2px;
}
​
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
​
​
<script>
​
const width = 960;
const height = 500;
​
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("class", "bg");
​
​
d3.queue()
  .defer(d3.json, 'us_ec2016_state_hexagon.topojson')
  .defer(d3.csv, 'REF_us_state_2015.csv')
  .await(function(error, MAP, DATA) {
    if (error) throw error;
​
  /** Hex Projection
  * See: https://bl.ocks.org/mbostock/5663666
  * See 2D Affine Transformations: https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
  */
  function matrix(a, b, c, d, tx, ty) {
    return d3.geoTransform({
      point: function(x, y) { this.stream.point(a * x + b * y + tx, c * x + d * y + ty); }   
    });
  }
  
  const path = d3.geoPath()
    .projection(matrix(0.44, 0, 0, -0.44, -50, 500));
​
  // State Hexagons    
  const hex = topojson.feature(MAP, MAP.objects.us_ec2016_hexagon).features;
​
  svg.append("g")
    .attr("class", "stateBorder")
    .selectAll("path")   
    .data(hex)
    .enter()
    .append("path")
    .attr("d", path)
    .append('svg:title').text(function(d) {       
        return ("GeoID: " + d.properties.id); });
​
});
​
d3.select(self.frameElement).style("height", height + "px");
​
</script>
​
    