minor fixes

* eslint config file, files in src/*.js should all pass * fix minor alignment issue with disjoint clusters * remove classicMDSLayout * add example showing a bounding box over the circles
benfred · Apr 30, 2016 · 7b1f8c3 · 7b1f8c3
1 parent e0866af
commit 7b1f8c3
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 105 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        "semi": 2, "no-undef": 2
+    }
+}
diff --git a/examples/boundingbox.html b/examples/boundingbox.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Venn diagram of Venn diagrams</title>
+<style>
+body {
+font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+</style>
+</head>
+
+<body>
+    <div id="venn"></div>
+</body>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>   
+<script src="../venn.js"></script>
+<script>
+var sets = [
+            {sets:["Information"], size: 12},
+            {sets:["Overlap"], size: 12},
+            {sets:["Circles"], size: 12},
+            {sets: ["Information", "Overlap"], size: 4, label: "Redundancy"},
+            {sets: ["Information", "Circles"], size: 4, label: "Pie Charts", },
+            {sets: ["Overlap", "Circles"], size: 4, label: "Eclipses"},
+            {sets: ["Information", "Overlap", "Circles"], size: 2, label: "Venn Diagrams"}
+    ];
+
+var chart = venn.VennDiagram()
+    .wrap(false)
+    .fontSize("16px")
+    .width(640)
+    .height(640);
+
+function updateVenn(sets) {
+    var div = d3.select("#venn").datum(sets);
+    var layout = chart(div),
+        circles = layout.circles;
+
+    div.selectAll(".label").style("fill", "white");
+    div.selectAll(".venn-circle path").style("fill-opacity", .6);
+
+    // add new bounding boxes
+    layout.enter
+        .filter(function(d) { return d.sets.length == 1; })
+        .append("rect")
+        .attr("class", "box")
+        .style("stroke", "#666")
+        .style("stroke-width", "2")
+        .style("fill-opacity", "0.2")
+        .attr("height", 0)
+        .attr("width", 0)
+        .attr("x", chart.width() /2)
+        .attr("y", chart.height() /2);
+
+    // move existing
+    layout.update
+        .select(".box")
+        .attr("x", function(d) {  var c = circles[d.sets[0]]; return c.x - c.radius; })
+        .attr("y", function(d) {  var c = circles[d.sets[0]]; return c.y - c.radius; })
+        .attr("height", function(d) {  var c = circles[d.sets[0]]; return 2 * c.radius; })
+        .attr("width", function(d) {  var c = circles[d.sets[0]]; return 2 * c.radius; })
+        .each("end", function() { console.log("done move"); })
+
+    // remove old (shrinking to middle)
+    layout.exit
+        .select(".box")
+        .attr("x", chart.width() /2)
+        .attr("y", chart.height() /2)
+        .attr("width", 0)
+        .attr("height", 0)
+        .style("font-size", "0px");
+
+    return layout;
+}
+
+// add/remove set areas to showcase transitions
+updateVenn(sets.slice(0, 2));
+var i = 1, direction = 1;
+window.setInterval( function() {
+    i += direction;
+    if (i >= sets.length) {
+        direction = -1;
+    } else if (i <= 1) {
+        direction = 1;
+    }
+    updateVenn(sets.slice(0, i));
+}, 1500);
+
+</script>
+</html>
diff --git a/examples/mds.html b/examples/mds.html
diff --git a/examples/venn_venn.html b/examples/venn_venn.html
@@ -37,18 +37,5 @@
 div.selectAll("text").style("fill", "white");
 div.selectAll(".venn-circle path").style("fill-opacity", .6);
 
-
-function annotateSizes() {
-    d3.select(this).select("text")
-        .append("tspan")
-        .text(function(d) { return "size " + d.size; })
-        .attr("x", function() { return d3.select(this.parentNode).attr("x"); })
-        .attr("dy", "1.5em")
-        .style("fill", "#666")
-        .style("font-size", "10px");
-}
-div.selectAll("g").transition("venn").each("end", annotateSizes).duration(0);
-
-
 </script>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,7 @@
 export {fmin, minimizeConjugateGradient, bisect} from "./src/fmin";
 export {intersectionArea, circleCircleIntersection, circleOverlap, circleArea,
         distance, circleIntegral} from "./src/circleintersection";
-export {venn, greedyLayout, classicMDSLayout, scaleSolution, normalizeSolution, bestInitialLayout,
+export {venn, greedyLayout, scaleSolution, normalizeSolution, bestInitialLayout,
         lossFunction, disjointCluster, distanceFromIntersectArea} from "./src/layout";
 export {VennDiagram, wrapText, computeTextCentres, computeTextCentre, sortAreas,
         circlePath, circleFromPath, intersectionAreaPath} from "./src/diagram";

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "venn.js",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "author": "Ben Frederickson <ben@benfrederickson.com> (http:/www.benfrederickson.com)",
   "url": "https://github.com/benfred/venn.js/issues",
   "devDependencies": {

diff --git a/src/diagram.js b/src/diagram.js
@@ -2,6 +2,8 @@ import {venn, normalizeSolution, scaleSolution} from "./layout";
 import {intersectionArea, distance, getCenter} from "./circleintersection";
 import {fmin} from "./fmin";
 
+/*global d3 console:true*/
+
 export function VennDiagram() {
     var width = 600,
         height = 350,

diff --git a/src/layout.js b/src/layout.js
@@ -387,35 +387,6 @@ export function greedyLayout(areas) {
     return circles;
 }
 
-/// Uses multidimensional scaling to approximate a first layout here
-export function classicMDSLayout(areas) {
-    // bidirectionally map sets to a rowid  (so we can create a matrix)
-    var sets = [], setids = {};
-    for (var i = 0; i < areas.length; ++i ) {
-        var area = areas[i];
-        if (area.sets.length == 1) {
-            setids[area.sets[0]] = sets.length;
-            sets.push(area);
-        }
-    }
-
-    // get the distance matrix, and use to position sets
-    var distances = getDistanceMatrices(areas, sets, setids).distances;
-    var positions = mds.classic(distances);
-
-    // translate rows back to (x,y,radius) coordinates
-    var circles = {};
-    for (i = 0; i < sets.length; ++i) {
-        var set = sets[i];
-        circles[set.sets[0]] = {
-            x: positions[i][0],
-            y: positions[i][1],
-            radius:  Math.sqrt(set.size / Math.PI)
-        };
-    }
-    return circles;
-}
-
 /** Given a bunch of sets, and the desired overlaps between these sets - computes
 the distance from the actual overlaps to the desired overlaps. Note that
 this method ignores overlaps of more than 2 circles */
@@ -604,7 +575,7 @@ export function normalizeSolution(solution, orientation, orientationOrder) {
         if (right) {
             xOffset = returnBounds.xRange.max  - bounds.xRange.min + spacing;
         } else {
-            xOffset = returnBounds.xRange.max  - bounds.xRange.max - spacing;
+            xOffset = returnBounds.xRange.max  - bounds.xRange.max;
             centreing = (bounds.xRange.max - bounds.xRange.min) / 2 -
                         (returnBounds.xRange.max - returnBounds.xRange.min) / 2;
             if (centreing < 0) xOffset += centreing;
@@ -613,7 +584,7 @@ export function normalizeSolution(solution, orientation, orientationOrder) {
         if (bottom) {
             yOffset = returnBounds.yRange.max  - bounds.yRange.min + spacing;
         } else {
-            yOffset = returnBounds.yRange.max  - bounds.yRange.max - spacing;
+            yOffset = returnBounds.yRange.max  - bounds.yRange.max;
             centreing = (bounds.yRange.max - bounds.yRange.min) / 2 -
                         (returnBounds.yRange.max - returnBounds.yRange.min) / 2;
             if (centreing < 0) yOffset += centreing;

diff --git a/venn.js b/venn.js
@@ -1135,7 +1135,7 @@
             if (right) {
                 xOffset = returnBounds.xRange.max  - bounds.xRange.min + spacing;
             } else {
-                xOffset = returnBounds.xRange.max  - bounds.xRange.max - spacing;
+                xOffset = returnBounds.xRange.max  - bounds.xRange.max;
                 centreing = (bounds.xRange.max - bounds.xRange.min) / 2 -
                             (returnBounds.xRange.max - returnBounds.xRange.min) / 2;
                 if (centreing < 0) xOffset += centreing;
@@ -1144,7 +1144,7 @@
             if (bottom) {
                 yOffset = returnBounds.yRange.max  - bounds.yRange.min + spacing;
             } else {
-                yOffset = returnBounds.yRange.max  - bounds.yRange.max - spacing;
+                yOffset = returnBounds.yRange.max  - bounds.yRange.max;
                 centreing = (bounds.yRange.max - bounds.yRange.min) / 2 -
                             (returnBounds.yRange.max - returnBounds.yRange.min) / 2;
                 if (centreing < 0) yOffset += centreing;
@@ -1772,4 +1772,4 @@
     exports.circleFromPath = circleFromPath;
     exports.intersectionAreaPath = intersectionAreaPath;
 
-}));
+}));