Interactive hex grid

In a couple of posts on this site, Jon wrote a step-by-step guide on how to construct static and interactive Tile Grid Maps in Excel. Now, if at all possible, do yourself a favor and write up the steps you took in developing anything that is even remotely innovative … which I wish I would have done in this instance, since there unfortunately has been in excess of five months since I initially put this demonstration file together.

The basic premise of the method to develop a hexagon tile map in Excel is a scatterplot with a custom hexagon shape — custom in the sense I used the Shape tool within Excel to draw a hexagon of my own liking. Confidence intervals on the prevalence statistics are also included, and I discuss how these were approached below.

One state acts as a reference for all other states — meaning, its position is fixed, and all others are relative to its X-Y position. As Hawaii is closest to the original on a scatterplot, it is the reference state and its X-Y pairing is hard-coded in the yellow cells in columns G and H. The resulting values can be found in columns G and H.

interactive hex grid

You will probably need to play around with these values in order to get the map to display with spacing between tiles that meets your liking. These columns are the meat of what is displayed, but there are a few setup steps that needed to be performed before it all works. I am not absolutely certain these steps need be performed exactly as I delineate — I have not set aside time to test other methods — but they worked, so I describe them here.

Once I had all of the X-Y column pairings set up, I entered the X-Y values found in columns G and H for all of the data series columns, one data series at a time, so all of the states would show on the map. My first attempt to solve this was using VBA, which did work, but it resulted in a more complex file than may be desired by others. In any case, I essentially mimicked 1 within VBA: I created a loop that labeled every data point, and then looped over all data series you can download a text file with the VBA code here.

Once all of the scatterplot setup steps have been performed and the X-Y pairings formulae have been readied, the hexagon map is ready to view. For this file, however, I added a few additional features to capture some of the data nuances found in the original NPR article. Excellent post. I was looking for this particular information for a very long time. That was incredibly creative, thanks!

I combined the hex-grid operations of Amit Patel Red Blob Games with your display technique to create a hex-grid chart. Leave a Reply Cancel reply Your email address will not be published. Notify me of follow-up comments by email. Notify me of new posts by email. Upload image. Guests are limited to images that are no larger than 2MB, and to only jpeg, pjpeg, png file types. This site uses Akismet to reduce spam. Learn how your comment data is processed.

Hexagon Tile Map in Excel

May 5, Thoughts, comments, and all their brethren are more than welcomed.Recently I decided it would be neat if I could create hex-style game maps in Excel. It's kinda neat in that it standardizes the locations of hex tiles in such a way that you can select any range in one section of a sheet, paint some hex tiles, move to another section, paint some more hex tiles, and the layout and distance between the two hex filled sections is precisely spaced so that if you wanted to fill in those spaces with additional hexes the filler hexes would perfectly drop into the unused space.

Also, this draws the hexes in 3D and allows you to incorporate elevation into your hex maps. Pretty neat; and anyone who's familiar with the HeroScape 3D hex wargame will immediately appreciate the concept. Using the standard settings, with various color choices, I was able to fill every cell in the range A1:CK a massive map without a hiccup.

Total hex tile count in that case was hex tiles and no problems. Not sure why you'd even be getting an error on that sub. Painting the hexes shouldn't even make a call to that sub. All I'm doing is assigning that macro to the OnAction event of each hex tile shape but it shouldn't actually be triggered when painting tiles. Were you drawing the tiles on Sheet1?

Just seems odd The only time that macro should fire is after you've drawn some tiles and click on one of them Hi Yes I was using sheet 1 and this error was tripped when I clicked on a couple of tiles.

interactive hex grid

No other tiles seem to be a problem probably operator error:confused:. Does seem odd though that only a couple of the hex tile shapes would choke on the code to assign themselves as the ActiveHex. I wonder if the names of those tiles might be significant?

Do you happen to know the names of the tile s that caused a problem for you? This idea of clicking the tile to make it the ActiveHex was sort of a demonstration of how you could use a single bit of code assigned to every hex tile and still be able to differentiate which tile called the code. I was using it as a quick way to allow a map builder to set a hex tile as the ActiveHex and then adjust the elevation and depth, or get info on the ActiveHex. I did like the idea of defining an ActiveHex in a gaming engine allows me to use generic ActiveHex-based codeso I would like to get to the bottom of it.

Way cool Aaron. Just a note. I got some kinda untrapped VBA error that's blowin my mind. So, I developed this hex map editor for Excel-based wargames. Aaron Neat but I got an error at this line Code.

User Menu Login Registration. Your browser has JavaScript disabled.Tactical affairs such as movement are best handled on a grid, but the grid need not be a bunch of squares. This variant replaces the squares with hexagons. Hex grid paper and mats are available at many hobby stores. Characters simply move from hex to adjacent hex, changing direction as they like. To determine the distance between two hexagons, just count hexes by the shorter path in most cases, there will be a number of equally short paths.

Using a hex-based grid changes relatively little about the game, but poses a mapping dilemma for the GM. Most buildings and dungeons are based on degree and degree corners, so superimposing a hex-based grid on a structure leaves the GM with many partial hexagons, not all of which are big enough for a Medium creature. Depending on their size, creatures take up one or more hexagons on the grid, as shown in the accompanying diagram.

Spell areas change to accomodate the hex grid; refer to the diagram below. The hex-grid variant works well in conjunction with the facing variant, giving your d20 game more of the feel of a tactical skirmish wargame.

interactive hex grid

If this suits your gaming group, use the diagram below to determine front, flank, and rear areas according to the facing rules. The text on this page is Open Game Content, and is licensed for public use under the terms of the Open Game License v1. A copy of this License can be found at www.The documents generated here are considered to be in the Public Domain.

They can be used, shared, and republished without need of permission. If you like what I'm doing, support me on Patreon! If you're not on Patreon yet, I can't explain how much fun it is. When you get on Patreon, come back and support graph paper, and music, and all the other wonderful things!! Enter your email address:.

Cross Grid Stylish and Minimal. Triangle Dots Equilateral Triangles. Boxes Freestanding squares. Grid Dots The Classic. Hex Dot. Light Verticals Lined. Line Dots Belt and Suspenders. Iso-Dots Even rows are offset.

Simple Boxes X by Y boxes of a certain size. Accented Grid Bold every X Lines. Axonometric Optional X and Y Bisectors. Inverted Grid White Lines on a Color.

Multi-Weight 1 Color 3 Line Widths. Multi-Color 3 Colors 3 Line Widths. Knitting Grid X" wide by Y" tall. Octagonal 8 Sided. Triangle Equalateral. Variable Triangle What do you need? Hexagonal 6 Sided.

Brick Layout Bricks and Beadwork. Celtic Knot 1" Bold Lines.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. Will look something like this custom CSS applied :. More examples can be found from examples folder. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. Interactive hexagon grids with React. JavaScript Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again.

This branch is commits behind Hellenic:master. Pull request Compare. Latest commit Fetching latest commit…. Getting Started Install it via npm: npm install react-hexgrid. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window.How does the nature inspires us about the optimal geometry? The bees create their honeycombs with precision engineering, an array of prism-shaped cells with a perfectly hexagonal cross-section.

If you blow a layer of bubbles on the surface of water, they instantly rearrange into three-wall junctions with more or less equal angles of degrees between them. You will never find a raft of square bubbles. There is great explanation that the law of nature, which automatically optimized in a self-organized system, which approximate to hexagons, read more from Why Nature Prefers Hexagons I remembered the pleasure of reading The Computational Beauty of Nature.

Create Density Maps with a Hexagonal Grid in QGIS

The topics in the book taught me an important lesson, development can be divided into immediate needs for professional life and spiritual food for enriching life. Spatial Tessellation belongs to the spiritual side of my computing adventure, because spatial representation and reasoning are my on-going research thesis.

Hexagonal Grids

I sense the pure fun of the spatial computing and try to bring my understanding closer to nature. You will see a working interactive demo in this page ; subsequently you can checkout the demo code yourselves to play. On the practical side of tessellation, many strategy games have good reason to choose the hexagonal tiles as their game board. One of the main advantages is that the distance between the center of any tile and all its neighboring tiles is the same.

In term of strategy, this equidistance property enables consistent strategic moves see the right diagram below, move to all connected cells is 1 green arrow When comparing with the rectangular grid, the diagonal move is unfair because it takes 1 step but the equivalent orthogonal move takes 2 steps see the left diagram of rectangular grid, the diagonal move red arrow is equal taking 2 orthogonal moves green arrows. I think it would be interesting to cover a globe with hexagonal tiles and be able to map a geographic coordinate to a tile.

interactive hex grid

This article will simply use the results explained by Amit. Unlike the familiar Cartesian Coordinate System that we learned since our high school days, which has only 1 type of grid layout. Hexagon Coordinate System comes with 4 types of grid layout!

You are free to choose other hex layout type but the mathematics is slightly different. See later, the hexlib. D3 comes with a Hexagon Binning packageuseful for aggregating data into a coarser representation for display.

Rather than rendering a scatterplot of tens of thousands of points, bin the points into a few hundred hexagons to show the data. For all the terrain pixels that fall within the same hex bin, the average pixel value is calculated and mapped to a color, where the gradient map from red is low and blue is high altitude.

In order to support the interactivity, the three Javascript files are combined to map the screen coordinate to the corresponding hex grid coordinate.

Also, the location of the hex point is sent to display on a rotating globe. May be the interested reader can enhance the code?

The full demo source code can be checkout from the companion D3HexMap github repo. More explanation will come after the demonstration.This tutorial is the first part of a series about hexagon maps.

Many games use hex grids, especially strategy games, including Age of Wonders 3, Civilization 5, and Endless Legend. We will start with the basics, incrementally adding features until we end up with a complex hex-based terrain.

This tutorial assumes you have completed the Mesh Basics series, which starts with Procedural Grid. It has been created with Unity 5. The entire series progresses through multiple versions of Unity.

The final part is made with Unity Why use hexagons? If you need a grid, it makes sense to just use squares. Squares are indeed simple to draw and position, but they have a downside. Take a look at a single square in the grid.

Then look at its neighbors.

Interactive Hex World Map using D3

There are eight neighbors in total. Four can be reached by crossing an edge of the square. They are the horizontal and vertical neighbors. The other four can be reached by crossing a corner of the square.

These are the diagonal neighbors. What is the distance between the centers of adjacent square cells in the grid? If the edge length is 1, then the answer is 1 for the horizontal and vertical neighbors. The differences between the two kinds of neighbor lead to complications.

If you use discrete movement, how do you treat diagonal movement?