shadcn.io is not affiliated with official shadcn/ui
Census Data Map Block for Solid
Eight districts of an invented county shaded by fifths of an indicator you pick (population, median income, median age, growth), with a five-range legend in words and a ranked table that shows each district's gap to the median.
Installation
Overview
Compare districts on one number, with this census data map for Solid with Ark UI. Ledgerstone, a regional statistics office, draws eight districts of an invented county on a lattice whose neighbours share every border. A Native Select switches the indicator between Population, Median income, Median age and Growth; the districts are shaded in five foreground weights, darker for higher, and each carries its value in a pill. The legend lists the five ranges in words, because the fifths hold equal counts as near as eight districts allow. A Table beside the map ranks the districts for the chosen indicator with each one's gap to the median, and the line under it says where the chosen district stands, for example "Stannmoor ranks 1 of 8 on population, at 56.9k: +21.3k against the median of 35.6k." Pressing a district or a row marks it. The table is the way in for the keyboard; the map is a pointer shortcut and is hidden from assistive technology. On a phone the map comes first and the table stacks under it. It's built from Native Select, Table and Guides, with a CSS entrance only. For statistics offices, planning tools and public data portals.
FAQ
How are the five shades chosen?
rankingOf sorts the districts by the chosen figure and gives each a level from its place in the order: floor(position * 5 / 8), so eight districts fall into groups of 2, 2, 1, 2 and 1. This is a quantile scheme, not equal-width steps, so a single large outlier does not wash out the rest. The legend reads each fifth's lowest and highest figure from the data, so it always matches the map.
How is the gap to the median worked out?
With an even number of districts the median is the mean of the two middle figures, and a district's gap is its figure minus that median, shown with a sign. Growth gaps are in percentage points. Both are rounded to one decimal for display only.
How do I use my own districts and indicators?
Edit LINES: each line is a lattice cell number, a name and one figure per indicator, in the order of INDICATORS. Add an indicator by adding an entry with its prefix and suffix and one more figure per line. In your app replace the lattice with your own boundary geometry and keep rankingOf, which is the only place the shades are decided.
Can I use it without a mouse?
Yes. The select is a native control with a visible label, and every district is a button in the ranked table with its pressed state. The districts on the map are skipped by the Tab key and hidden from assistive technology because the table says the same things in text. A polite message gives the chosen district's rank once the choice settles.
What stays local in the demo, and how do I wire it up?
All of it. The county, the districts and every figure are invented and typed into the file; nothing is fetched, published or saved. In your app load the indicator values for the chosen year from your statistics service and keep the same ranking function.
How does it look on a phone?
The indicator select sits under the heading, the map keeps its full width and a fixed height with the legend in two columns under it, and the ranked table stacks below. Changing the indicator never changes the height of the block: the legend and the sentence reserve their lines.