Interactive hexgrid - attaching mouse events to SVG polygons
Based on original examples: of Oli Hawkin's D3-hexjson module, now with background grid.
forked from henryjameslau's block: Testing Oli's D3-hexjson
-
-
Save schluppeck/5a66e0209256ddb9131c31934e42b219 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":"even-r", | |
| "hexes": { | |
| "industry 1":{"q":0,"r":0}, | |
| "test":{"q":0,"r":1}, | |
| "client":{"q":1,"r":0}, | |
| "another":{"q":1,"r":1} | |
| } | |
| } |
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> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <div id="h2label"><h2 id="hexlabel"></h2></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> | |
| // variable to keep data in globale scope (for debugging) | |
| var dataset; | |
| d3.json("hexagonal-grid.hexjson", function(error, hexjson) { | |
| // global - by reference | |
| dataset = 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 a label | |
| var lab = d3.selectAll("#hexlabel") | |
| .text("test this"); | |
| // 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); | |
| var keys = hexes.map(function (d) {return d.key}); | |
| // Draw the background grid BEFORE the data | |
| // in current example this is complete obscured by data hexes | |
| // 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("class", "out"); | |
| // 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("class", "out") | |
| .on("mouseover", function(d,i) { | |
| d3.select(this).attr("class","in") | |
| .style("fill", "coral"); | |
| // and change text label | |
| lab.style("opacity", 1 ) | |
| .text( ":: " + keys[i] + " ::" ); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this) | |
| .attr("class","out") | |
| .style("fill","lightgray"); | |
| // reset text | |
| lab.text(""); | |
| }) | |
| .on("click", function (d) {console.log("clicked!")} ); | |
| // Add the codes for the data hexes as labels | |
| hexmap | |
| .append("text") | |
| .append("tspan") | |
| .attr("text-anchor", "middle") | |
| .text(function(hex) {return hex.key;}); | |
| hexgrid | |
| .append("polygon") | |
| .on("mouseover", function (d) {}) | |
| .on("mouseout", function (d) {}) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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
| h1, h2 { | |
| margin: 0; | |
| padding: 0; | |
| text-align: left; | |
| font-family: Menlo, code, monospace; | |
| } | |
| #vis { | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| font-family: Menlo, code, monospace; | |
| font-size: 12pt; | |
| } | |
| .in { | |
| fill: coral; | |
| stroke: gray; | |
| stroke-width: 3; | |
| } | |
| .out { | |
| fill: lightgray; | |
| stroke: darkgray; | |
| stroke-width: 2; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment