D3-hexjson by Oli Hawkins with background grid

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

// 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>

Updated missing url https://cdn.rawgit.com/olihawkins/d3-hexjson/master/build/d3-hexjson.js to https://cdn.jsdelivr.net/gh/olihawkins/d3-hexjson/build/d3-hexjson.js

https://d3js.org/d3.v4.min.js

https://cdn.rawgit.com/olihawkins/d3-hexjson/master/build/d3-hexjson.js