shadcn.io is not affiliated with official shadcn/ui
Crime Heatmap Map Block for Solid
A hundred and sixty sample incidents binned into a 12 by 9 grid on a drawn town, with type and period toggles and a list of six neighbourhoods rated per 1,000 residents in words.
Installation
Overview
Show where incidents cluster and how busy each area is, with this crime heatmap map for Solid with Ark UI. Lanternwatch, a neighbourhood safety site, draws an invented town (Lindmere) as an SVG street map under a 12 by 9 grid of cells. A hundred and sixty sample incidents are binned into the cells, and each cell shows its count and gets a darker, heavier fill as it gets busier, scaled to the busiest cell, so the level reads from the number and the weight and never from colour alone. A multiple Toggle Group picks the types (theft, damage, disturbance, vehicle) and a second one the period (7, 30 or 90 days); both re-bin the grid at once, and clearing every type says so in words. A side list of the six neighbourhoods gives incidents per 1,000 residents, scaled to 30 days so the periods compare, with a word (low, moderate, elevated or high); pressing one outlines it on the map. A polite message names the busiest area when anything changes. It's built from Toggle Group and Guides, with a CSS entrance only. For neighbourhood sites, councils, insurers and community groups.
FAQ
How do I use my own incidents and areas?
Edit LINES (one incident per line: a type code, a column and row in cells, and days ago), HOODS (a name, its cell bounds and its residents) and KINDS. The cells, the counts, the outlines and the rates are all worked out from those lists, so nothing is typed twice.
How is the rate worked out?
Incidents in the area divided by its residents, times 1,000, scaled to 30 days so a 7-day view and a 90-day view can be compared. The word follows fixed steps (under 1.5 low, under 3 moderate, under 5 elevated, otherwise high). A small area with few residents can swing a lot on one incident, which is why the count sits beside the rate.
Why is there no red?
The count is written in every cell, the fill steps get darker and heavier, and the list uses words, so the map reads in any theme and for any eye. Colour would add a judgement the numbers do not support.
Can I use it without a mouse?
Yes. Both toggle groups take the arrow keys, each neighbourhood is a button in the list, and a polite message reads the totals and the busiest area. The grid is a drawing, and the list carries the same facts in words.
What stays local in the demo, and how do I wire it up?
All of it. The incidents are invented sample data for a place that does not exist, and the caption says it is not advice. In your app load incidents your police force publishes for a chosen period, keep location privacy in mind (snap to a block, never to an address), and never show a view like this as a judgement about people.