z-uiDesign system
Gráficos

Mapas

Mapas por UF com o ChoroplethMap. A escala responde à pergunta: quanto (sequencial), para que lado (divergente) ou qual volume (símbolos). Todo mapa tem legenda, tooltip, foco pelo teclado e a mesma informação em tabela.

Como escolher

Decida pela pergunta antes de escolher a cor.

  • Magnitude → sequencialTaxas e médias por UF, de menos para mais. Um só matiz, do claro ao escuro, com 5 a 7 faixas.
  • Sinal → divergenteVariação contra um ponto de referência. Dois matizes opostos e um centro neutro que lê como “nada mudou”.
  • Contagem absoluta → símbolosVolume total por UF. No coroplético, estados grandes parecem pesar mais; o círculo mede o volume pela área.
  • Categorias → no máximo 3Mapa compara todas as regiões entre si. Com cor categórica, use até 3 classes; acima disso, tabela ou mapas pequenos.

Coroplético sequencial

Envelopes assinados por UF em outubro de 2026. Cinco faixas iguais de 0 a 2.500 na escala sequencial; Roraima não enviou dados e aparece como sem dados.

Envelopes assinados por UF

Outubro de 2026

13.252

Envelopes assinados por estado em outubro de 2026

  • 0 a 500
  • 500 a 1.000
  • 1.000 a 1.500
  • 1.500 a 2.000
  • 2.000 a 2.500
  • Sem dados
A tabela do próprio mapa ordena as UFs do maior para o menor valor e repete a faixa de cada uma.

Coroplético divergente

Variação de envelopes assinados contra setembro. Com scale="diverging", o domínio fica simétrico em torno de midpoint (0 por padrão) e a faixa central, neutra, cobre as variações pequenas.

Variação de assinaturas contra setembro

Outubro de 2026, em % por UF

16 UFs cresceram10 UFs caíram

Variação percentual de envelopes assinados contra setembro de 2026

  • -21% a -15%
  • -15% a -9%
  • -9% a -3%
  • -3% a +3%
  • +3% a +9%
  • +9% a +15%
  • +15% a +21%
  • Sem dados
Vermelho é queda e índigo é alta; a cor sozinha não carrega o sinal, porque a legenda e a tabela mostram o valor com + ou −.

Símbolos proporcionais

Envelopes enviados por UF. Com encoding="symbol", cada UF ganha um círculo no centro da geometria, com área proporcional ao volume, e o mapa de fundo fica neutro.

Envelopes enviados por UF

Outubro de 2026

14.318

Envelopes enviados por estado em outubro de 2026

  • 3.000
  • 600
  • 200
Os círculos maiores são desenhados primeiro, para os menores ficarem por cima. O centro vem da geometria; passe center na região para ajustar à mão.

Uso

import { ChoroplethMap } from "@/components/zui";
import { brazilStates, brazilStatesViewBox } from "@/components/zui/ChoroplethMap/data/brazil-states";

<ChoroplethMap
  regions={brazilStates}
  viewBox={brazilStatesViewBox}
  values={variacao}
  scale="diverging"
  midpoint={0}
  domain={[-21, 21]}
  steps={7}
  label="Variação de assinaturas contra setembro"
  valueLabel="Variação"
/>

<ChoroplethMap
  regions={brazilStates}
  viewBox={brazilStatesViewBox}
  values={enviados}
  encoding="symbol"
  label="Envelopes enviados por UF"
  valueLabel="Envelopes enviados"
/>

Props de escala e símbolo

Todas opcionais. Sem elas, o ChoroplethMap continua sequencial e preenchido.

PropTipoPadrãoDescrição
scale"sequential" | "diverging""sequential"Escala de cor das faixas. A divergente usa --color-scale-div-* com centro neutro.
midpointnumber0Valor neutro da escala divergente. O domínio fica simétrico em torno dele.
steps5 | 6 | 75Na escala divergente, 5 vira 5 faixas e 6 ou 7 viram 7, sempre com uma faixa central.
encoding"fill" | "symbol""fill"symbol desenha um círculo por região, com área proporcional ao valor.
symbolMaxRadiusnumber44Raio do maior círculo, em unidades do viewBox.
regions[].center[x, y]—Centro do símbolo. Sem ele, o centro é calculado a partir do path.