Диаграмма Венна - это форма визуализации данных, в которой используются формы, обычно круги, для отображения взаимосвязей между группами вещей. В этом типе диаграммы перекрывающиеся области показывают общие черты, в то время как круги, которые не перекрываются, показывают черты, которые не являются общими.
Представленные Джоном Венном, английским математиком, логиком и философом, диаграммы Венна также называются диаграммами множеств или логическими диаграммами, поскольку они показывают возможные логические отношения между элементами различных множеств. При рисовании таких диаграмм мы, скорее всего, будем иметь дело с двумя или тремя перекрывающимися кругами, поскольку иметь только один круг было бы скучно, а наличие четырех или более кругов быстро становится действительно сложным.
Эти диаграммы не только хороши для визуализации как концепции, но также предоставляют прекрасную возможность представить качественные данные и немного графического юмора. По сути, их легко и весело создавать и использовать. Я вам сейчас покажу!
Прочтите это руководство, чтобы узнать, как легко создать визуально привлекательную и информативную диаграмму Венна для вашего веб-сайта или приложения с помощью JavaScript. Весь код, использованный и продемонстрированный в руководстве, будет доступен для вас бесплатно.
Во время продолжающейся пандемии коронавируса, работая из дома и избегая еды извне, многие из нас стали поварами-любителями. Итак, давайте воспользуемся диаграммой Венна на основе JS, чтобы выяснить, какой рецепт лучше всего попробовать в рабочий день - это будет прекрасный пример использования для изучения!
Спойлер: диаграмма Венна будет разработана
Прежде чем мы начнем, я решил стимулировать ваш аппетит к классной визуализации данных и обучению и показать вам, как будет выглядеть окончательная интерактивная диаграмма Венна в JavaScript.
Проверьте это и следуйте инструкциям по построению графиков!
4 простых шага к базовой диаграмме Венна в JS
Диаграммы Венна доставляют удовольствие визуализаторам и аудитории - они обеспечивают большую ценность и быстрое понимание, а также просты в создании и понимании.
Давайте посмотрим, как мы можем создать диаграмму Венна с помощью JavaScript (HTML5). Это может быть не так просто, как создать круги на бумажной салфетке с помощью карандашей для рисования разного цвета (возможно, для сравнения собак и кошек!). Но поверьте мне, это почти так же просто и определенно более увлекательно, когда вы все делаете правильно.
Мы начнем с очень простой диаграммы Венна, а затем настроим ее.
На самом деле, вы должны выполнить эти 4 шага, чтобы построить красивую диаграмму JavaScript буквально любого типа, включая диаграмму Венна:
- Создайте HTML-страницу для диаграммы.
- Включите необходимые файлы JavaScript.
- Добавьте данные.
- Напишите JS-код для диаграммы.
1. Создайте HTML-страницу.
Создайте базовую HTML-страницу с блочным элементом, на котором будет отображаться диаграмма Венна. Этот элемент div будет содержать диаграмму, и ему будет предоставлен уникальный идентификатор для ссылки на него позже.
<!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>
Ширина и высота контейнера установлены на 100%, так что диаграмма заполняет весь экран. Вы можете установить другие значения, чтобы при необходимости изменить размер изображения.
2. Включите необходимые файлы JavaScript.
Чтобы создать диаграмму JavaScript, необходимо связать соответствующие скрипты JS, которые будут использоваться для ее разработки. Эти файлы должны быть включены в тег <script> в разделе <head> страницы HTML.
Не стесняйтесь выбирать JS-библиотеку для визуализации данных, их много и подход достаточно универсален. В этом уроке я буду использовать AnyChart. Это гибкая и мощная библиотека диаграмм JavaScript, которая позволяет довольно легко и быстро визуализировать данные в виде надежных графиков, так что даже новички будут в порядке. Для диаграммы Венна нам понадобится только ее модуль основной библиотеки, который необходим для всех диаграмм, и специальный модуль для создания этого конкретного типа диаграммы.
Вы можете загрузить необходимые скрипты и добавить их на HTML-страницу или добавить ссылки CDN, как мы делаем здесь для простоты.
<!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>
Примечание: мы добавляем тег скрипта в тело, где мы будем писать наш код для создания диаграммы.
3. Добавьте данные
Данные - это то, что составляет диаграмму, и, следовательно, это важный аспект визуализации. Большим преимуществом AnyChart является то, что он предоставляет различные способы добавления данных. На этой диаграмме Венна мы используем простые данные, поэтому мы можем напрямую включать данные на нашу страницу.
Каждая диаграмма отображает данные в определенной форме, поэтому важно убедиться, что у нас есть данные в том виде, который имеет смысл для визуализации диаграммы Венна. Это очень интуитивно понятно, поэтому нечего бояться.
Наши данные касаются трех аспектов, которые мы принимаем во внимание при выборе рецепта, который стоит попробовать во время работы на дому. Идеальный рецепт - это тот, в котором есть все 3 благоприятные характеристики.
Мы перечисляем 3 рассматриваемых атрибута как 3 точки данных и пересечения 2 комбинаций, а также все 3 из них как другие отдельные точки данных.
Диаграмма Венна принимает массив данных, поэтому мы структурируем данные аналогичным образом.
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'
}
]
Точкам данных присваивается значение, указывающее степень перекрытия и неперекрытия. Поскольку наши данные являются качественными, мы дали каждому перекрытию одно и то же значение. Имя указывает на описание каждой точки данных. Символ \n в описании - это символ новой строки, который вставляет разрыв строки.
4. Напишите код JS для диаграммы Венна.
Теперь, когда все на месте, мы готовы увидеть волшебство! С помощью всего нескольких строк кода у нас будет готова наша базовая диаграмма Венна.
Весь код JavaScript помещается в тег <script> в теле нашей HTML-страницы. Первое, что мы делаем, это добавляем функцию, включающую весь код, которая гарантирует, что код будет выполняться только после того, как страница будет готова.
<script type="text/javascript">
anychart.onDocumentReady(function() {
// All the code for drawing the chart will come here
});
</script>
Затем мы добавляем данные и создаем диаграмму, используя эти данные. Затем мы устанавливаем контейнер для ссылки на наш ранее добавленный элемент HTML и рисуем диаграмму.
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();
}
Наша диаграмма Венна нарисована, но мы добавляем еще две строки кода, чтобы дать диаграмме заголовок и форматировать метки для представления пересекающегося текста данных вместо значений, поскольку это имеет больше смысла для наших субъективных данных.
// set chart title
chart.title('The perfect recipe to try while working from home');
// set labels settings
chart.labels().format('{%Name}');
Посмотрите на результат:
Ознакомьтесь с этой базовой диаграммой Венна с полным кодом JS / CSS / HTML на Playground или CodePen.
Разве не приятно видеть полнофункциональную, красивую, интерактивную диаграмму Венна, созданную с помощью JavaScript, с помощью всего нескольких строк кода?
Настройка диаграммы Венна (чтобы сделать ее еще интереснее)
Библиотека AnyChart предоставляет множество опций для настройки внешнего вида визуализаций данных. Что бы вы ни делали, всегда есть возможности для улучшения, и мы определенно можем изменить несколько вещей в нашей диаграмме JS Venn, чтобы сделать ее более привлекательной, выделить некоторые определенные моменты, добавить функциональность, чтобы лучше понимать данные, или просто отполировать эстетику, чтобы она соответствовала требованиям. наш вкус!
Самый простой способ изменить внешний вид данных, а именно попробовать различные цветовые темы, которые предлагает AnyChart. Это можно сделать, просто добавив желаемую тему в заголовок страницы:
<script src="https://cdn.anychart.com/releases/8.9.0/themes/pastel.min.js"></script>
А затем ссылку на него в коде:
// set chart theme
anychart.theme('pastel');Давайте посмотрим на некоторые другие быстрые модификации в этом руководстве:
- Общее улучшение внешнего вида диаграммы.
- Пользовательские цвета для каждой точки данных.
- Смена шрифта.
- Спецэффекты.
1. Общее улучшение внешнего вида диаграммы.
Здесь и там мы внесем небольшие изменения, чтобы улучшить визуализацию диаграммы Венна. Вы снова увидите, насколько легко внести эти изменения.
Поскольку наша диаграмма Венна показывает текст точек данных на диаграмме, легенда нам не нужна.
// disable legend
chart.legend(false);Затем давайте добавим обводку кругам, чтобы выделить пересекающиеся области.
// set chart stroke
chart.stroke('1 #fff');И измените размер, стиль и расположение текста, чтобы улучшить заголовок и метки.
// 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}");
Вот и все:
Ознакомьтесь с этой наполовину настроенной диаграммой Венна с полным кодом JS / CSS / HTML на Playground или CodePen.
2. Пользовательские цвета для каждой точки данных.
Если нам нужен другой цвет для каждой точки данных, лучший способ - добавить к данным свойство цвета. В AnyChart мы можем указать не только цвета для каждой области, но и цвета при наведении и выделении этих областей.
Давайте добавим к нашим данным обычные, зависшие и выбранные свойства, а также укажем цвет заливки и прозрачность.
Вот пример для точки данных 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. Смена шрифта.
Мы можем использовать существующие шрифты или добавить Google Fonts, как мы это сделаем здесь. Мы просто свяжем таблицу стилей шрифта Google, который мы хотим использовать в заголовке страницы:
<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. Некоторые спецэффекты.
Чтобы оживить нашу диаграмму Венна в JavaScript, давайте добавим текстурную заливку в пересекающиеся области и немного интересного текста во всплывающей подсказке диаграммы.
Поскольку текст всплывающей подсказки и цвет заливки текстуры будут индивидуальными для каждой точки данных, мы включим это в данные.
Вот пример одной из точек данных пересечения:
{
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"
}
}
Включите это изменение в код:
// set tooltip settings
chart.tooltip()
.titleFormat('{%tooltipTitle}')
.format("{%tooltipDesc}")
.background().fill("#000 0.5");
Посмотрите финальную интерактивную диаграмму Венна на основе JavaScript со всеми этими настройками! Для вашего удобства полный код находится прямо под встроенной интерактивной графикой.
<!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',
alue: 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>
См. Эту настроенную диаграмму Венна с полным кодом JS / CSS / HTML на Площадке или CodePen.
Вывод
В этом руководстве показано, как быстро создать диаграмму Венна и сделать ее более привлекательной с помощью различных улучшений. Вы можете поиграть с цветами, узорами и другими возможными альтернативами настройки. Чтобы узнать больше о диаграмме Венна как о типе диаграммы, см. Ее профиль на Chartopedia.
Всегда полезно иметь некоторые практические знания HTML и JavaScript. Но, как мы видели, создание визуализаций с помощью надежной библиотеки диаграмм JavaScript с предварительно созданными типами диаграмм и готовыми функциями настолько просто, что даже без каких-либо технических знаний легко создавать полезные и красивые интерактивные диаграммы. Кроме того, в AnyChart особенно хорошо то, что есть обширная документация и другие ресурсы, которые помогут без проблем создавать и настраивать визуализации.
Мы в AnyChart рады поблагодарить Шачи Свадиа, опытного дизайнера данных, за создание этого замечательного руководства.
Если вы хотите написать интересный гостевой пост для нашего блога, свяжитесь с нами.
Чтобы продолжить изучение и практику визуализации данных, ознакомьтесь с другими учебными пособиями по построению диаграмм JavaScript и просмотрите полный список диаграмм, которые вы можете построить, и основные функции, которые вы можете использовать с AnyChart. Затем получайте удовольствие, создавая потрясающие визуализации быстрым и легким способом.
Первоначально опубликовано на https://www.anychart.com 11 ноября 2020 г.
