Skip to content

Instantly share code, notes, and snippets.

@henryjameslau

henryjameslau/.block

Last active November 7, 2019 12:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save henryjameslau/5daca6e4667c41ae85959da614a37787 to your computer and use it in GitHub Desktop.
Save henryjameslau/5daca6e4667c41ae85959da614a37787 to your computer and use it in GitHub Desktop.
Download ZIP
Testing Oli's D3-hexjson
Raw
.block
license: gpl-2.0
Raw
Readme.md
Raw
example.hexjson
{
"layout":"odd-r",
"hexes":{
"C0R0":{"q":0,"r":0},
"C1R0":{"q":1,"r":0},
"C2R0":{"q":2,"r":0},
"C3R0":{"q":3,"r":0},
"C0R1":{"q":0,"r":1},
"C1R1":{"q":1,"r":1},
"C2R1":{"q":2,"r":1},
"C3R1":{"q":3,"r":1},
"C0R2":{"q":0,"r":2},
"C1R2":{"q":1,"r":2},
"C2R2":{"q":2,"r":2},
"C3R2":{"q":3,"r":2},
"C0R3":{"q":0,"r":3},
"C1R3":{"q":1,"r":3},
"C2R3":{"q":2,"r":3},
"C3R3":{"q":3,"r":3}
}
}
Raw
index.html
<html>
<head>
<style>
#vis {
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<div id="vis"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.rawgit.com/olihawkins/d3-hexjson/master/build/d3-hexjson.js"></script>
<script>
d3.json("example.hexjson", function(error, hexjson) {
// Set the size and margins of the svg
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 500 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
// Create the svg element
var svg = d3
.select("#vis")
.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 + ")");
// Render the hexes
var hexes = d3.renderHexJSON(hexjson, width, height);
// Bind the hexes to g elements of the svg and position them
var hexmap = svg
.selectAll("g")
.data(hexes)
.enter()
.append("g")
.attr("transform", function(hex) {
return "translate(" + hex.x + "," + hex.y + ")";
});
// Draw the polygons around each hex's centre
hexmap
.append("polygon")
.attr("points", function(hex) {return hex.points;})
.attr("stroke", "white")
.attr("stroke-width", "2")
.attr("fill", "#b0e8f0");
// Add the hex codes as labels
hexmap
.append("text")
.append("tspan")
.attr("text-anchor", "middle")
.text(function(hex) {return hex.key;});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment