shadcn.io is not affiliated with official shadcn/ui
Carbon Emissions Map Block for React Aria
Nine regions as a lattice of districts shaded by yearly emissions, each with a bubble that a 0 to 40 percent cut slider shrinks, a national bar against its target marker and a card with the chosen region's industry mix.
Installation
Overview
Show how far a cut goes, with this carbon emissions map for React with React Aria. Cindermark, a carbon accounting tool, draws nine invented regions as a lattice of districts that share every border, each shaded in one of five foreground weights by its yearly emissions in kilotonnes and carrying a bubble sized by what remains after the cut. A Slider named Cut emissions by runs from 0 to 40 percent: every bubble shrinks, the national bar moves against a marker for the national target and the list counts the regions under their own target (a solid bubble) against those still above it (a hollow one). The list at the side is the keyboard route; choosing a region fills a card with its industry mix, five rows with bars whose shares add to exactly 100. A polite status line speaks the new result once the slider settles. On a phone the map comes first, then the list, the slider and the card. It's built from Slider and Guides, with CSS transitions only. For sustainability, reporting and climate-planning tools.
FAQ
How is the map of districts drawn?
A four by four lattice of corners makes nine quadrilaterals that share their edges. The inner corners are moved a little by a seeded hash at module scope, so the drawing is the same on the server and in the browser and no district leaves a gap. The bubble sits at the centre of its district.
How do I use my own regions and targets?
Edit REGIONS for each region's kt (kilotonnes a year), its own target and its industry mix, and NATIONAL_TARGET for the bar's marker. The cut applies to every region equally here; in your app you could give each industry its own cut and sum them in afterOf.
How is a region told apart without colour?
The shading is five foreground weights from lightest to darkest, a bubble's area is the tonnes remaining, and a region on target is a solid bubble while one above it is hollow. The list says the same in words, "Target met" or "Above target".
Can I use it without a mouse?
Yes. The slider takes the arrow keys and speaks its value in percent, and every region in the list is a button that fills the card. The bubbles are hidden from assistive technology and skipped by Tab because the list says the same things.
What stays local in the demo, and how do I wire it up?
All of it. The regions, the tonnes and the targets are typed sample data, nothing is measured and nothing is reported anywhere. In your app load the inventory per region from your accounting source and the targets from the plan, and keep the whole-number maths in afterOf.