Библиотека JavaScript для отображения диаграмм Венна

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

Требования

Способность к

  • указать и нарисовать наборы
  • раскрасить наборы (и результаты операций между ними)
  • наборы меток (в приведенном ниже примере будут дополнительные метки «A» и «B»)

Бонус

Способность к

  • отображать данные внутри наборов (например, пусть A = {1;5;10}и B = {5;20}, диаграмма будет включать числа из A в первый «круг» (то же самое касается B), а также отображать A ∩ B = {5}в области пересечения)

Пример

  • Установите А и Б
  • Раскрасить A ∩ Bв красный цвет

(Изображение взято отсюда , общественное достояние)
Простая диаграмма Венна

Ответы (2)

venn.js

Гитхаб: https://github.com/benfred/venn.js

Он использует D3.js в качестве базовой графической библиотеки.

1. Укажите и нарисуйте наборы

→ Посмотреть онлайн

// Code taken from the GitHub repository, the license specified there applies.

// define sets and set set intersections
var sets = [{label: "A", size: 10}, {label: "B", size: 10}],
    overlaps = [{sets: [0,1], size: 2}];

// get positions for each set
sets = venn.venn(sets, overlaps);

// draw the diagram in the 'simple_example' div
venn.drawD3Diagram(d3.select(".simple_example"), sets, 300, 300);

2. Раскрасить наборы

Я не пробовал выбирать пользовательские цвета, но вполне вероятно, что это возможно.

Вы также можете произвольно стилизовать области пересечения: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

3. Наборы этикеток

См. первый пример.

Бонус 4. Отметьте области пересечения

Не возможно, насколько я знаю. (Должен признать, что я не полностью прочитал документацию и код.)

Примечание 1

В некоторых случаях круги не могут быть расположены правильно. В некоторых случаях эти проблемы может решить переход на алгоритм многомерного масштабирования: http://benfred.github.io/venn.js/examples/mds.html .

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

Заметка 2

Venn.js требует, чтобы вы сами создавали перекрытия и наборы. Если кого-то интересует возможность ввода {1;2;3} ∩ {2;3}, я написал для этого небольшую библиотеку. Возможно, когда-нибудь в будущем я выложу код на GitHub.

Github: https://github.com/lafarer/d3-venn
Демо: http://bl.ocks.org/lafarer/0f7677bdfa6c3ab7f6c3

Вы можете указать наборы и регионы (пересечения), цветовую схему; он поддерживает события мыши и выделение. Работает до 7 сетов.

Отказ от ответственности: я являюсь автором этого плагина d3

Ваш плагин кажется очень хорошим. Меня интересуют ошибки и неточности в распределении площадей. Бывают ли случаи, когда ваш алгоритм дает сбой?
На данный момент плагин ожидает корректную и полную «модель Венна» (без пропущенных значений или регионов). Было бы определенно полезно иметь эту проверку типа, поскольку визуализация зависит от этого. С другой стороны, проверка бизнеса (например, общая сумма каждого региона должна быть равна вселенной) не является обязанностью плагина. Что касается областей, у меня никогда не было ошибок или неточностей. Я рад что тебе понравилось.
ссылки мертвы.
Лафарер, вы переместили репозиторий в другое место? Или вы удалили его (если да, пожалуйста, удалите и этот ответ)? Спасибо!
Библиотека JavaScript для отображения диаграмм Венна
СпросиСетьПолитика конфиденциальности1y, 2v