shadcn.io is not affiliated with official shadcn/ui
Economic Indicators Map Block for React Aria
Eight economies as bubbles on a dot world sized by GDP growth, unemployment or inflation, hollow when negative, with a Trade flows switch that draws arcs by volume, a country card and a ranked table.
Installation
Overview
Read a macro indicator across the world, with this economic indicators map for React with React Aria. Indexmoor, a macro-data desk, draws eight economies as bubbles on a dot world where every dot is a cell of land. A Native Select picks the indicator (GDP growth, unemployment or inflation) and the area of each bubble follows the figure; a bubble for a negative figure is hollow and carries its minus sign. A Switch named Trade flows draws arcs between the economies, thicker in four steps by yearly volume, and choosing an economy keeps its arcs dark and fades the rest. A card under the map gives the chosen economy's three indicators and its biggest trade partner, and a Table ranks all eight by the chosen indicator. A polite status line speaks the result once the controls settle. On a phone the bubbles drop their numbers and the table drops the partner column. It's built from Native Select, Switch, Table and Guides, with CSS transitions only. For economic, markets-research and analytics dashboards.
FAQ
How do I use real indicators?
Edit ECONOMIES: a name, a column and row on the dot world and the three indicators in tenths of a percent, so 2.4 percent is 24. Add or remove entries in FLOWS for the trade volumes in billions of dollars. In your app load the series from your data provider and keep percentOf, which prints the sign and one decimal.
How is a place found on the dot world?
A column is 7.5 degrees of longitude and a row is 7 degrees of latitude, so a country is a column and a row in cells. The bubbles are HTML buttons placed in percent of the drawing, the land is one SVG path of round dots and the arcs are quadratic curves that bow toward the top of the map.
How is a negative figure shown?
A negative bubble is hollow and its number starts with a minus sign, so a fall reads without any colour. The bubble's area follows the size of the figure, positive or negative, and the table prints the same signed number.
Can I use it without a mouse?
Yes. The select, the switch and each economy's name in the table are keyboard controls, and pressing a name marks the bubble and writes the card. The bubbles are hidden from assistive technology and skipped by Tab because the table says the same things.
What stays local in the demo, and how do I wire it up?
All of it. The countries are real but every figure and every trade volume is invented sample data, not official statistics, and nothing is loaded or sent. In your app fetch the indicators for the period and the bilateral trade for the flows, and keep the table as the text version of the map.