0

I'm trying to create a chart, where the input is a list of circles (position and radius) (or better ellipses) and the overlaps of the circles become shapes and a mouseover event can be applied. I also wish for the circles to move to the front, and have a mouseover effect, almost exactly like this

http://benfred.github.io/venn.js/examples/intersection_tooltip.html

The size of the overlap does not need to be known.

I've tried using D3.js Venn diagrams by Ben Frederickson. Although I can't understand some of the chart(selection) function, I've made it so that the circles can be inputted, and are drawn fine, including the overlaps, but this still relies on having the 'data' as an input as well and all of the sets (seen in the jsonp file) are still require. I realise that I can just make a script to list all of the possible sets, but this is ideal.

http://www.benfrederickson.com/venn-diagrams-with-d3.js/

I'm struggling to understand how the code creates these overlaps and then assigns them to the set.

Cheers, Ryan

Ryan
  • 3
  • 3
  • I've just removed the function which calculates the layout and scales the chart and replaced them in the chart function with some already defined circles. – Ryan Apr 05 '15 at 00:07

1 Answers1

2

Each intersection area has an SVG path computed for it by the 'venn.intersectionAreaPath' function. It takes a list of circles and returns a path element for the intersection area.

If you already have positions for the circles, you can override the 'layoutFunction' attribute on the venn diagram object like:

var circles = [{'x' : 0, 'y': 100, 'radius' : 80},
               {'x' : 0, 'y': 0, 'radius' : 90 },];
var chart = venn.VennDiagram().layoutFunction(function() { return circles; });
d3.select("#venn").datum([{sets: [0]}, {sets:[1]}, {sets:[0,1]}]).call(chart);

This still requires having a list of all possible regions that you wish to draw (like "[{sets: [0]}, {sets:[1]}, {sets:[0,1]}]"), but this way you don't need to specify sizes for the regions.

Ben Frederickson
  • 161
  • 5