Heatmap
Matriz de dados com gradiente de cores por intensidade. Ideal para visualizar regioes x periodos, como ocorrencias sanitarias mensais.
Uso
Quando e como utilizar o heatmap para visualizar dados tabulares com gradiente de intensidade.
- Regioes x Periodos — Visualize ocorrencias sanitarias por regiao e mes, destacando concentracoes com cores.
- Municipios x Trimestres — Compare desempenho entre municipios ao longo do tempo.
- HTML Estatico — Monte a tabela manualmente com classes CSS de intensidade, sem JavaScript.
- DataLoader + Factory — Carregue dados de CSV ou JSON e renderize automaticamente via
renderHeatmap().
Exemplos
Veja abaixo o exemplo interativo do heatmap com dados regionais, incluindo dark mode e estado vazio.
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descricao |
|---|---|---|
| Container | .heatmap | Wrapper principal, width 100% |
| Titulo | .heatmap__title | Heading opcional, Space Grotesk 18px w600 |
| Scroll | .heatmap__scroll-wrapper | Overflow-x auto com scrollbar customizada (6px) |
| Tabela | .heatmap__table | Tabela com border-collapse e min-width 600px |
| Cabecalho | .heatmap__header | Celulas th com fundo neutro, texto 12px uppercase |
| Label da linha | .heatmap__row-label | Primeira coluna sticky com z-index 1 |
| Celula | .heatmap__cell | Celula de dados com hover (scale 1.05 + box-shadow) |
| Legenda | .heatmap__legend | Barra flex com labels min/max e gradiente central |
| Gradiente | .heatmap__legend-bar | Div com linear-gradient de verde a vermelho |
| Vazio | .heatmap__empty | Estado vazio com borda dashed e padding 48px |
Escala de Intensidade
O heatmap utiliza 10 niveis de intensidade (0 a 9) mapeados por um gradiente de cores que vai de neutro a vermelho maximo.
A formula para calcular o nivel de intensidade de cada celula e:
Math.ceil((valor / max) * 9)Mais precisamente, a funcao intensityLevel(value, min, max) normaliza o valor entre o minimo e o maximo do dataset:
const normalized = (value - min) / (max - min);
return Math.min(9, Math.max(0, Math.ceil(normalized * 9)));| Nivel | Classe | Cor (light) | Significado |
|---|---|---|---|
| 0 | --intensity-0 | Cinza neutro | Sem dados ou valor zero |
| 1 | --intensity-1 | #dcfce7 | Verde muito claro |
| 2 | --intensity-2 | #bbf7d0 | Verde claro |
| 3 | --intensity-3 | #86efac | Verde medio |
| 4 | --intensity-4 | #fef08a | Amarelo claro |
| 5 | --intensity-5 | #fde047 | Amarelo |
| 6 | --intensity-6 | #fdba74 | Laranja claro |
| 7 | --intensity-7 | #fb923c | Laranja |
| 8 | --intensity-8 | #f87171 | Vermelho claro |
| 9 | --intensity-9 | #ef4444 | Vermelho maximo |
Voce pode sobrescrever o range com display.intensityRange: [0, 200] para definir limiares fixos ao inves de calcular a partir dos dados.
Propriedades
Classes CSS disponiveis para configurar o heatmap.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.heatmap | classe | — | Container principal do heatmap (width 100%). |
.heatmap__title | classe | — | Titulo do heatmap (18px w600, font-heading). |
.heatmap__scroll-wrapper | classe | — | Wrapper com overflow-x auto para scroll horizontal. |
.heatmap__table | classe | — | Tabela HTML com border-collapse e min-width 600px. |
.heatmap__header | classe | — | Celulas de cabecalho (th) com fundo neutro e texto uppercase. |
.heatmap__row-label | classe | — | Primeira coluna com position sticky, texto a esquerda. |
.heatmap__cell | classe | — | Celula de dados com hover (scale + box-shadow). |
.heatmap__cell--intensity-0 | classe | — | Intensidade 0 — neutro (cinza). |
.heatmap__cell--intensity-1 | classe | — | Intensidade 1 — verde muito claro. |
.heatmap__cell--intensity-2 | classe | — | Intensidade 2 — verde claro. |
.heatmap__cell--intensity-3 | classe | — | Intensidade 3 — verde medio. |
.heatmap__cell--intensity-4 | classe | — | Intensidade 4 — amarelo claro. |
.heatmap__cell--intensity-5 | classe | — | Intensidade 5 — amarelo. |
.heatmap__cell--intensity-6 | classe | — | Intensidade 6 — laranja claro. |
.heatmap__cell--intensity-7 | classe | — | Intensidade 7 — laranja. |
.heatmap__cell--intensity-8 | classe | — | Intensidade 8 — vermelho claro. |
.heatmap__cell--intensity-9 | classe | — | Intensidade 9 — vermelho maximo. |
.heatmap__legend | classe | — | Barra de legenda com labels min/max e gradiente. |
.heatmap__legend-bar | classe | — | Gradiente visual da legenda (linear-gradient, max-width 300px). |
.heatmap__empty | classe | — | Estado vazio com borda dashed e texto centralizado. |
Codigo
Snippets prontos para copiar e usar no seu projeto.
HTML estatico
<div class="heatmap">
<h3 class="heatmap__title">Ocorrencias por Regiao</h3>
<div class="heatmap__scroll-wrapper">
<table class="heatmap__table">
<thead>
<tr>
<th class="heatmap__header"></th>
<th class="heatmap__header">Jan</th>
<th class="heatmap__header">Fev</th>
<th class="heatmap__header">Mar</th>
<th class="heatmap__header">Abr</th>
</tr>
</thead>
<tbody>
<tr>
<td class="heatmap__row-label">Norte</td>
<td class="heatmap__cell heatmap__cell--intensity-3">120</td>
<td class="heatmap__cell heatmap__cell--intensity-2">95</td>
<td class="heatmap__cell heatmap__cell--intensity-5">210</td>
<td class="heatmap__cell heatmap__cell--intensity-4">180</td>
</tr>
<tr>
<td class="heatmap__row-label">Nordeste</td>
<td class="heatmap__cell heatmap__cell--intensity-7">340</td>
<td class="heatmap__cell heatmap__cell--intensity-6">280</td>
<td class="heatmap__cell heatmap__cell--intensity-9">415</td>
<td class="heatmap__cell heatmap__cell--intensity-8">390</td>
</tr>
<tr>
<td class="heatmap__row-label">Centro-Oeste</td>
<td class="heatmap__cell heatmap__cell--intensity-1">85</td>
<td class="heatmap__cell heatmap__cell--intensity-2">110</td>
<td class="heatmap__cell heatmap__cell--intensity-4">190</td>
<td class="heatmap__cell heatmap__cell--intensity-3">160</td>
</tr>
</tbody>
</table>
</div>
<div class="heatmap__legend">
<span class="heatmap__legend-label">85</span>
<div class="heatmap__legend-bar"></div>
<span class="heatmap__legend-label">415</span>
</div>
</div>DataLoader + Factory
<div id="heatmap-csv"></div>
<script type="module">
import { DataLoader } from '../core/data-loader.js';
import { renderHeatmap } from '../components/heatmap.js';
const data = await DataLoader.load({
endpoint: '/data/heatmap/ocorrencias-regionais.csv',
csvOptions: { delimiter: ';' }
});
renderHeatmap(
document.getElementById('heatmap-csv'),
data,
{ rowLabel: 'regiao' },
{ title: 'Ocorrencias Sanitarias por Regiao — 2025', legend: true }
);
</script>Auto-init via data attributes
<div data-arenito="heatmap"
data-endpoint="/data/heatmap/ocorrencias-regionais.csv"
data-format="csv"
data-delimiter=";"
data-title="Ocorrencias Sanitarias por Regiao"
data-mapping='{"rowLabel":"regiao"}'
data-legend="true">
</div>Estado vazio
<div class="heatmap">
<h3 class="heatmap__title">Resultados da busca</h3>
<div class="heatmap__empty">Nenhum dado encontrado para os filtros selecionados.</div>
</div>Fonte de Dados
O heatmap aceita dados de CSV, JSON ou arrays JavaScript. Para CSVs brasileiros, atencao ao delimitador.
O DataLoader suporta CSV como formato de entrada. Arquivos CSV gerados por ferramentas brasileiras (Excel pt-BR, LibreOffice com locale pt_BR) usam ponto-e-virgula (;) como delimitador, pois a virgula e usada como separador decimal.
Exemplo de CSV compativel:
regiao;jan;fev;mar;abr;mai;jun
Norte;120;95;210;180;145;160
Nordeste;340;280;415;390;310;355
Centro-Oeste;85;110;190;160;130;175
Sudeste;250;220;305;275;240;290
Sul;95;80;150;125;100;140Para carregar esse arquivo, passe delimiter: ';' nas opcoes do CSV:
const data = await DataLoader.load({
endpoint: '/data/heatmap/ocorrencias-regionais.csv',
csvOptions: { delimiter: ';' }
});Se o CSV usar virgula como delimitador (padrao internacional), omita a opcao csvOptions ou passe delimiter: ','.
Dark Mode
O heatmap adapta automaticamente suas cores para o dark mode via classe .dark no body.
No dark mode, as cores solidas de intensidade sao substituidas por versoes com opacidade reduzida usando rgba(). Isso evita que cores vibrantes dominem a interface em fundo escuro e mantem o contraste legivel.
| Nivel | Light | Dark |
|---|---|---|
| 0 | var(--neutral-100) | var(--neutral-700) |
| 1-3 | Verde solido | rgba(34, 197, 94, 0.15–0.35) |
| 4-5 | Amarelo solido | rgba(234, 179, 8, 0.2–0.35) |
| 6-7 | Laranja solido | rgba(249, 115, 22, 0.3–0.45) |
| 8-9 | Vermelho solido | rgba(239, 68, 68, 0.4–0.6) |
A barra de legenda (.heatmap__legend-bar) recebe opacity: 0.8 no dark mode para suavizar o gradiente. Os elementos .heatmap__header e .heatmap__row-label herdam automaticamente os tokens semanticos de superficie e nao precisam de ajuste manual.