Treemap
Revenue by product, each tile's area its share
| product | Revenue | Share |
|---|---|---|
| Laptops | 420 | 27% |
| Phones | 380 | 25% |
| Tablets | 210 | 14% |
| Monitors | 160 | 10% |
| Headsets | 120 | 8% |
| Keyboards | 90 | 6% |
| Mice | 70 | 5% |
| Cables | 40 | 3% |
| Docks | 35 | 2% |
| Stands | 20 | 1% |
charts
Dithered treemap charts for React
Modeled on the shadcn chart catalog and drawn in dithered ink. Install a chart with one command; the source is yours.
Treemap charts
Treemap - Groups
Products packed into one labelled block per aisle
| product | Sales | Share |
|---|---|---|
| Fruit / Apples | 275 | 22% |
| Fruit / Pears | 140 | 11% |
| Fruit / Plums | 90 | 7% |
| Vegetables / Kale | 200 | 16% |
| Vegetables / Leeks | 120 | 10% |
| Vegetables / Peas | 60 | 5% |
| Vegetables / Beans | 30 | 2% |
| Grain / Oats | 160 | 13% |
| Grain / Rice | 110 | 9% |
| Grain / Rye | 45 | 4% |
Treemap - Legend
Hide an aisle and the rest re-lay out to fill
| product | Sales | Share |
|---|---|---|
| Fruit / Apples | 275 | 22% |
| Fruit / Pears | 140 | 11% |
| Fruit / Plums | 90 | 7% |
| Vegetables / Kale | 200 | 16% |
| Vegetables / Leeks | 120 | 10% |
| Vegetables / Peas | 60 | 5% |
| Vegetables / Beans | 30 | 2% |
| Grain / Oats | 160 | 13% |
| Grain / Rice | 110 | 9% |
| Grain / Rye | 45 | 4% |
Treemap - No labels
Twenty tiles with the labels off, for dense data
| region | Users | Share |
|---|---|---|
| Region 1 | 600 | 19% |
| Region 2 | 400 | 13% |
| Region 3 | 300 | 9% |
| Region 4 | 240 | 8% |
| Region 5 | 200 | 6% |
| Region 6 | 171 | 5% |
| Region 7 | 150 | 5% |
| Region 8 | 133 | 4% |
| Region 9 | 120 | 4% |
| Region 10 | 109 | 3% |
| Region 11 | 100 | 3% |
| Region 12 | 92 | 3% |
| Region 13 | 86 | 3% |
| Region 14 | 80 | 3% |
| Region 15 | 75 | 2% |
| Region 16 | 71 | 2% |
| Region 17 | 67 | 2% |
| Region 18 | 63 | 2% |
| Region 19 | 60 | 2% |
| Region 20 | 57 | 2% |