use d3 version 4.0

Upgrade to use d3 version 4.0. Also fix some minor bugs in the normalization_test and venneuler comparison
benfred · Aug 7, 2016 · a308b39 · a308b39
1 parent 80b76d0
commit a308b39
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 106 deletions.
diff --git a/examples/boundingbox.html b/examples/boundingbox.html
@@ -14,7 +14,7 @@
     <div id="venn"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>   
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 var sets = [
@@ -56,12 +56,12 @@
 
     // move existing
     layout.update
-        .select(".box")
+        .selectAll(".box")
+        .filter(function(d) { return d.sets in circles; })
         .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

diff --git a/examples/css_styled.html b/examples/css_styled.html
@@ -23,8 +23,7 @@
 
 <body>
 <div id="venn"></div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 // create chart, and turn off default styling (using CSS instead)

diff --git a/examples/dynamic.html b/examples/dynamic.html
@@ -62,11 +62,11 @@
 <div style="clear: both;"></div>
 
 </body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 function getSetIntersections() {
-    areas = d3.selectAll(".venn_area")[0].map(
+    areas = d3.selectAll(".venn_area").nodes().map(
         function (element) {
             return { sets: element.id.split(","),
                      size: parseFloat(element.value)};} );

diff --git a/examples/interactive.html b/examples/interactive.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
     <script src="../venn.js"></script>
     <script src="./medical.jsonp"></script>
 

diff --git a/examples/intersection_tooltip.html b/examples/intersection_tooltip.html
@@ -30,7 +30,7 @@
 }
 </style>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script src="./lastfm.jsonp"></script>
 
@@ -49,7 +49,7 @@
 div.selectAll("path")
     .style("stroke-opacity", 0)
     .style("stroke", "#fff")
-    .style("stroke-width", 0)
+    .style("stroke-width", 3)
 
 div.selectAll("g")
     .on("mouseover", function(d, i) {
@@ -63,7 +63,6 @@
         // 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);
     })
@@ -77,7 +76,6 @@
         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);
     });

diff --git a/examples/medical.html b/examples/medical.html
@@ -17,7 +17,7 @@
 
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script src="medical.jsonp"></script>
 <script>

diff --git a/examples/orientation_order.html b/examples/orientation_order.html
@@ -21,7 +21,7 @@ <h4> custom ordering </h4>
     <div id="custom"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 var sets = [

diff --git a/examples/simple.html b/examples/simple.html
@@ -15,7 +15,7 @@
     <div id="venn"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 // define sets and set set intersections
@@ -25,5 +25,6 @@
 
 var chart = venn.VennDiagram();
 d3.select("#venn").datum(sets).call(chart);
+
 </script>
 </html>
diff --git a/examples/styled.html b/examples/styled.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
     <script src="../venn.js"></script>
     <script src="./medical.jsonp"></script>
 
@@ -84,17 +84,17 @@ <h2>Applying styles to venn diagrams</h2>
                              .width(500)
                              .height(500);
 
-             d3.select("#dropshadow").datum(sets).call(chart);
+            d3.select("#dropshadow").datum(sets).call(chart);
 
-            var colours = d3.scale.category10();
+            var colours = d3.schemeCategory10;
             var areas = d3.selectAll("#dropshadow g")
             areas.select("path")
                 .filter(function(d) { return d.sets.length == 1; })
                 .style("fill-opacity", .1)
                 .style("stroke-width", 5)
                 .style("stroke-opacity", .8)
-                .style("fill", function(d,i) { return colours(i); })
-                .style("stroke", function(d,i) { return colours(i); });
+                .style("fill", function(d,i) { return colours[i]; })
+                .style("stroke", function(d,i) { return colours[i]; });
 
             areas.select("text").style("fill", "#444")
                 .style("font-family", "Shadows Into Light")

diff --git a/examples/sublabels.html b/examples/sublabels.html
@@ -14,15 +14,15 @@
     <div id="venn"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>   
+<script src="https://d3js.org/d3.v4.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: ["Information", "Circles"], size: 4, label: "Pie Charts"},
             {sets: ["Overlap", "Circles"], size: 4, label: "Eclipses"},
             {sets: ["Information", "Overlap", "Circles"], size: 2, label: "Venn Diagrams"}
     ];
@@ -55,16 +55,13 @@
 
     // move existing
     layout.update
-        .select(".sublabel")
+        .selectAll(".sublabel")
+        .filter(function (d) { return d.sets in textCentres; })
         .text(function(d) { return "size " + d.size; })
         .style("font-size", "10px")
         .attr("dy", "18")
-        .attr("x", function(d) {
-            return Math.floor(textCentres[d.sets].x);
-        })
-        .attr("y", function(d) {
-            return Math.floor(textCentres[d.sets].y);
-        });
+        .attr("x", function(d) { return Math.floor(textCentres[d.sets].x);})
+        .attr("y", function(d) { return Math.floor(textCentres[d.sets].y);});
 
     // remove old (shrinking to middle)
     layout.exit

diff --git a/examples/venn_venn.html b/examples/venn_venn.html
@@ -15,7 +15,7 @@
     <div id="venn"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 var sets = [

diff --git a/examples/weighted.html b/examples/weighted.html
@@ -12,7 +12,7 @@
     <div id="weighted_example"></div>
 </body>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="../venn.js"></script>
 <script>
 var sets = [{sets: [0], size: 1958},

diff --git a/package.json b/package.json
@@ -1,14 +1,12 @@
 {
   "name": "venn.js",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "author": "Ben Frederickson <ben@benfrederickson.com> (http:/www.benfrederickson.com)",
   "url": "https://github.com/benfred/venn.js/issues",
   "devDependencies": {
-    "rollup": "0.21.2",
-    "uglify-js": "2",
-    "faucet": "0.0",
+    "rollup": "0.27",
     "tape": "4",
-    "jshint": "^2.8.0"
+    "uglify-js": "2"
   },
   "description": "Area Proportional Venn and Euler Diagrams",
   "main": "build/venn.js",
@@ -39,8 +37,13 @@
     "esnext": true
   },
   "scripts": {
-    "pretest": "mkdir -p build && node -e 'process.stdout.write(\"var version = \\\"\" + require(\"./package.json\").version + \"\\\"; export * from \\\"../index\\\"; export {version};\");' > build/bundle.js && rollup -f umd -u venn -n venn -o build/venn.js -- build/bundle.js && cp build/venn.js .",
-    "test": "jshint src/*.js && faucet `find tests -name '*test.js'`",
-    "prepublish": "npm run test && uglifyjs build/venn.js -c -m -o build/venn.min.js && rm -f build/venn.zip && zip -j build/venn.zip -- LICENSE README.md build/venn.js build/venn.min.js"
+    "pretest": "rm -rf build && mkdir build && rollup -g d3-selection:d3,d3-transition:d3 -f umd -n venn -o build/venn.js -- index.js && cp build/venn.js .",
+    "test": "jshint src/*.js && tape 'tests/**/*test.js'",
+    "prepublish": "npm run test && uglifyjs build/venn.js -c -m -o build/venn.min.js",
+    "postpublish": "zip -j build/venn.zip -- LICENSE README.md build/venn.js build/venn.min.js"
+  },
+  "dependencies": {
+    "d3-selection": "^1.0.2",
+    "d3-transition": "^1.0.1"
   }
 }
diff --git a/src/diagram.js b/src/diagram.js
@@ -1,21 +1,44 @@
+import {select, selectAll} from "d3-selection";
+import {transition} from "d3-transition";
+
 import {venn, normalizeSolution, scaleSolution} from "./layout";
 import {intersectionArea, distance, getCenter} from "./circleintersection";
 import {fmin} from "./fmin";
 
-/*global d3 console:true*/
+/*global console:true*/
 
 export function VennDiagram() {
     var width = 600,
         height = 350,
         padding = 15,
         duration = 1000,
-        orientation = Math.PI / 2,
+        orientation = Math.PI,
         normalize = true,
         wrap = true,
         styled = true,
         fontSize = null,
         orientationOrder = null,
-        colours = d3.scale.category10(),
+
+        // mimic the behaviour of d3.scale.category10 from the previous
+        // version of d3
+        colourMap = {},
+
+        // so this is the same as d3.schemeCategory10, which is only defined in d3 4.0
+        // since we can support older versions of d3 as long as we don't force this,
+        // I'm hackily redefining below. TODO: remove this and change to d3.schemeCategory10
+        colourScheme = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"],
+        colourIndex = 0,
+        colours = function(key) {
+            if (key in colourMap) {
+                return colourMap[key];
+            }
+            var ret = colourMap[key] = colourScheme[colourIndex];
+            colourIndex += 1;
+            if (colourIndex >= colourScheme.length) {
+                colourIndex = 0;
+            }
+            return ret;
+        },
         layoutFunction = venn;
 
     function chart(selection) {
@@ -29,18 +52,18 @@ export function VennDiagram() {
         var circles = scaleSolution(solution, width, height, padding);
         var textCentres = computeTextCentres(circles, data);
 
-        // draw out a svg
-        var svg = selection.selectAll("svg").data([circles]);
-        svg.enter().append("svg");
+        // create svg if not already existing
+        selection.selectAll("svg").data([circles]).enter().append("svg");
 
-        svg.attr("width", width)
-           .attr("height", height);
+        var svg = selection.select("svg")
+            .attr("width", width)
+            .attr("height", height);
 
         // to properly transition intersection areas, we need the
         // previous circles locations. load from elements
         var previous = {}, hasPrevious = false;
-        svg.selectAll("g").each(function (d) {
-            var path = d3.select(this).select("path").attr("d");
+        svg.selectAll("g path").each(function (d) {
+            var path = select(this).attr("d");
             if ((d.sets.length == 1) && path) {
                 hasPrevious = true;
                 previous[d.sets[0]] = circleFromPath(path);
@@ -103,31 +126,39 @@ export function VennDiagram() {
                 .style("fill", function(d) { return d.sets.length == 1 ? colours(label(d)) : "#444"; });
         }
 
-        // update existing
-        var update = nodes.transition("venn").duration(hasPrevious ? duration : 0);
-        update.select("path")
-            .attrTween("d", pathTween);
+        // update existing, using pathTween if necessary
+        var update = selection;
+        if (hasPrevious) {
+            update = selection.transition("venn").duration(duration);
+            update.selectAll("path")
+                .attrTween("d", pathTween);
+        } else {
+            update.selectAll("path")
+                .attr("d", function(d) {
+                    return intersectionAreaPath(d.sets.map(function (set) { return circles[set]; }));
+                });
+        }
 
-        var updateText = update.select("text")
+        var updateText = update.selectAll("text")
+            .filter(function (d) { return d.sets in textCentres; })
             .text(function (d) { return label(d); } )
-            .attr("x", function(d) {
-                return Math.floor(textCentres[d.sets].x);
-            })
-            .attr("y", function(d) {
-                return Math.floor(textCentres[d.sets].y);
-            });
+            .attr("x", function(d) { return Math.floor(textCentres[d.sets].x);})
+            .attr("y", function(d) { return Math.floor(textCentres[d.sets].y);});
 
         if (wrap) {
-            updateText.each("end", wrapText(circles, label));
+            if (hasPrevious) {
+                updateText.on("end", wrapText(circles, label));
+            } else {
+                updateText.each(wrapText(circles, label));
+            }
         }
 
         // remove old
         var exit = nodes.exit().transition('venn').duration(duration).remove();
-        exit.select("path")
+        exit.selectAll("path")
             .attrTween("d", pathTween);
 
-        var exitText = exit.select("text")
-            .text(function (d) { return label(d); } )
+        var exitText = exit.selectAll("text")
             .attr("x", width/2)
             .attr("y", height/2);
 
@@ -240,7 +271,7 @@ export function VennDiagram() {
 // this seems to be one of those things that should be easy but isn't
 export function wrapText(circles, labeller) {
     return function() {
-        var text = d3.select(this),
+        var text = select(this),
             data = text.datum(),
             width = circles[data.sets[0]].radius || 50,
             label = labeller(data) || '';