Venn Diagram

Diagrama de Venn com N circulos SVG sobrepostos, blend modes e tooltip interativo. Suporta de 1 a N areas com posicionamento automatico.

components/venn-diagram.cssAbrir no Figma

Uso

Quando e como utilizar o diagrama de Venn para representar sobreposicao de areas.

• CSV — Carrega dados de um arquivo CSV via DataLoader com mapeamento de campos.
• Inline — Dados passados diretamente via JavaScript, sem fetch externo.
• HTML estatico — SVG escrito manualmente com classes CSS, sem JavaScript.

Exemplos

Veja abaixo os exemplos interativos do diagrama de Venn, incluindo variantes de dados, layouts e configuracoes.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.venn-diagram	Wrapper principal com position relative
Titulo	.venn-diagram__title	Heading centralizado, Space Grotesk 18px w600
SVG	.venn-diagram__svg	SVG responsivo com viewBox dinamico
Circulo	.venn-diagram__circle	Circulo com fill-opacity 0.55, blend mode e hover
Label	.venn-diagram__label	Texto do nome da area, Inter 13px w600
Valor	.venn-diagram__value	Numero dentro do circulo, Space Grotesk 18px w700
Tooltip	.venn-diagram__tooltip	Tooltip absoluto com titulo e descricao
Legenda	.venn-diagram__legend	Flex row centralizada com gap 16px
Legend Item	.venn-diagram__legend-item	Dot colorido + texto 13px
Vazio	.venn-diagram__empty	Estado sem dados, borda dashed e texto sutil

SVG Internals

O posicionamento dos circulos e calculado automaticamente pela funcao calculatePositions(count, size).

Quantidade	Algoritmo	Descricao
1 circulo	Centro	Posicionado no centro exato do viewBox
2 circulos	Lado a lado	Deslocados horizontalmente com offset de 60%
3 circulos	Triangulo	Um no topo, dois na base com offset de 70%
N >= 4	Circular	Distribuidos em angulos iguais (2*PI/N), partindo do topo

O tamanho do viewBox e configuravel via display.size (padrao 400). O raio de cada circulo e size * 0.22 e o offset de posicionamento e size * 0.14.

Propriedades

Classes CSS disponiveis para estruturar e estilizar o diagrama.

Propriedade	Tipo	Default	Descrição
.venn-diagram	classe	—	Container principal do diagrama.
.venn-diagram__title	classe	—	Titulo centralizado acima do SVG.
.venn-diagram__svg	classe	—	SVG responsivo (width 100%, height auto).
.venn-diagram__circle	classe	—	Circulo SVG com mix-blend-mode e hover scale.
.venn-diagram__label	classe	—	Texto label dentro do SVG (text-anchor: middle).
.venn-diagram__value	classe	—	Valor numerico dentro do SVG (font-weight 700).
.venn-diagram__tooltip	classe	—	Tooltip posicionado no hover do circulo.
.venn-diagram__tooltip--visible	classe	—	Modificador que torna o tooltip visivel (opacity 1).
.venn-diagram__legend	classe	—	Legenda horizontal abaixo do SVG.
.venn-diagram__legend-item	classe	—	Item da legenda (dot + nome).
.venn-diagram__legend-dot	classe	—	Circulo colorido 12x12 na legenda.
.venn-diagram__empty	classe	—	Estado vazio com borda tracejada.

Codigo

Snippets prontos para copiar e usar no seu projeto.

HTML estatico (SVG)

<div class="venn-diagram">
  <h3 class="venn-diagram__title">Exemplo Estatico</h3>
  <svg class="venn-diagram__svg" viewBox="0 0 400 400">
    <circle class="venn-diagram__circle" cx="170" cy="160" r="90"
      fill="#FB923C" fill-opacity="0.55"/>
    <circle class="venn-diagram__circle" cx="230" cy="160" r="90"
      fill="#F97316" fill-opacity="0.55"/>
    <circle class="venn-diagram__circle" cx="200" cy="230" r="90"
      fill="#EA580C" fill-opacity="0.55"/>
    <text class="venn-diagram__label" x="170" y="150">Animal</text>
    <text class="venn-diagram__label" x="230" y="150">Vegetal</text>
    <text class="venn-diagram__label" x="200" y="240">Inspecao</text>
  </svg>
</div>

DataLoader + Factory

import { DataLoader } from '../core/data-loader.js';
import { renderVennDiagram } from '../components/venn-diagram.js';

const data = await DataLoader.load({
  endpoint: '/data/venn/areas-atuacao.csv'
});

renderVennDiagram(
  document.getElementById('venn-container'),
  data,
  { label: 'label', color: 'color', description: 'descricao', value: 'valor' },
  { title: 'Areas de Atuacao', size: 400, legend: true, showValues: true }
);

Dados inline

import { renderVennDiagram } from '../components/venn-diagram.js';

const data = [
  { label: 'Sanidade Animal', color: '#FB923C', descricao: 'Fiscalizacao de rebanhos', valor: 450 },
  { label: 'Sanidade Vegetal', color: '#F97316', descricao: 'Controle de pragas', valor: 320 },
  { label: 'Inspecao', color: '#EA580C', descricao: 'Produtos de origem animal/vegetal', valor: 280 }
];

renderVennDiagram(
  document.getElementById('venn-container'),
  data,
  { label: 'label', color: 'color', description: 'descricao', value: 'valor' },
  { title: 'Triangulo de competencias' }
);

Fonte de Dados

O componente trabalha com o DataLoader e aceita dados em CSV ou JSON.

CSV (formato recomendado)

O DataLoader converte automaticamente o CSV em um array de objetos. Cada linha vira um circulo no diagrama.

label,color,descricao,valor
Sanidade Animal,#FB923C,Fiscalizacao de rebanhos,450
Sanidade Vegetal,#F97316,Controle de pragas,320
Inspecao,#EA580C,Produtos de origem animal/vegetal,280

Mapeamento de campos

Campo	Chave no mapping	Padrao	Descricao
Nome da area	label	'label'	Texto exibido dentro do circulo
Cor	color	'color'	Cor hexadecimal do fill
Descricao	description	'descricao'	Texto exibido no tooltip
Valor	value	'valor'	Numero exibido dentro do circulo

Opcoes de display

Opcao	Tipo	Padrao	Descricao
title	string	—	Titulo exibido acima do diagrama
size	number	400	Tamanho do viewBox SVG (largura e altura)
legend	boolean	true	Exibe a legenda abaixo do SVG
showValues	boolean	true	Exibe valores numericos dentro dos circulos
emptyText	string	'Nenhum dado encontrado.'	Texto do estado vazio

Dark Mode

O diagrama adapta automaticamente ao tema escuro via classe .dark.

A principal diferenca no dark mode e o mix-blend-mode dos circulos:

Propriedade	Light	Dark
mix-blend-mode	multiply	screen
Tooltip background	--surface-base-neutral-container-default	--surface-base-neutral-container-default
Tooltip shadow	rgba(0,0,0,0.12)	rgba(0,0,0,0.32)

No modo claro, multiply escurece as intersecoes entre circulos, criando contraste natural nas areas sobrepostas. No modo escuro, screen clareia as intersecoes, mantendo o mesmo efeito visual sobre fundos escuros.

Versão0.2.0

Última atualização14 mar 2026

Caminhosrc/components/venn-diagram.css