shadcn.io is not affiliated with official shadcn/ui
Population Density Map Block for Vue
A dot-density map of eight districts of an invented city, one dot for every 5,000 people, with a year toggle (2000, 2025, 2050 projected) that adds or removes dots, and a table of each district's change.
Installation
Overview
Watch a city fill up, with this population density map for Vue with Ark UI. Hearthcount, a city planning office, draws eight districts of the invented city of Thorneby on a lattice whose neighbours share every border, with one dot for every 5,000 people. A Toggle Group steps the year through 2000, 2025 and 2050 projected: the dots are added or taken away by each district's typed head count, a dot that is kept stays where it was, and a new one fades in. The strip above the map says the dot total and the people total, which are the same number over 5,000. A Table beside the map lists every district with its people and its change on the year before as a signed figure with an arrow. 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. The caption says plainly that where a dot sits inside its district means nothing. It's built from Toggle Group, Table and Guides, with a CSS entrance only. For planning offices, housing studies and any growth story told by district.
FAQ
How are the dots placed, and why do they stay put?
Each district has a seeded order of slots in its own quad, and placesOf gives every dot a nudged place in the next slot using a Park-Miller stream, so the picture is the same on the server and in the browser. A district draws as many dots as its largest snapshot needs, and a year simply shows the first N of them; the rest are transparent. That is why a dot you saw in 2025 is exactly where it was in 2000, and why the new ones fade in.
Does the dot count equal the population?
Yes, by construction: the data is typed in dots, so the people figure is the dot count times 5,000. The strip and the table read the same numbers. A real dataset would round each district's population to the nearest dot, so keep a note of that rounding in your legend.
How do I use my own districts and years?
Edit LINES: a lattice cell, a name and one dot count per snapshot, the first being the baseline the earliest year is compared with. Add a year by adding an entry to YEARS and one more number per line. In your app swap the lattice for your boundary geometry and place dots inside each polygon with the same seeded approach.
Can I use it without a mouse?
Yes. The toggle group is one tab stop with arrow keys, and every district is a button in the table with its pressed state. The districts and dots 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 totals and the chosen district once the choice settles.