Biblioteca de JavaScript para mostrar diagramas de Venn

Estoy buscando una biblioteca de JavaScript que pueda producir diagramas de Venn .

Requisitos

La habilidad para

  • especificar y dibujar conjuntos
  • colorear conjuntos (y los resultados de las operaciones entre ellos)
  • conjuntos de etiquetas (el siguiente ejemplo tendría las etiquetas adicionales "A" y "B")

Prima

La habilidad para

  • mostrar datos dentro de los conjuntos (por ejemplo, let A = {1;5;10}y B = {5;20}, el diagrama incluiría los números de A en el primer "círculo" (lo mismo ocurre con B) y también se mostraría A ∩ B = {5}en el área de intersección)

Ejemplo

  • Conjunto A y B
  • Colorear A ∩ Ben rojo

(Imagen tomada de aquí , Dominio Público)
Diagrama de Venn simple

Respuestas (2)

venn.js

GitHub: https://github.com/benfred/venn.js

Utiliza D3.js como biblioteca de gráficos subyacente.

1. Especificar y dibujar conjuntos

→ Ver en línea

// 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. Colorear conjuntos

No he intentado elegir colores personalizados, pero es probable que sea posible.

También puede diseñar arbitrariamente áreas de intersección: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

3. Conjuntos de etiquetas

Ver el primer ejemplo.

Bonificación 4. Etiquete las áreas de intersección

No es posible que yo sepa. (Debo admitir que no he leído completamente la documentación y el código).

Nota 1

Hay algunos casos en los que los círculos no se pueden diseñar correctamente. Cambiar al algoritmo de escalado multidimensional podría resolver estos problemas en algunos casos: http://benfred.github.io/venn.js/examples/mds.html

Sin embargo, también me he encontrado con otros casos extremos en los que la falla del diseño se debe a la escala proporcional de los círculos. Es posible que desee leer los artículos del blog del autor sobre los problemas que enfrenta al dibujar diagramas de Venn:

Nota 2

Venn.js requiere que usted mismo construya las superposiciones y conjuntos. Si alguien está interesado en la capacidad de ingresar {1;2;3} ∩ {2;3}, he escrito una pequeña biblioteca para hacer esto. Tal vez ponga el código en GitHub en algún momento en el futuro.

Github: https://github.com/lafarer/d3-venn
Demostración: http://bl.ocks.org/lafarer/0f7677bdfa6c3ab7f6c3

Puede especificar conjuntos y regiones (intersecciones), combinación de colores; es compatible con los eventos y la selección del ratón. Funciona hasta 7 juegos.

Descargo de responsabilidad: soy el autor de este complemento d3

Su complemento parece muy agradable. Me interesarían los errores e imprecisiones en cuanto a la distribución de las áreas. ¿Hay casos en los que su algoritmo falla?
Hasta ahora, el complemento espera un "modelo de Venn" que sea correcto y completo (sin valores o regiones faltantes). Definitivamente sería un valor agregado tener este tipo de validación, ya que la visualización se basa en esto. Por otro lado, la validación comercial (por ejemplo, el total de cada región debe ser igual al universo) no es responsabilidad del complemento. En cuanto a las áreas, nunca tuve errores o imprecisiones. Me alegro de que te guste.
los enlaces están muertos.
Lafarer, ¿trasladaste el repositorio a otro lugar? ¿O lo eliminó (si es así, elimine esta respuesta también)? ¡Gracias!
Biblioteca de JavaScript para mostrar diagramas de Venn
RespuestasAquíPolítica de privacidad1y, 4v