first stab at getting custom colors for negative numbers working per #28

. Fix some bugs that should help, but not entirely fix, #27
Packet-Clearing-House · Sep 15, 2016 · 4ed1b84 · 4ed1b84
1 parent 18b1569
commit 4ed1b84
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 24 deletions.
diff --git a/examples/negative.csv b/examples/negative.csv
@@ -0,0 +1,13 @@
+country,widgets
+United States,-110
+Angola,-100
+Egypt,-80
+Gambia,-50
+Kenya,-40
+Malawi,-10
+Mozambique,10
+Namibia,20
+Nigeria,40
+Rwanda,50
+South Africa,60
+Mexico,100
diff --git a/examples/negative.example.html b/examples/negative.example.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <link rel="stylesheet" href="maptable.css">
+    <title>MapTable: Basic with Map, Filters and Table - minimal options</title>
+</head>
+<body>
+
+<script src="d3.min.js" charset="utf-8"></script>
+<script src="topojson.min.js"></script>
+<script src="maptable.js"></script>
+
+<div id="vizContainer" class='container'></div>
+<script>
+    var viz = d3.maptable('#vizContainer')
+            .csv('negative.csv')
+            .map({
+                countryIdentifierKey: 'country',
+                countryIdentifierType: 'name',
+                path: 'ne_110m_admin_0_countries.json',
+                countries: {
+                    attr: { // todo min, max, empty, legend and rollup don't work
+                        fill: {
+                            min: "#B4C3D1",
+                            max: "#043864",
+                            minNegative: "#FFB3B3",
+                            maxNegative: "#FF0000",
+                            empty: "#f9f9f9",
+                            legend: true,
+                            rollup: function(groupedData) {
+                                if (groupedData[0] != undefined) {
+                                    return groupedData[0].widgets;
+                                }
+                            },
+                        },
+                        stroke: "#d9d9d9",
+                        "stroke-width": 0.5
+                    },
+                },
+                markers: false,
+            })
+            .filters()
+            .table()
+            .render();
+</script>
+</body>
+</html>
diff --git a/src/components/GeoMap.js b/src/components/GeoMap.js
@@ -186,7 +186,7 @@ export default class GeoMap {
     Object.keys(this.options.countries.attr).forEach(attrKey => {
       const attrValue = this.options.countries.attr[attrKey];
       if (typeof (attrValue) === 'object' && attrValue.legend) {
-        const scaleDomain = d3.extent(this.dataCountries, d => d.rollupValue[attrKey]);
+        const scaleDomain = d3.extent(this.dataCountries, d => Number(d.rollupValue[attrKey]));
         this.legendCountry[attrKey].updateExtents(scaleDomain);
 
         // When we mouseover the legend, it should highlight the indice selected
@@ -411,7 +411,7 @@ export default class GeoMap {
       // Static value
       dataset.forEach(d => {
         d.attr[attrKey] = attrValue;
-      });
+    });
     } else if (typeof (attrValue) === 'object') {
       // Dynamic value
       if (!attrValue.rollup) {
@@ -423,9 +423,9 @@ export default class GeoMap {
 
       dataset.forEach(d => {
         d.rollupValue[attrKey] = attrValue.rollup(d.values);
-      });
+    });
 
-      const scaleDomain = d3.extent(dataset, d => d.rollupValue[attrKey]);
+      const scaleDomain = d3.extent(dataset, d => Number(d.rollupValue[attrKey]));
       if (attrValue.transform) {
         scaleDomain[0] = attrValue.transform(scaleDomain[0]);
         scaleDomain[1] = attrValue.transform(scaleDomain[1]);
@@ -434,32 +434,44 @@ export default class GeoMap {
       let minValue = attrValue.min;
       let maxValue = attrValue.max;
 
-      if (attrValue.min === 'minValue') {
-        minValue = scaleDomain[0];
-      }
-      if (attrValue.max === 'maxValue') {
-        maxValue = scaleDomain[1];
+
+      // check for negative color declorations
+      var useNegative = false;
+      if ((attrValue.maxNegative && !attrValue.minNegative) ||
+          (!attrValue.maxNegative && attrValue.minNegative)) {
+        throw new Error(`MapTable: maxNegative or minNegative undefined. Please declare both.`);
+      } else if (attrValue.maxNegative && attrValue.minNegative){
+        useNegative = true;
       }
 
       const scaleFunction = d3.scale.linear()
-        .domain(scaleDomain)
-        .range([minValue, maxValue]);
+          .domain(scaleDomain)
+          .range([attrValue.min, attrValue.max]);
+
+      const scaleNegativeFunction = d3.scale.linear()
+          .domain(scaleDomain)
+          .range([attrValue.minNegative, attrValue.maxNegative]);
 
       dataset.forEach(d => {
         let scaledValue;
-        if (!d.values.length || isNaN(d.rollupValue[attrKey])) {
-          if (typeof (attrValue.empty) === 'undefined') {
-            throw new Error(`MapTable: no empty property found for attr.${attrKey}`);
-          }
-          scaledValue = attrValue.empty;
-        } else {
-          const originalValueRaw = d.rollupValue[attrKey];
-          const originalValue = (attrValue.transform) ?
+      if (!d.values.length || isNaN(d.rollupValue[attrKey])) {
+        if (typeof (attrValue.empty) === 'undefined') {
+          throw new Error(`MapTable: no empty property found for attr.${attrKey}`);
+        }
+        scaledValue = attrValue.empty;
+      } else {
+        const originalValueRaw = d.rollupValue[attrKey];
+        const originalValue = (attrValue.transform) ?
             attrValue.transform(originalValueRaw) : originalValueRaw;
+        if (useNegative && originalValue < 0){
+          scaledValue = scaleNegativeFunction(originalValue);
+          console.log('use NEG! ' + originalValue + ' scaledValue: ' + scaledValue);
+        } else {
           scaledValue = scaleFunction(originalValue);
         }
-        d.attr[attrKey] = scaledValue;
-      });
+      }
+      d.attr[attrKey] = scaledValue;
+    });
     } else {
       throw new Error(`Maptable: Invalid value for ${attrKey}`);
     }

diff --git a/src/components/Legend.js b/src/components/Legend.js
@@ -22,9 +22,23 @@ export default class Legend {
       .attr('x2', '100%')
       .attr('y2', '0%');
 
-    legendGradient.append('stop')
-    .attr('offset', '0%')
-    .attr('style', `stop-color:${this.map.options.countries.attr.fill.min};stop-opacity:1`);
+    if (this.map.options.countries.attr.fill.minNegative &&
+        this.map.options.countries.attr.fill.maxNegative) {
+      legendGradient.append('stop')
+          .attr('offset', '0%')
+          .attr('style', `stop-color:${this.map.options.countries.attr.fill.maxNegative};stop-opacity:1`);
+
+      legendGradient.append('stop')
+          .attr('offset', '49%')
+          .attr('style', `stop-color:${this.map.options.countries.attr.fill.minNegative};stop-opacity:1`);
+      legendGradient.append('stop')
+          .attr('offset', '50%')
+          .attr('style', `stop-color:${this.map.options.countries.attr.fill.min};stop-opacity:1`);
+    } else {
+      legendGradient.append('stop')
+          .attr('offset', '0%')
+          .attr('style', `stop-color:${this.map.options.countries.attr.fill.min};stop-opacity:1`);
+    }
 
     legendGradient.append('stop')
     .attr('offset', '100%')