This repo is a companion demo for the article on Interactive Hex World Map using D3 http://bennycheung.github.io/interactive-hex-world-map-using-d3
We wonder if marrying a hexagonal tile system with the traditional geographic system (longitude/latitude) will provide a better reasoning and visual perception.
Go into D3HexMap directory,
python -m SimpleHttpServer
python3 -m http.server
or use any Http server to serve this site.
Navigate from the browser to http://localhost:8000 (default port is 8000)
to see the main page index.html
.
Then you should see the following,
The hexagonal representation and mathematic functions are implemented in hexlib.js
,
which is essentially Amit's Hex Grid implementation, details are here https://www.redblobgames.com/grids/hexagons/implementation.html
The hex grid interactivity is provided by hexlib_ui.js
,
which is carefully extracted and cleaned up from the hexagon explanation page at http://www.redblobgames.com/grids/hexagons.html,
making the code has minimal dependencies so that the script can be easily reused on other pages.
The makeGridDiagram(svg, cubes)
will take,
The hex grid diagram is later called with addHexCoordinates()
from hexglobe.js
function makeHexOddR()
;
this is how the interactivity of the mouse movement is detected.
If the mouse is over the hex grid,
the selected (row,column) cells are classed with highlighting, and the globe's updateGlobe()
function is called with the selected cell (lon, lat) for the globe rotation and view.
Finally with the support of previous routines,
the hexglobe.js
adds a set of convenience functions to build the interactive hex grid and globe for the visualization. They are briefly described here,
makeHexOddR(svg, hexsize, width, height)
screenToLonLat(grid_odd_r, screenPoint)
hexToLonLatHex(grid_odd_r, hex)
hexWorldGrid(grid_odd_r)
makeHexBinMap(grid_odd_r, hexbin_id, hexsize, image_url, width, height)
The globe is constructed from world-110m.json
topojson file, then the hex grid is projected onto the globe surface. A timer is setup to check if the globe's projection has been updated; consequently, the global will be rotated and redrawn to center at the given (lon, lat) location.