Honeycomb map

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>

Getting started

Manage content

Analyze & build

Visualize & present

Deliver content

Model data

Manage integrations

Setup

Example code

​Setup

​Example code

Setup

Example code