Skip to content
Get Pro
Composition

Treemap

A squarified treemap with 2px gaps, each cell a grey step by its value.

$149 once · every Pro piece

Customize

Point at a cell and it lifts while the readout rolls to its value and share; click a group to zoom in and every cell springs to its new rectangle while the rest fly out with the camera. The breadcrumb zooms back out. Options on the viz-kit: a group legend (hover isolates a group, click hides it and the others re-flow on springs, hold locks), a texture per group shared with the legend, round corners, a tooltip panel, an opt-in accent hover, keyboard reading and zoom, and loading and empty states.

Install

npx shadcn@latest add @obsyde/treemap

Needs your licence key · Get Pro

Usage

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

import { Treemap } from '@/components/obsyde/ember/treemap/Treemap';

export function Example() {
  return (
    <Treemap />
  );
}

Files

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

  • ember/treemap/Treemap.tsxcomponent
  • ember/treemap/treemap.cssstyles
  • ember/treemap/TreemapDemo.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/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
groupedGroupedbooleantrue
countGroups / cellsnumber6
zoomStart zoomed into'none' | 'Alpha' | 'Beta' | 'Gamma' | 'Delta' | 'Epsilon' | 'Zeta''none'
fillFill'steps' | 'pattern''steps'
cornersCorners'tight' | 'round''tight'
legendLegend'row' | 'none''row'
hoverHover'soft' | 'hot''soft'
tooltipTooltip'none' | 'panel''none'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber320
seedSeednumber4