Skip to content
Get Pro
Distribution

Hexbin

A few thousand points binned into hexagons and drawn on a canvas, with SVG axes, keyboard and states on top.

$149 once · every Pro piece

Customize

Counts climb the grey ladder (or, opt-in, the blackbody heat ramp) in five levels that stop short of the accent, so the single densest hexagon is the only one that burns at accent intensity. On entry the field blooms outward from that hot cell. Hover a hexagon and it lifts with its count and share while its level stays forward and the rest step back; the levels legend isolates a level the same way.

Install

npx shadcn@latest add @obsyde/hexbin

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Hexbin } from '@/components/obsyde/ember/hexbin/Hexbin';

export function Example() {
  return (
    <Hexbin ramp="mono" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/hexbin/Hexbin.tsxcomponent
  • ember/hexbin/hexbin.cssstyles
  • ember/hexbin/HexbinDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
pointsPointsnumber3000
sizeHex sizenumber10
rampRamp'heat' | 'mono''mono'
latticeLatticebooleanfalse
legendLegend'levels' | 'none''levels'
tooltipTooltip'panel' | 'none''panel'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
revealReveal'bloom' | 'none''bloom'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber320
seedSeednumber3