whitesource
Version:
whitesource node module
97 lines (89 loc) • 2.48 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic venn.js example</title>
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div style="float:left;padding:20px">
<table>
<tr>
<td>|A|</td>
<td>
<input class="input-mini venn_set" id="a" type="number" value="16">
</td>
</tr>
<tr>
<td>|B|</td>
<td>
<input class="input-mini venn_set" id="b" type="number" value="16">
</td>
</tr>
<tr>
<td>|C|</td>
<td>
<input class="input-mini venn_set" id="c" type="number" value="12">
</td>
</tr>
<tr>
<td>|A∩B|</td>
<td>
<input class="input-mini venn_area" id="0,1" type="number" value="4">
</td>
</tr>
<tr>
<td>|A∩C|</td>
<td>
<input class="input-mini venn_area" id="0,2" type="number" value="4">
</td>
</tr>
<tr>
<td>|B∩C|</td>
<td>
<input class="input-mini venn_area" id="1,2" type="number" value="3">
</td>
</tr>
<tr>
<td>|A∩B∩C| </td>
<td>
<input class="input-mini venn_area" id="0,1,2" type="number" value="2">
</td>
</tr>
</table>
</div>
<div class="dynamic"></div>
<div style="clear: both;"></div>
</body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="../venn.js"></script>
<script>
function getSetIntersections() {
areas = d3.selectAll(".venn_area")[0].map(
function (element) {
return { sets: element.id.split(",").map(function(value) { return parseInt(value);}),
size: parseFloat(element.value)};} );
return areas;
}
function getSets() {
var sets=[{"label": "A"}, {"label":"B"}, {"label": "C"}], areas = [];
d3.selectAll(".venn_set")[0].map(
function(element, i) { sets[i].size = parseFloat(element.value); });
return sets;
}
var w = Math.min(450, document.documentElement.clientWidth-30), h = 2*w/3;
// draw the initial set
var sets = venn.venn(getSets(), getSetIntersections()),
diagram = venn.drawD3Diagram(d3.select(".dynamic"), sets, w, h);
// redraw the sets on any change in input
d3.selectAll("input").on("change", function() {
var sets = venn.venn(getSets(), getSetIntersections());
venn.updateD3Diagram(diagram, sets);
});
</script>
</html>