shadcn.io is not affiliated with official shadcn/ui
User Distribution Map Block for Vue
The dot world cut into 24 by 10 bins filled in five weights by how many of 400 sample users fall in each, a Signed up, Active, Paying toggle that re-bins them, a reading for a pressed bin and a top-five cities table.
Installation
Overview
Show where people are without pins, with this user distribution map for Vue with Ark UI. Dotfield, a product analytics tool, cuts a dot world (each dot a cell of land) into 24 by 10 bins and fills each in one of five foreground weights by how many of 400 sample users fall in it; every weight holds a fifth of the occupied bins, so the picture shows the shape and not only the extremes. A Toggle Group switches who counts, Signed up, Active this month or Paying, and the same people are re-binned. Pressing a bin reads its count, its share and its nearest city under the map. A Table ranks the five biggest cities for the chosen group and is the keyboard route: a row selects the bin its city sits in. A polite status line speaks the result once the controls settle. On a phone the world keeps its full width at a lower height and the table keeps its three columns. It's built from Toggle Group, Table and Guides, with CSS transitions only. For product analytics, growth and audience tools.
FAQ
Where do the 400 users come from?
They are a seeded stream made at module scope: each user draws a city by its weight, a spot near it and two yes or no draws for active and paying, all from a small hash so the sample is the same every time and on the server. Edit CITY_LINES and the sample follows; in your app count your real users into the same 24 by 10 bins.
How are the five weights chosen?
levelsOf sorts the occupied bins and cuts them into five equal-count steps, so each weight holds a fifth of them. A bin with nobody is not drawn. The key under the map runs from fewest to most, and a pressed bin always reads its exact count.
Are the cities and numbers real?
The cities are real places named in text; the users, their numbers and their rates are invented sample data. The caption says so and nothing here is tracked.
Can I use it without a mouse?
Yes. The toggle group is one tab stop and every city in the table is a button that selects its bin and writes the reading. The bins are a pointer shortcut: they are hidden from assistive technology and skipped by Tab.