Пошаговое руководство по созданию интерактивных диаграмм Венна для Интернета с помощью JS, продемонстрированное с помощью Толкиена
Люди — визуальные существа, и диаграммы широко используются для улучшения UX, когда дело доходит до отображения большого количества информации. Возьмем, к примеру, диаграммы Венна, которые отлично отображают сходства и различия между несколькими наборами элементов. И можно без особых хлопот создать хороший интерактив для веб-страницы или приложения.
Пролистывая твиттер перед Рождеством, я наткнулся на прикольную диаграмму Венна, на которой сравниваются Санта-Клаус, Саурон, Гэндольф и Том Бомбадил. Ради интереса я воспроизвел это с помощью JavaScript. Это оказалось достаточно просто, чтобы дать мне представление о руководстве по быстрому построению диаграмм Венна на основе JS, которое, как я надеялся, могло быть полезным как для дизайнеров, так и для разработчиков.
Итак, я со статьей! Оригинальная графика Tea with Tolkien, которая вдохновила меня, используется в качестве иллюстративного примера — давайте построим эту диаграмму Венна на JavaScript шаг за шагом прямо сейчас!
Создание диаграммы Венна в JavaScript
Создать диаграмму Венна с помощью JS довольно просто. Вообще говоря, есть четыре основных шага, которые вы должны предпринять. Это:
- Создайте HTML-контейнер
- Включите файлы JavaScript, которые будут использоваться
- Добавьте данные для визуализации
- Закодируйте диаграмму
1. Создайте HTML-контейнер
Создайте базовую HTML-страницу или используйте существующую. Добавьте элемент <div> в качестве контейнера для диаграммы Венна и присвойте ему уникальный идентификатор. Вы можете указать размер контейнера равным 100 %, чтобы диаграмма заполнила всю страницу, или настроить параметры стиля по своему усмотрению.
Вот пример:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
</head>
<body>
<div id=”container” style=”width: 100%; height: 100%”></div>
</body>
</html>
2. Включите файлы JavaScript, которые будут использоваться.
Здесь я покажу вам, как использовать библиотеку JavaScript для создания диаграммы Венна. Библиотеки диаграмм JS обеспечивают базовую настройку для быстрого построения визуализации данных с минимальным объемом кода. Есть несколько хороших, которые вы можете быстро найти в Google. Здесь я использую JS-библиотеку AnyChart только для иллюстрации руководства, которое является одним из тех, которые поддерживают диаграммы Венна. Основы процесса создания в основном такие же или похожие для других, которые вы можете выбрать в своей ситуации.
Чтобы использовать любую библиотеку диаграмм JavaScript, вы должны связать соответствующие сценарии JS, необходимые для создания графика данных. Для диаграммы Венна в этом случае нужны модули «ядро» и «венн». Эти файлы должны быть помещены в тег <script> раздела <head> вашей HTML-страницы.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src=”https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src=”https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
</head>
<body>
<div id=”container” style=”width: 100%; height: 100%”></div>
<script>
// All the JS Venn diagramming code comes here.
</script>
</body>
</html>
3. Добавьте данные для визуализации
Для этой диаграммы Венна данные довольно просты. Поэтому его можно добавить как набор данных, организованный как массив объектов. Я взял данные прямо из исходной визуализации, и вот что у меня получилось:
let data = [
{
x: “A”,
value: 100,
name: “TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow”
},
{
x: “B”,
value: 100,
name: “SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh”
},
{
x: “C”,
value: 100,
name: “GANDALF\n\nwizard,\nfireworks”
},
{
x: “D”,
value: 100,
name: “DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay”
},
{
x: [“A”, “C”],
value: 40,
name: “special hat,\nlikes hobbits”
},
{
x: [“A”, “B”],
value: 40,
name: “merry fellow,\nwife guy”
},
{
x: [“C”, “D”],
value: 40,
name: “irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn”
},
{
x: [“B”, “D”],
value: 40,
name: “teaches Elves to\nmake things,\nhas flying servants”
},
{
x: [“A”, “B”, “C”],
value: 30,
name: “benevolent,\nbig beard”
},
{
x: [“B”, “C”, “D”],
value: 30,
name: “giver of gifts,\nis coming to town\nbling bling”
},
{
x: [“A”, “B”, “D”],
value: 30,
name: “loves to sing,\nsees you”
},
{
x: [“A”, “C”, “D”],
value: 30,
name: “lives in\nmiddle-earth”
},
{
x: [“A”, “B”, “C”, “D”],
value: 5,
name: “ancient,\npowerful,\nmysterious,\nmany names”
}
];
Основная сцена готова. Теперь позвольте мне показать вам последний шаг к воплощению диаграммы Венна в JS!
4. Закодируйте диаграмму
Вам нужно будет написать всего несколько строк кода JavaScript, чтобы создать визуализацию диаграммы Венна для готового набора данных. Не забудьте разместить все это внутри тегов <script> в теле вашей страницы.
Первое, что вы должны сделать, это включить функцию, которая гарантирует, что код будет выполняться только после полной загрузки веб-страницы:
<script>
anychart.onDocumentReady(function() {
// The following JavaScript charting code comes here.
});
</script>
Теперь внутри этой функции скопируйте данные из предыдущего шага.
Затем создайте экземпляр диаграммы Венна из этих данных:
let chart = anychart.venn(data);
Поскольку диаграмма Венна должна отображать текстовое значение, а не числовое значение, соответствующим образом настройте параметры метки:
chart.labels().format(“{%Name}”);
Вы также можете дать название диаграмме, чтобы все поняли, о чем ваша диаграмма Венна:
chart.title(“Tolkien Venn Diagram”);
Наконец, обратитесь к ранее добавленному элементу блока HTML (см. первый шаг) и нарисуйте диаграмму:
chart.container(“container”); chart.draw();
Вот и все, базовая диаграмма Венна на JavaScript запущена и работает! Проверьте это с полным кодом ниже и на CodePen.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Venn Diagram</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-venn.min.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script>
anychart.onDocumentReady(function() {
// adding data
let data = [
{
x: "A",
value: 100,
name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow"
},
{
x: "B",
value: 100,
name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh"
},
{
x: "C",
value: 100,
name: "GANDALF\n\nwizard,\nfireworks"
},
{
x: "D",
value: 100,
name: "DARK LORD SAURON\n\n cute, evil,\nbabygirl, slay"
},
{
x: ["A", "C"],
value: 40,
name: "special hat,\nlikes hobbits"
},
{
x: ["A", "B"],
value: 40,
name: "merry fellow,\nwife guy"
},
{
x: ["C", "D"],
value: 40,
name: "irritable,\nemo maia\nno wife,\nweirdly flirty with\nGaladriel in\nadaptations,\nwould rather not\nspeak to Celeborn"
},
{
x: ["B", "D"],
value: 40,
name: "teaches Elves to\nmake things,\nhas flying servants"
},
{
x: ["A", "B", "C"],
value: 30,
name: "benevolent,\nbig beard"
},
{
x: ["B", "C", "D"],
value: 30,
name: "giver of gifts,\nis coming to town\nbling bling"
},
{
x: ["A", "B", "D"],
value: 30,
name: "loves to sing,\nsees you"
},
{
x: ["A", "C", "D"],
value: 30,
name: "lives in\nmiddle-earth"
},
{
x: ["A", "B", "C", "D"],
value: 5,
name: "ancient,\npowerful,\nmysterious,\nmany names"
}
];
// creating a venn diagram with the data
let chart = anychart.venn(data);
// setting the labels
chart.labels().format("{%Name}");
// setting the chart title
chart.title("Tolkien Venn Diagram");
// setting the container id
chart.container("container");
// drawing the diagram
chart.draw();
});
</script>
</body>
</html>
Настройка диаграммы Венна JavaScript
Точно так же, как писатель создает первый черновик книги, а затем вносит исправления, чтобы улучшить его, вы можете настроить свою диаграмму Венна, чтобы она выглядела лучше и именно так, как вы хотите. Я покажу вам, как сделать несколько быстрых настроек. Все изменения будут последовательно подталкиваться к основному. Последний пример диаграммы Венна в этом руководстве будет очень похож на исходный.
1. Отключить легенду
Базовая диаграмма Венна, построенная к этому моменту, имеет легенду под самой диаграммой, созданную автоматически. В данном случае это кажется излишним, так как имена уже отображаются в кружках. Когда вам не нужна легенда, вы можете отключить ее и получить более чистый вид диаграммы.
chart.legend(false);
2. Настройте метки
Вы также можете изменить настройки текста этикеток Венна. Например, измените размер шрифта, цвет, толщину и выравнивание текста для визуального улучшения внешнего вида. Помните, что метки пересечения можно настроить отдельно, что переопределит общие настройки меток.
// setting the labels
chart
.labels()
.fontSize(14)
.fontColor("#000")
.hAlign("center")
.vAlign("center")
.fontWeight("500")
.format("{%Name}");
// setting the intersection labels
chart
.intersections()
.labels()
.fontSize(11)
.fontColor("#000")
.format("{%Name}");
3. Установите собственные цвета
Я чувствую, что любая диаграмма выглядит намного более персонализированной, когда цвета указаны в соответствии с точками данных. Но это полностью зависит от вас, конечно. Здесь давайте добавим атрибут заполнения для каждой точки данных в нормальном состоянии, что означает, когда точки не наведены и не выбраны. (Вы можете настроить внешний вид в наведенном или выбранном состоянии таким же образом.)
Один из примеров того, как такие настройки могут быть применены к каждой точке данных, выглядит следующим образом:
let data = [
{
x: “A”,
value: 100,
name: “TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow”,
normal: { fill: “#afb5f1 0.7” }
},
…
];
4. Улучшить заголовок
Чтобы сделать заголовок диаграммы Венна более информативным и привлекательным, его легко отформатировать с помощью HTML. Например:
chart
.title()
.enabled(true)
.useHtml(true)
.text(
“<span style = ‘color: #000; font-size:18px;’>Fun Venn Diagram Showing J.R.R. Tolkien’s Characters</span>” +
“<br/><span style=’font-size: 15px; color:#cf0011'>(with Santa Claus)</span>”
);
5. Улучшить всплывающую подсказку
А теперь небольшой трюк для тонкой настройки внешнего вида всплывающей подсказки путем избавления от ненужных элементов:
chart.tooltip().format(“”); chart.tooltip().separator(false);
Вот как выглядит получившаяся диаграмма Венна после всех этих настроек! Ознакомьтесь с его интерактивной версией с полным кодом на CodePen.
6. Добавьте дополнительного персонажа
Диаграмма Венна на основе JS, построенная до сих пор, похожа на ту, которая вдохновила меня, и именно так я хотел, чтобы она выглядела. Но Чай с Толкином на этом не остановились и еще добавили Сарумана! Ну и давайте тоже!
Собственно, все осталось по-прежнему, осталось лишь добавить необходимые данные по Саруману и его пересечениям с другими персонажами. Вот весь набор данных:
let data = [
{
x: "A",
value: 100,
name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow",
normal: { fill: "#afb5f1 0.7" }
},
{
x: "B",
value: 100,
name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh",
normal: { fill: "#fb7571 0.7" }
},
{
x: "C",
value: 100,
name: "GANDALF\n\nfireworks,\nlikes adventures",
normal: { fill: "#c7c2bd 0.7" }
},
{
x: "D",
value: 100,
name: "DARK LORD SAURON\n\n cute,\nbabygirl, slay",
normal: { fill: "#f9eb97 1" }
},
{
x: "E",
value: 50,
name: "SARUMAN\n\ncrazy long\nfingernails,\nrainbow cloak"
},
{
x: ["A", "C"],
value: 40,
name: "special hat,\nlikes hobbits",
normal: { fill: "#99a0df 0.7" }
},
{
x: ["A", "B"],
value: 40,
name: "merry fellow,\nwife guy",
normal: { fill: "#b17cb8 0.7" }
},
{
x: ["C", "D"],
value: 40,
name: "flirty with \nGaladriel in \nadaptations",
normal: { fill: "#e3b55f 1" }
},
{
x: ["B", "D"],
value: 40,
name: "teaches Elves to\nmake things,\nhas flying servants",
normal: { fill: "#fd8f38 0.7" }
},
{
x: ["C", "E"],
value: 10,
name: "wizard,\npipe-weed\nknows about\nhobbits"
},
{
x: ["D", "E"],
value: 10,
name: "wants Ring,\nevil,\nmagic voice"
},
{
x: ["A", "B", "C"],
value: 30,
name: "benevolent,\nbig beard",
normal: { fill: "#a671af 0.7" }
},
{
x: ["B", "C", "D"],
value: 30,
name: "giver of gifts,\nis coming to town,\nbling bling",
normal: { fill: "#f1842f 1" }
},
{
x: ["A", "B", "D"],
value: 30,
name: "loves to sing,\nsees you",
normal: { fill: "#b2879b 1" }
},
{
x: ["A", "C", "D"],
value: 30,
name: "lives in\nmiddle-earth",
normal: { fill: "#a69ab0 1" }
},
{
x: ["C", "D", "E"],
value: 30,
name: "irritable,\n emo maia\nno wife",
normal: { fill: "d2a452 0.2" }
},
{
x: ["A", "B", "C", "D"],
value: 5,
name: "ancient,\npowerful,\nmysterious,\nmany names",
normal: { fill: "#ab8298 1" }
}
];
Посмотрите, как теперь выглядит эта диаграмма Венна на JavaScript! Проверьте это с полным кодом на CodePen.
Заключение
Некоторое знание HTML и JavaScript всегда полезно. Но, видите ли, теперь вы знаете, как создать диаграмму Венна, даже без особых усилий. Такая визуализация будет интерактивной и встраиваемой в любую веб-страницу или приложение. Дайте знать, если у вас появятся вопросы.
Основные шаги остаются теми же для других типов диаграмм, а также других библиотек — попробуйте, создайте немного волшебства, и давайте все проверим, что у вас есть!
