Visually mismatching parent hex

[mugoosse]

I encountered a situation where the h3ToParent function returns a hexagon that does not visually seem to be the parent of the original hexagon.

import { h3ToGeoBoundary, h3ToParent } from "h3-js";

const hexAtRes12 = "8c393362a49d5ff";
const parentHexAtRes6 = h3ToParent("8c393362a49d5ff", 6); // "86393362fffffff"

const polygonRes12 = h3ToGeoBoundary(hexAtRes12, true);
const polygonRes6 = h3ToGeoBoundary(parentHexAtRes6, true);

When rendering these polygons with mapbox gl we get:

I expected the neighbor hex to the bottom left of the yellow hex to be the parent hex of the green hex at resolution 12.

There are also examples the other way around. The res 12 hex "8c39336212687ff" is visually a child of the above res 6 hex "86393362fffffff" but in reality, the h3ToParent function returns "863933627ffffff" as parent at res 6.

Is this behaviour to be expected? If so, how can it be explained?

[nrabinowitz]

This behavior is expected. Hexagons cannot perfectly contain their children, so at each remove from a given ancestor there will be a fixed percentage of the area of the descendants that is not within the bounds of the ancestor. I made a notebook to explain this with an interactive example: https://observablehq.com/@nrabinowitz/h3-hierarchical-non-containment

[dfellis]

Oh, absolutely expected.

You can see the source of the situation here:

Each child layer approximately fits 7 child hexagons within it, rotating back and forth by approx 17 degrees, as I recall?

This is because you cannot subdivide a hexagon into hexagons like you can squares and triangles, and this is just one approximation of doing so.

This produces a fractal-looking result if you plot the outline of all of the children of a particular hexagon at greater and greater deltas between the parent and the (great-great---)-grandchildren.

For your example, it would look like this: