Example of Oli Hawkin's D3-hexjson module, now with background grid.
forked from henryjameslau's block: Testing Oli's D3-hexjson
-
-
Save stirno/d4a27fa2ef3e2c9cf5e5c392e6cd7c19 to your computer and use it in GitHub Desktop.
D3-hexjson by Oli Hawkins with background grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-2.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "layout":"odd-r", | |
| "hexes": { | |
| "Q0R0":{"q":0,"r":0}, | |
| "Q1R1":{"q":1,"r":1}, | |
| "Q1R2":{"q":1,"r":2}, | |
| "Q2R3":{"q":2,"r":3} | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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-grid.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 + ")"); | |
| // Create the grid hexes and render them | |
| var grid = d3.getGridForHexJSON(hexjson); | |
| var gridHexes = d3.renderHexJSON(grid, width, height); | |
| // Render the data hexes | |
| var hexes = d3.renderHexJSON(hexjson, width, height); | |
| // Draw the background grid BEFORE the data | |
| // Bind the grid hexes to g.grid elements of the svg and position them | |
| var hexgrid = svg | |
| .selectAll("g.grid") | |
| .data(gridHexes) | |
| .enter() | |
| .append("g") | |
| .attr("transform", function(hex) { | |
| return "translate(" + hex.x + "," + hex.y + ")"; | |
| }); | |
| // Draw the polygons around each grid hex's centre | |
| hexgrid | |
| .append("polygon") | |
| .attr("points", function(hex) {return hex.points;}) | |
| .attr("stroke", "#b0b0b0") | |
| .attr("stroke-width", "1") | |
| .attr("fill", "#f0f0f0"); | |
| // Bind the data hexes to g.data elements of the svg and position them | |
| var hexmap = svg | |
| .selectAll("g.data") | |
| .data(hexes) | |
| .enter() | |
| .append("g") | |
| .attr("transform", function(hex) { | |
| return "translate(" + hex.x + "," + hex.y + ")"; | |
| }); | |
| // Draw the polygons around each data 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 codes for the data hexes 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