Диаграмма Венна и как создать такую ​​визуализацию (с помощью JavaScript)

Ноя122020

Статьи по дизайну

Эти диаграммы не только хорошо визуализируют концепцию, но также предоставляют прекрасную возможность представить качественные данные и немного графического юмора. По сути, их легко и весело создавать и использовать. Я покажу вам прямо сейчас!

Прочтите это руководство, чтобы узнать как легко создать визуально привлекательную и информативную диаграмму Венна для вашего веб-сайта или приложения с помощью JavaScript. Весь код, использованный и продемонстрированный в руководстве, будет доступен для вас бесплатно.

Во время продолжающейся пандемии коронавируса, работая из дома и избегая еды извне, многие из нас стали поварами-любителями. Итак, давайте воспользуемся диаграммой Венна на основе JS, чтобы выяснить какой рецепт лучше всего попробовать в рабочий день — это будет прекрасный пример использования!

Спойлер: Диаграмма Венна будет разработана

Прежде чем мы начнем, я решил стимулировать ваш аппетит к классной визуализации данных и обучению и показать вам, как будет выглядеть окончательная интерактивная диаграмма Венна в JavaScript.

Ознакомьтесь и следуйте инструкциям по построению графиков!

4 простых шага к базовой диаграмме Венна JS

Диаграммы Венна доставляют удовольствие визуализаторам и аудитории — они обеспечивают большую ценность и быстрое понимание, при этом их легко составить и понять.

Давайте посмотрим, как мы можем создать диаграмму Венна с помощью JavaScript (HTML5). Это может быть не так просто, как создать круги на бумажной салфетке с помощью карандашей разного цвета (возможно, для сравнения собак и кошек!). Но поверьте мне, это почти так же просто и определенно увлекательнее, когда вы все делаете правильно.

Мы начнем с очень простой диаграммы Венна, а затем настроим ее.

На самом деле, вы должны выполнить эти 4 шага, чтобы построить красивую диаграмму JavaScript буквально любого типа, включая диаграмму Венна:

• Создайте HTML-страницу для диаграммы.
• Включите необходимые файлы JavaScript.
• Добавьте данные.
• Напишите JS-код для диаграммы.

1. Создайте HTML-страницу

Создайте базовую HTML-страницу с блочным элементом, на котором будет отображаться диаграмма Венна. Этот элемент div будет содержать диаграмму, и ему будет предоставлен уникальный идентификатор, чтобы ссылаться на него позже.

Ширина и высота контейнера установлены на 100%, так что диаграмма заполняет весь экран. Вы можете установить другие значения, чтобы при необходимости изменить размер изображения.

2. Включите необходимые файлы JavaScript

Чтобы создать диаграмму JavaScript, необходимо связать соответствующие скрипты JS, которые будут использоваться для ее разработки. Эти файлы должны быть включены в тег

Примечание: мы добавляем тег скрипта в тело, где мы будем писать наш код для создания диаграммы.

3. Добавьте данные

Данные - это то, что составляет диаграмму, и, следовательно, это важный аспект визуализации. Большим преимуществом AnyChart является то, что он предоставляет различные способы добавления данных. На этой диаграмме Венна мы используем простые данные, поэтому мы можем напрямую включить их на нашу страницу.

Каждая диаграмма отображает данные в определенной форме, поэтому важно убедиться, что у нас есть данные в том виде, который имеет смысл для визуализации диаграммы Венна. Это очень интуитивно понятно, поэтому нечего бояться.

Наши данные касаются трех аспектов, которые мы учитываем при выборе рецепта, который нужно опробовать во время работы на дому. Идеальный рецепт - это рецепт, обладающий всеми тремя благоприятными характеристиками.

Мы перечисляем 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'],
значение: 25,
name: 'Добавить в  n список желаний'
},
{
x: ['A', 'B'],
значение: 25,
name: 'Возможность  n катастрофы'
},
{
x: ['B', 'C'],
значение: 25,
name: 'Примерь  n праздник'
},
{
x: ['A', 'B', 'C'],
значение: 25,
name: 'Идеальный  n рецепт'
}
]  

Точкам данных присваивается значение, указывающее степень перекрытия и отсутствия перекрытия. Поскольку наши данные качественные, мы дали каждому перекрытию одно и то же значение. Имя указывает на описание каждой точки данных. Символ n в описании - это символ новой строки, который вставляет разрыв строки.

4. Напишите код JS для диаграммы Венна

Теперь, когда все на месте, мы готовы увидеть волшебство! С помощью всего нескольких строк кода у нас будет готова наша базовая диаграмма Венна.

Весь код JavaScript помещается внутри тега

Затем мы добавляем данные и создаем диаграмму, используя эти данные. Затем мы устанавливаем контейнер для ссылки на наш ранее добавленный элемент HTML и рисуем диаграмму.

  anychart.onDocumentReady (function () {
var data = [{  data  }];
 
// создаем диаграмму Венна
var chart = anychart.venn (данные);
 
// устанавливаем идентификатор контейнера для графика
chart.container ('контейнер');
 
// запускаем рисование графика
chart.draw ();
}  

Наша диаграмма Венна нарисована, но мы добавляем еще две строки кода, чтобы дать диаграмме название, и форматировать метки для представления пересекающихся текстов данных вместо значений, поскольку это имеет больше смысла для наших субъективных данных.

  // установить заголовок диаграммы
chart.title («Идеальный рецепт, который можно попробовать, работая дома»);
 
// устанавливаем настройки меток
chart.labels (). format ('{% Name}');  

Посмотрите на результат:

Ознакомьтесь с этой базовой диаграммой Венна с полным кодом JS / CSS / HTML на Playground или CodePen.

Разве не приятно видеть полнофункциональную, красивую интерактивную диаграмму Венна, созданную с помощью JavaScript, в таком небольшом количестве строк кода?

Настройка диаграммы Венна (чтобы сделать ее еще интереснее)

Библиотека AnyChart предоставляет множество опций для настройки внешнего вида визуализаций данных. Что бы вы ни делали, всегда есть возможности для улучшения, и мы определенно можем изменить несколько вещей в нашей диаграмме JS Venn, чтобы сделать ее более интересной, выделить некоторые определенные моменты, добавить функциональность, чтобы лучше понимать данные, или просто отполировать эстетику в соответствии с требованиями. наш вкус!

Самый простой способ изменить внешний вид данных - попробовать различные цветовые темы, предлагаемые AnyChart. Это можно сделать, просто добавив желаемую тему в заголовок страницы и указав ее в коде.

  // установить тему диаграммы
anychart.theme ('пастель');  

Давайте посмотрим на некоторые другие быстрые изменения в этом руководстве:

• Общее улучшение внешнего вида диаграммы.
• Пользовательские цвета для каждой точки данных.
• Изменение шрифта.
• Спецэффекты.

1. Общее улучшение внешнего вида диаграммы

Мы будем вносить некоторые небольшие изменения кое-где, чтобы улучшить визуализацию диаграммы Венна. Вы снова увидите, как легко внести эти изменения.

Поскольку наша диаграмма Венна показывает текст точек данных на диаграмме, нам в действительности не нужна легенда.

  // отключить легенду
chart.legend (ложь);  

Затем давайте добавим обводку кружкам, чтобы выделить пересекающиеся области.

  // установить ход графика
chart.stroke ('1 #fff');  

И измените размер, стиль и расположение текста, чтобы улучшить заголовок и метки.

  // установить заголовок диаграммы
диаграмма
.заглавие()
.enabled (истина)
.fontSize (24)
.padding ({bottom: 25})
.text («Идеальный рецепт, который можно попробовать, работая дома»);

// устанавливаем настройки ярлыков
диаграмма
.labels ()
.fontSize (14)
.fontColor ("# 5e6469")
.hAlign ("центр")
.vAlign ("центр")
.fontWeight ("500")
.format ("{% Name}");

// установка настроек меток пересечений
диаграмма
.intersections ()
.labels ()
.fontStyle ("курсив")
.fontColor ("# fff")
.format ("{% Name}");  

Итак:

Посмотрите эту наполовину настроенную диаграмму Венна с полным кодом JS / CSS / HTML на Playground или CodePen.

2. Пользовательские цвета для каждой точки данных

Если нам нужен другой цвет для каждой точки данных, лучший способ - добавить к данным свойство цвета. В AnyChart мы можем указывать не только цвета для каждой области, но и цвета при наведении и выборе этих областей.

Давайте добавим к нашим данным свойства нормального, зависшего и выделенного, а также определим цвет заливки и прозрачность.

Вот пример точки данных A:

  {
x: 'A',
значение: 100,
name: 'ВРЕМЯ  n Можно быстро сделать',
нормальный: {fill: "# 8ecafb 0.7"},
завис: {fill: "# 8ecafb 1"},
выбрано: {fill: "# 8ecafb 1"}
}  

3. Смена шрифта

Мы можем использовать существующие шрифты или добавить шрифты Google, как мы это сделаем здесь. Мы просто свяжем таблицу стилей шрифта Google, который мы хотим использовать в заголовке страницы, а затем укажем это семейство шрифтов везде, где мы хотим его применить.

  // добавьте это в код
.fontFamily ('Робото, без засечек')  

4. Некоторые спецэффекты

Чтобы оживить нашу диаграмму Венна в JavaScript, давайте добавим текстурную заливку в пересекающиеся области и интересный текст во всплывающей подсказке диаграммы.

Поскольку текст всплывающей подсказки и цвет заливки текстуры будут специфичными для каждой точки данных, мы включим это в данные.

Вот пример одной из точек данных перекрестка:

  {
x: ['A', 'C'],
значение: 20,
name: 'Добавить в  n список желаний',
tooltipTitle: 'Добавить в список желаний',
tooltipDesc: 'Добавить ингредиенты в следующий список покупок',
нормальный: {fill: "# a98caf 0.6"},
завис: {fill: "# a98caf 1"},
выбрано: {fill: "# a98caf 1"},
hatchFill: {
тип: «плетение»,
цвет: "# 8b6b92"
}
}  

Включите это изменение в код:

  // установить настройки всплывающей подсказки
chart.tooltip ()
.titleFormat ('{% tooltipTitle}')
.format ("{% tooltipDesc}")
.background (). fill ("# 000 0,5");  

Посмотрите финальную интерактивную диаграмму Венна на основе JavaScript со всеми этими настройками! Для вашего удобства его полный код находится прямо под встроенной интерактивной графикой.

См. Эту настроенную диаграмму Венна с полным кодом JS / CSS / HTML на Playground или CodePen.

Заключение

В этом руководстве показано, как быстро создать диаграмму Венна и сделать ее более привлекательной с помощью различных улучшений. Вы можете поиграть с цветами, узорами и другими возможными вариантами настройки. Чтобы узнать больше о диаграмме Венна как о типе диаграммы, см. Ее профиль на Chartopedia.

Всегда полезно иметь некоторые практические знания HTML и JavaScript. Но, как мы видели, создание визуализаций с помощью надежной библиотеки диаграмм JavaScript с предварительно созданными типами диаграмм и готовыми функциями настолько просто, что даже без каких-либо технических знаний легко создавать полезные и красивые интерактивные диаграммы. Кроме того, в AnyChart особенно хорошо то, что есть обширная документация и другие ресурсы, которые помогут без проблем создавать и настраивать визуализации.

Чтобы продолжить обучение и практику с визуализацией данных, просмотрите другие руководства по построению диаграмм JavaScript и просмотрите полный список диаграмм, которые вы можете построить, и основные функции, которые вы можете использовать с AnyChart. Затем получайте удовольствие, создавая потрясающие визуализации быстрым и легким способом.