shadcn.io is not affiliated with official shadcn/ui
Traffic Heatmap Globe Block for Radix UI
A globe of land dots with a bubble per country sized by visitors over 7, 30 or 90 days; drag, four buttons or the arrow keys turn it 15 degrees, and a top-five rail turns it to face a country.
Installation
Overview
Show where a site's visitors are, with this traffic heatmap globe for React with Radix UI. Hitmark, a website analytics tool, draws an orthographic globe of land dots and meridians with one bubble per country, sized by its visitors in the period a Toggle Group picks: 7, 30 or 90 days, three typed sets. The globe turns by a mouse or pen drag, by four named Buttons (turn west, turn east, tilt north, tilt south) and by the arrow keys on the focused globe, 15 degrees at a time, and it never spins on its own; touch keeps scrolling the page. A rail of the top five countries is the way in: pressing one marks its bubble and turns the globe to face it. A foot shows the country or the total, its share and where the globe faces, and a polite status line speaks the result once the controls settle. On a phone the rail becomes a row of chips above the globe. It's built from Toggle Group, Button and Guides, with no animation. For analytics, audience and traffic tools.
FAQ
How is the globe drawn?
Each place on the sphere is projected to the disc with the same orthographic formula as the awards globe: the point at the centre faces you, a place whose depth is behind the disc is not drawn, and every value is rounded to one decimal. The land is one SVG path of dots, the graticule is a meridian and a parallel every 30 degrees, and the bubbles are buttons placed in percent.
How do I use my own visitors?
Edit COUNTRY_LINES: an id, a name, a latitude and longitude, and the visitors in thousands for 7, 30 and 90 days. The rail, the bubbles, the shares and the foot follow. In your app send the counts per country for the chosen period and keep shortOf for the figure.
What about countries on the far side?
A country facing away is not drawn, and the rail is the way to bring any of the top five round: it turns the globe to face the country. The foot always states where the globe faces, in degrees.
Can I use it without a mouse?
Yes. The globe is one button in the tab order and the arrow keys turn it, the same four turns are named buttons, the period is a toggle group and every country in the rail is a button. The bubbles are hidden from assistive technology and skipped by Tab.