Honeycomb map

The code for this example can be used in the Markdown visualization to create a stylized map of the United States.

Setup

This example requires your data be sorted alphabetically by state name, as individual cell positions are referenced to set the cell color. This dataset did not, unfortunately, include Hawaii.

Depending on your data, you may need to manually adjust cell references to ensure that the value for coloring is correctly assigned.

Col	Name	Description or formula
A	State	must be sorted A to Z
B	Users Count	value for color coding
C	Categorize values (`calc_1`)	=IF(B1 > (0.8 * MAX(B:B)), "p80", IF(B1 > (0.6 * MAX(B:B)), "p60", IF(B1 > (0.4 * MAX(B:B)), "p40", IF(B1 > (0.2 * MAX(B:B)), "p20", "p0"))))

Example code

<style>
.honeycomb {
  --hc-width: 40px;
  --hc-height: calc(1.1547 * var(--hc-width)); /* 1.1547 ~= 2/sqrt(3) */
  --hc-gap: 4px;

  width: 552px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;

  & li {
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--hc-gap);
    margin-top: calc(var(--hc-height) / -6);
  }
  & li:nth-of-type(2n) {
    margin-left: calc(var(--hc-width) / 2 + var(--hc-gap) / 2);
  }
  & li:first-of-type {
    margin-top: 0;
  }

  & .hex {
    box-sizing: content-box;
    width: var(--hc-width);
    height: var(--hc-height);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--color-border1);
  }
  & .hex:empty {
    background-color: transparent;
  }

  & li.hc-legend {
    margin-top: 0;
    padding-block: var(--size8) var(--size2);
    gap: var(--size6);
    justify-content: center;

    & > div {
      display: flex;
      flex-direction: row;
      gap: var(--size2);
      align-items: center;
      font-size: var(--font-xs);
    }

    & .hc-legend-swatch {
      display: block;
      border-radius: var(--radius-sm);
      width: var(--size4);
      height: var(--size4);
    }
  }
  & .p80 { background-color: #44337D; color: white; }
  & .p60 { background-color: #306C8C; color: white; }
  & .p40 { background-color: #219D8A; color: white; }
  & .p20 { background-color: #63C960; color: #333; }
  & .p0  { background-color: #D7E225; color: #333;  }
  & .nodata {background-color: var(--color-border2); }
}

</style>
<ul class="honeycomb">
  <li id="row1">
    <div class="hex {{result.1.calc_1.value}}">AK</div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex {{result.18.calc_1.value}}">ME</div>
  </li>
  <li id="row2">
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex {{result.44.calc_1.value}}">VT</div>
    <div class="hex {{result.28.calc_1.value}}">NH</div>
  </li>
  <li id="row3">
    <div class="hex"></div>
    <div class="hex {{result.46.calc_1.value}}">WA</div>
    <div class="hex {{result.25.calc_1.value}}">MT</div>
    <div class="hex {{result.33.calc_1.value}}">ND</div>
    <div class="hex {{result.22.calc_1.value}}">MN</div>
    <div class="hex {{result.48.calc_1.value}}">WI</div>
    <div class="hex"></div>
    <div class="hex {{result.21.calc_1.value}}">MI</div>
    <div class="hex"></div>
    <div class="hex {{result.31.calc_1.value}}">NY</div>
    <div class="hex {{result.20.calc_1.value}}">MA</div>
    <div class="hex {{result.38.calc_1.value}}">RI</div>
  </li>
  <li id="row4">
    <div class="hex"></div>
    <div class="hex {{result.11.calc_1.value}}">ID</div>
    <div class="hex {{result.49.calc_1.value}}">WY</div>
    <div class="hex {{result.40.calc_1.value}}">SD</div>
    <div class="hex {{result.14.calc_1.value}}">IA</div>
    <div class="hex {{result.12.calc_1.value}}">IL</div>
    <div class="hex {{result.13.calc_1.value}}">IN</div>
    <div class="hex {{result.34.calc_1.value}}">OH</div>
    <div class="hex {{result.37.calc_1.value}}">PA</div>
    <div class="hex {{result.29.calc_1.value}}">NJ</div>
    <div class="hex {{result.6.calc_1.value}}">CT</div>
    <div class="hex"></div>
  </li>
  <li id="row5">
    <div class="hex"></div>
    <div class="hex {{result.36.calc_1.value}}">OR</div>
    <div class="hex {{result.27.calc_1.value}}">NV</div>
    <div class="hex {{result.5.calc_1.value}}">CO</div>
    <div class="hex {{result.26.calc_1.value}}">NE</div>
    <div class="hex {{result.24.calc_1.value}}">MO</div>
    <div class="hex {{result.16.calc_1.value}}">KY</div>
    <div class="hex {{result.47.calc_1.value}}">WV</div>
    <div class="hex {{result.9.calc_1.value}}">DC</div>
    <div class="hex {{result.19.calc_1.value}}">MD</div>
    <div class="hex {{result.7.calc_1.value}}">DE</div>
    <div class="hex"></div>
  </li>
  <li id="row6">
    <div class="hex"></div>
    <div class="hex {{result.4.calc_1.value}}">CA</div>
    <div class="hex {{result.43.calc_1.value}}">UT</div>
    <div class="hex {{result.30.calc_1.value}}">NM</div>
    <div class="hex {{result.15.calc_1.value}}">KS</div>
    <div class="hex {{result.3.calc_1.value}}">AR</div>
    <div class="hex {{result.41.calc_1.value}}">TN</div>
    <div class="hex {{result.39.calc_1.value}}">SC</div>
    <div class="hex {{result.32.calc_1.value}}">NC</div>
    <div class="hex {{result.45.calc_1.value}}">VA</div>
    <div class="hex"></div>
    <div class="hex"></div>
  </li>
  <li id="row7">
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex {{result.2.calc_1.value}}">AZ</div>
    <div class="hex {{result.36.calc_1.value}}">OK</div>
    <div class="hex {{result.17.calc_1.value}}">LA</div>
    <div class="hex {{result.23.calc_1.value}}">MS</div>
    <div class="hex {{result.1.calc_1.value}}">AL</div>
    <div class="hex {{result.10.calc_1.value}}">GA</div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
  </li>
  <li id="row8">
    <div class="hex nodata">HI</div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex {{result.42.calc_1.value}}">TX</div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex {{result.9.calc_1.value}}">FL</div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
  </li>
  <li class="hc-legend">
    <div><span class="hc-legend-swatch p80"></span><span class="hc-legend-label">Most</span></div>
    <div><span class="hc-legend-swatch p60"></span><span class="hc-legend-label">More</span></div>
    <div><span class="hc-legend-swatch p40"></span><span class="hc-legend-label">Medium</span></div>
    <div><span class="hc-legend-swatch p20"></span><span class="hc-legend-label">Less</span></div>
    <div><span class="hc-legend-swatch p0"></span><span class="hc-legend-label">Least</span></div>
    <div><span class="hc-legend-swatch nodata"></span><span class="hc-legend-label">No data</span></div>
  </li>
</ul>

Setup​

Example code​

Setup

Example code