Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
A javascript library for laying out area proportional venn and euler diagrams.
Details of how this library works can be found on the blog post I wrote about this. A follow up post discusses testing strategy and algorithmic improvements.
If you use NPM, npm install venn.js
. Otherwise, download the latest release.
This library depends on d3.js to display the venn diagrams.
To lay out a simple diagram, just define the sets and their sizes along with the sizes of all the set intersections.
The VennDiagram object will calculate a layout that is proportional to the input sizes, and display it in the appropriate selection when called:
var sets = [ {sets: ['A'], size: 12},
{sets: ['B'], size: 12},
{sets: ['A','B'], size: 2}];
var chart = venn.VennDiagram()
d3.select("#venn").datum(sets).call(chart);
The style of the Venn Diagram can be customized by using D3 after the diagram has been drawn. For instance to draw a Venn Diagram with white text and a darker fill:
var chart = venn.VennDiagram()
d3.select("#inverted").datum(sets).call(chart)
d3.selectAll("#inverted .venn-circle path")
.style("fill-opacity", .8);
d3.selectAll("#inverted text").style("fill", "white");
View this example, along with other possible styles
To have a layout that reacts to a change in input, all that you need to do is update the dataset and call the chart again:
// draw the initial diagram
var chart = venn.VennDiagram()
d3.select("#venn").datum(getSetIntersections()).call(chart);
// redraw the diagram on any change in input
d3.selectAll("input").on("change", function() {
d3.select("#venn").datum(getSetIntersections()).call(chart);
});
Making the diagram interactive is basically the same idea as changing the style: just add event listeners to the elements in the venn diagram. To change the text size and circle colours on mouseover:
d3.selectAll("#rings .venn-circle")
.on("mouseover", function(d, i) {
var node = d3.select(this).transition();
node.select("path").style("fill-opacity", .2);
node.select("text").style("font-weight", "100")
.style("font-size", "36px");
})
.on("mouseout", function(d, i) {
var node = d3.select(this).transition();
node.select("path").style("fill-opacity", 0);
node.select("text").style("font-weight", "100")
.style("font-size", "24px");
});
Another common case is adding a tooltip when hovering over the elements in the diagram. The only tricky thing here is maintaining the correct Z-order so that the smallest intersection areas are on top, while still making the area that is being hovered over appear on top of the others:
// draw venn diagram
var div = d3.select("#venn")
div.datum(sets).call(venn.VennDiagram());
// add a tooltip
var tooltip = d3.select("body").append("div")
.attr("class", "venntooltip");
// add listeners to all the groups to display tooltip on mouseover
div.selectAll("g")
.on("mouseover", function(d, i) {
// sort all the areas relative to the current item
venn.sortAreas(div, d);
// Display a tooltip with the current size
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " users");
// highlight the current path
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 3)
.style("fill-opacity", d.sets.length == 1 ? .4 : .1)
.style("stroke-opacity", 1);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d, i) {
tooltip.transition().duration(400).style("opacity", 0);
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 0)
.style("fill-opacity", d.sets.length == 1 ? .25 : .0)
.style("stroke-opacity", 0);
});
Released under the MIT License.
FAQs
Area Proportional Venn and Euler Diagrams
The npm package venn.js receives a total of 24,267 weekly downloads. As such, venn.js popularity was classified as popular.
We found that venn.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.