Um diagrama de Venn é uma forma de visualização de dados que usa formas, geralmente círculos, para mostrar as relações entre grupos de coisas. Neste tipo de gráfico, as áreas sobrepostas mostram semelhanças, enquanto os círculos que não se sobrepõem mostram as características que não são compartilhadas.
Introduzido por John Venn , um matemático, lógico e filósofo inglês, os diagramas de Venn também são chamados de diagramas de conjuntos ou diagramas lógicos, pois mostram possíveis relações lógicas entre elementos de conjuntos diferentes. Ao desenhar esses gráficos, provavelmente estaremos lidando com dois ou três círculos sobrepostos, já que ter apenas um círculo seria enfadonho, e ter quatro ou mais círculos rapidamente se torna muito complicado.
Esses diagramas não são apenas boas visualizações como um conceito, mas também fornecem uma grande oportunidade de representar dados qualitativos e um pouco de humor gráfico. Basicamente, eles são fáceis e divertidos de construir e usar. Vou te mostrar agora mesmo!
Leia este tutorial para aprender como criar facilmente um diagrama de Venn visualmente atraente e informativo para seu site ou aplicativo com a ajuda de JavaScript. Todo o código usado e demonstrado ao longo do tutorial estará disponível gratuitamente para você brincar.
Durante a pandemia de coronavírus em curso, trabalhando em casa e evitando comida de fora, muitos de nós nos tornamos chefs amadores. Portanto, vamos usar um diagrama de Venn baseado em JS para descobrir que tipo de receita seria a melhor para experimentar em um dia de trabalho – este será um caso de uso delicioso para explorar!
Spoiler: Diagrama de Venn a ser desenvolvido
Antes de começar, decidi estimular seu apetite por uma visualização de dados bacana e uma experiência de aprendizado e mostrar como ficará o diagrama JavaScript interativo final de Venn.
Confira e siga o tutorial de gráficos!
4 etapas simples para um diagrama básico de JS Venn
Os diagramas de Venn são um deleite para os visualizadores e o público – eles fornecem grande valor e insights rápidos, ao mesmo tempo que são simples de fazer e entender.
Vamos ver como podemos fazer um diagrama de Venn usando JavaScript (HTML5). Pode não ser tão fácil quanto criar círculos em um guardanapo de papel com canetas de desenho de cores diferentes (para comparar cães e gatos, talvez!). Mas acredite em mim, é quase tão simples e definitivamente mais emocionante quando você está fazendo as coisas certas.
Começaremos com um diagrama de Venn muito básico e depois o personalizaremos.
Na verdade, você deve seguir estas 4 etapas para construir um belo gráfico JavaScript de literalmente qualquer tipo, incluindo um diagrama de Venn:
- Crie uma página HTML para o gráfico.
- Inclua os arquivos JavaScript necessários.
- Adicione os dados.
- Escreva o código JS para o diagrama.
1. Crie uma página HTML
Crie uma página HTML básica com um elemento de nível de bloco onde o diagrama de Venn será renderizado. Este elemento div conterá o gráfico e receberá um ID exclusivo para referenciá-lo posteriormente.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>A largura e a altura do contêiner são definidas como 100% para que o gráfico preencha toda a tela. Você pode definir outros valores para alterar o tamanho do gráfico conforme necessário.
2. Inclua os arquivos JavaScript necessários
Para criar um gráfico JavaScript, é necessário vincular os scripts JS apropriados que serão usados para desenvolvê-lo. Esses arquivos devem ser incluídos dentro da <script>tag na <head>seção da página HTML.
Sinta-se à vontade para escolher uma biblioteca JS para visualização de dados, pois existem muitas delas e a abordagem é bastante universal. Neste tutorial, estarei usando AnyChart . É uma biblioteca de gráficos JavaScript flexível e poderosa que torna muito fácil e rápido visualizar dados em gráficos robustos, portanto, mesmo os iniciantes ficarão bem. Para o diagrama de Venn, precisaremos apenas de seu módulo de biblioteca principal que é necessário para todos os gráficos e o módulo dedicado para criar este tipo de gráfico específico.
Você pode baixar os scripts necessários e adicioná-los à página HTML ou incluir os links CDN como fazemos aqui para simplificar.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-venn.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the chart will come here
</script>
</body>
</html>Observação: adicionamos uma tag de script no corpo onde escreveremos nosso código para criar o gráfico.
3. Adicione os dados
Os dados são o que formam o gráfico e, portanto, são um aspecto essencial da visualização. Uma grande vantagem do AnyChart é que ele fornece várias maneiras de adicionar dados . Neste diagrama de Venn, estamos usando dados simples para que possamos incluir os dados diretamente em nossa página.
Cada gráfico renderiza dados em um formato específico, portanto, é importante ter certeza de que temos os dados da maneira que faz sentido para renderizar o diagrama de Venn. É muito intuitivo, portanto, nada para ter medo.
Nossos dados são sobre as 3 facetas que consideramos ao escolher uma receita para experimentar durante esses momentos de trabalho em casa. Uma receita perfeita é aquela que possui todas as 3 características favoráveis.
Listamos os 3 atributos em consideração como 3 pontos de dados e as interseções de 2 combinações, bem como todos os 3 deles como outros pontos de dados separados.
O diagrama de Venn aceita uma matriz de dados, portanto, estruturamos os dados da mesma forma.
data = [
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made'
},
{
x: 'B',
value: 100,
name: 'INGREDIENTS \n Key elements available'
},
{
x: 'C',
value: 100,
name: 'COMPLEXITY \n Manageable level'
},
{
x: ['A', 'C'],
value: 25,
name: 'Add to \n wishlist'
},
{
x: ['A', 'B'],
value: 25,
name: 'Possibility \n of disaster'
},
{
x: ['B', 'C'],
value: 25,
name: 'Try on a \n holiday'
},
{
x: ['A', 'B', 'C'],
value: 25,
name: 'The perfect \n recipe'
}
]Os pontos de dados recebem um valor para indicar a quantidade de sobreposição e não sobreposição. Como nossos dados são qualitativos, atribuímos a cada sobreposição o mesmo valor. O nome indica a descrição de cada ponto de dados. O \nsímbolo visto na descrição é um caractere de nova linha que insere uma quebra de linha.
4. Escreva o código JS para o diagrama de Venn
Agora que tudo está no lugar, estamos prontos para ver a mágica acontecer! Com apenas algumas linhas de código, teremos nosso diagrama básico de Venn pronto.
Todo o código JavaScript é colocado dentro da <script>tag no corpo da nossa página HTML. A primeira coisa que fazemos é adicionar uma função envolvendo todo o código, o que garante que o código só será executado quando a página estiver pronta.
<script type="text/javascript">
anychart.onDocumentReady(function() {
// All the code for drawing the chart will come here
});
</script>Em seguida, adicionamos os dados e criamos o gráfico usando esses dados. Em seguida, configuramos o contêiner para fazer referência ao nosso elemento HTML adicionado anteriormente e desenhamos o gráfico.
anychart.onDocumentReady(function () {
var data = [{data}];
// create venn diagram
var chart = anychart.venn(data);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
}Nosso diagrama de Venn é desenhado, mas adicionamos apenas mais 2 linhas de código para dar um título ao gráfico e formatar os rótulos para representar o texto de dados que se cruzam em vez de valores, uma vez que isso faz mais sentido para nossos dados subjetivos.
// set chart title
chart.title('The perfect recipe to try while working from home');
// set labels settings
chart.labels().format('{%Name}');Dê uma olhada no resultado:
Confira este diagrama básico de Venn com o código JS / CSS / HTML completo no Playground ou CodePen .
Não é um prazer ver um diagrama de Venn totalmente funcional, de boa aparência e interativo criado com JavaScript em tão poucas linhas de código?
Personalizando um Diagrama de Venn (para torná-lo ainda mais impressionante)
A biblioteca AnyChart oferece uma infinidade de opções para ajustar a aparência das visualizações de dados. Faça o que fizer, sempre há espaço para melhorias e podemos definitivamente mudar algumas coisas em nosso diagrama JS Venn para torná-lo mais envolvente, destacar alguns pontos específicos, adicionar funcionalidade para entender melhor os dados ou apenas aperfeiçoar a estética para se adequar nosso gosto!
A maneira mais fácil de mudar a aparência da visualização dos dados é experimentar os vários temas de cores que o AnyChart oferece. Isso pode ser feito simplesmente adicionando o tema desejado ao cabeçalho da página e, em seguida, referenciando-o no código.
<script src="https://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>// set chart theme
anychart.theme('pastel');Vejamos algumas outras modificações rápidas neste tutorial:
- Melhoria geral da aparência do gráfico.
- Cores personalizadas para cada ponto de dados.
- Mudança de fonte.
- Efeitos especiais.
1. Melhoria geral da aparência do gráfico
Faremos algumas pequenas mudanças aqui e ali para refinar a visualização do diagrama de Venn. Novamente, você verá como é fácil fazer essas alterações.
Como nosso diagrama de Venn mostra o texto dos pontos de dados no gráfico, não precisamos realmente da legenda.
// disable legend
chart.legend(false);Então, vamos adicionar um traço aos círculos que farão com que as áreas de intersecção se destaquem.
// set chart stroke
chart.stroke('1 #fff');E modifique o tamanho, o estilo e o posicionamento do texto para aprimorar o título e os rótulos.
// set chart title
chart
.title()
.enabled(true)
.fontSize(24)
.padding({ bottom: 25 })
.text("The perfect recipe to try while working from home");
// set labels settings
chart
.labels()
.fontSize(14)
.fontColor("#5e6469")
.hAlign("center")
.vAlign("center")
.fontWeight("500")
.format("{%Name}");
// set intersections labels settings
chart
.intersections()
.labels()
.fontStyle("italic")
.fontColor("#fff")
.format("{%Name}");Ai está:
https://playground.anychart.com/7g2D33GZ/iframe
Verifique este diagrama de Venn personalizado parcial com o código JS / CSS / HTML completo no Playground ou CodePen .
2. Cores personalizadas para cada ponto de dados
Quando queremos uma cor diferente para cada um dos pontos de dados, a melhor maneira é adicionar a propriedade de cor aos dados. Em AnyChart, podemos especificar não apenas as cores para cada área, mas também as cores ao pairar e selecionar essas áreas.
Vamos adicionar propriedades normais, suspensas e selecionadas aos nossos dados, bem como especificar a cor de preenchimento e a opacidade.
Aqui está um exemplo para o ponto de dados A:
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made',
normal: {fill: "#8ecafb 0.7"},
hovered: {fill: "#8ecafb 1"},
selected: {fill: "#8ecafb 1"}
}3. Mudança de fonte
Podemos usar fontes existentes ou adicionar Google Fonts da maneira que faremos aqui. Vamos simplesmente vincular a folha de estilo de uma fonte do Google que gostaríamos de usar no cabeçalho da página e, em seguida, especificar essa família de fontes onde quisermos aplicá-la.
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">// add this in the code
.fontFamily('Roboto, sans-serif')4. Alguns efeitos especiais
Para incrementar nosso diagrama Venn JavaScript, vamos adicionar um preenchimento de textura nas áreas de interseção e algum texto interessante na dica de ferramenta do gráfico.
Como o texto da dica de ferramenta e a cor de preenchimento da textura serão específicos para cada ponto de dados, incluiremos isso nos dados.
Aqui está um exemplo para um dos pontos de dados de interseção:
{
x: ['A', 'C'],
value: 20,
name: 'Add to\n wishlist',
tooltipTitle: 'Add to wishlist',
tooltipDesc: 'Add the ingredients in the next shopping list',
normal: {fill: "#a98caf 0.6"},
hovered : {fill: "#a98caf 1"},
selected: {fill: "#a98caf 1"},
hatchFill:{
type:"weave",
color: "#8b6b92"
}
}Inclua esta mudança no código:
// set tooltip settings
chart.tooltip()
.titleFormat('{%tooltipTitle}')
.format("{%tooltipDesc}")
.background().fill("#000 0.5");Confira o diagrama de Venn interativo final baseado em JavaScript com todas essas personalizações! Para sua conveniência, seu código completo está logo abaixo do gráfico interativo incorporado.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-venn.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('pastel');
var data = [
{
x: 'A',
value: 100,
name: 'TIME \n Can be quickly made',
tooltipTitle: 'TIME \n Can be quickly made',
normal: {fill: "#8ecafb 0.7"},
hovered: {fill: "#8ecafb 1"},
selected: {fill: "#8ecafb 1"}
},
{
x: 'B',
value: 100,
name: 'INGREDIENTS \n Key elements available',
tooltipTitle: 'INGREDIENTS \n Key elements available',
normal: {fill: "#ffeaa6 0.7"},
hovered: {fill: "#ffeaa6 1"},
selected: {fill: "#ffeaa6 1"}
},
{
x: 'C',
value: 100,
name: 'COMPLEXITY \n Manageable level',
tooltipTitle: 'COMPLEXITY \n Manageable level',
normal: {fill: "#ee957f 0.7"},
hovered: {fill: "#ee957f 1"},
selected: {fill: "#ee957f 1"}
},
{
x: ['A', 'C'],
value: 20,
name: 'Add to \n wishlist',
tooltipTitle: 'Add to wishlist',
tooltipDesc: 'Add the ingredients in the next shopping list',
normal: {fill: "#a98caf 0.6"},
hovered: {fill: "#a98caf 1"},
selected: {fill: "#a98caf 1"},
hatchFill: {
type:"weave",
color: "#8b6b92"
}
},
{
x: ['A', 'B'],
value: 20,
name: 'Possibility \n of disaster',
tooltipTitle: 'Possibility of disaster',
tooltipDesc: 'Keep a backup ready',
normal: {fill: "#9fdebe 0.8"},
hovered: {fill: "#9fdebe 1"},
selected: {fill: "#9fdebe 1"},
hatchFill: {
type:"weave",
color: "#83c3a3"
}
},
{
x: ['B', 'C'],
value: 20,
name: 'Try on a \n holiday',
tooltipTitle: 'Try on a holiday',
tooltipDesc: 'When there is no other work pending',
normal: {fill: "#f5b57c 0.8"},
hovered: {fill: "#f5b57c 1"},
selected: {fill: "#f5b57c 1"},
hatchFill: {
type:"weave",
color: "#d09259"
}
},
{
x: ['A', 'B', 'C'],
value: 30,
name: 'The Perfect \n Recipe',
tooltipTitle: 'The Perfect Recipe',
tooltipDesc: 'Easy to follow and fast to cook with whatever is in the kitchen',
label: {enabled:true, fontStyle: 'normal'},
normal: {fill: "#8392ab 0.9"},
hovered: {fill: "#8392ab 1"},
selected: {fill: "#8392ab 1"},
hatchFill: {
type:"percent40",
color: "#5f6b7d"
}
}
];
// create venn diagram
var chart = anychart.venn(data);
// set chart title
chart
.title()
.enabled(true)
.fontFamily('Roboto, sans-serif')
.fontSize(24)
.padding({ bottom: 30 })
.text('The Perfect Recipe to try while working from home');
// set chart stroke
chart.stroke('1 #fff');
// set labels settings
chart
.labels()
.fontSize(16)
.fontColor('#5e6469')
.hAlign("center")
.vAlign("center")
.fontFamily('Roboto, sans-serif')
.fontWeight('500')
.format('{%Name}');
// set intersections labels settings
chart
.intersections()
.labels()
.fontStyle('italic')
.fontColor('#fff')
.format('{%Name}');
// disable legend
chart.legend(false);
// set tooltip settings
chart
.tooltip()
.titleFormat('{%tooltipTitle}')
.format("{%tooltipDesc}")
.background().fill("#000 0.5");
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html>Veja este diagrama de Venn personalizado com o código JS / CSS / HTML completo no Playground ou CodePen .
Conclusão
Este tutorial mostra como preparar rapidamente um diagrama de Venn e torná-lo mais atraente com os vários aprimoramentos. Você pode brincar com cores, padrões e outras alternativas de personalização possíveis . Para saber mais sobre o diagrama de Venn como um tipo de gráfico, consulte seu perfil na Chartopedia .
Algum conhecimento prático de HTML e JavaScript é sempre útil. Mas, como vimos, criar visualizações com uma robusta biblioteca de gráficos JavaScript com tipos de gráficos predefinidos e recursos prontos para uso é tão simples que, mesmo sem nenhum conhecimento técnico, é fácil criar gráficos interativos úteis e bonitos. Além disso, a melhor coisa sobre AnyChart especificamente é que há uma extensa documentação e outros recursos para ajudar a criar e personalizar as visualizações sem complicações.
Boa tarde,
Eu realmente gostei muito da explicação de vocês, porém estou com dificuldade em colocar um dentro do outro.
Exemplo o conjunto A esta contido dentro do conjunto B, tentei de algumas maneiras aqui, porém sem sucesso, caso tenha a solução eu iria agradecer muito.