What it looks like
Picture the map of Brazil built from honeycomb pieces: each state is a hexagon in the approximate position of its territory, from Roraima at the top to Rio Grande do Sul at the bottom. Colors go from a light lavender blue for the lowest values to a strong indigo for the highest, with the state abbreviation and a compact number inside each piece. Hovering brightens the hexagon and opens a dark tooltip with name, region and value. Clicking pins the state to a card on the side with its rank, share and a bar. In the demo, two pill buttons switch between two metrics.
You may be looking for this if you asked for something like
- a map of Brazil colored by state for my dashboard
- show sales per Brazilian state, darker where we sell more
- a map of the Brazilian states as a honeycomb
- click a state and see its numbers in a card
- a chart by Brazilian state for a public sector dashboard
- a lightweight map of Brazil without a mapping library
Also known as
- choropleth map
- hexagon tile map
- hexbin map
- Brazil states map
- tile grid map
When to use
- Regional dashboards for sales, customers or revenue by Brazilian state
- Health and public sector dashboards comparing indicators by state
- Reports where small states such as DF and SE must stay visible
- Company pages that show where the business operates in Brazil
When to avoid
- When the real shape and area of the states matter to the reading
- Data by city or by regions smaller than a state
- English-only products, unless your AI translates the built-in Portuguese card labels and hints
How to ask your AI
Build a hexagon tile map of Brazil by state, shaded by value in my brand colors, for the sales dashboard. I want tooltips, a click that pins a detail card, arrow key navigation between neighboring states and a hidden table for screen readers.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Pindorama
How do I put my numbers into Pindorama?
Pass the values prop as an object from state abbreviation to number, such as SP: 120, and Pindorama shades each state on a scale between the lowest and highest value. With your own data, the second demo metric disappears; without values, the component generates two seeded sample metrics.
Does Pindorama work with a keyboard and screen readers?
Yes. The map takes focus and the arrow keys jump to the neighboring state in that direction, Enter pins or releases a state and Esc clears the selection. For screen readers, Pindorama provides a summary with the highest and lowest values, a hidden table with all 27 units and announcements for the focused state.
Does Pindorama need a mapping library or GeoJSON?
No. Pindorama is pure SVG with no dependencies: the positions of the 27 federative units are already in the code, on a hexagon grid that resembles the real map. That is why it is rated Light in THM Componentes, and it never downloads boundary files.
