@lgv/heatmap 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lgv/heatmap",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "description": "ES6 heatmap visualization for leaflet using vega/d3.js.",
   "main": "src/index.js",
@@ -46,9 +46,10 @@
   "dependencies": {
     "@deck.gl/core": "^9.0.34",
     "@deck.gl/layers": "^9.0.34",
-    "@lgv/visualization-map": "^1.0.2",
+    "@lgv/visualization-map": "^1.0.4",
     "@luma.gl/core": "^9.0.27",
     "@msrvida/vega-deck.gl": "^3.3.6",
+    "d3-scale": "^4.0.2",
     "leaflet": "^1.9.4",
     "vega": "^5.30.0"
   },

package/src/visualization/index.js

@@ -6,6 +6,8 @@ import * as vega from "vega";
 import * as VegaDeckGl from "@msrvida/vega-deck.gl";
 
 import { VisualizationMap } from "@lgv/visualization-map";
+import { scaleOrdinal } from "d3-scale";
+
 import { HeatLayout as HL } from "../layout/index.js";
 
 import { configuration, configurationColor, configurationLayout } from "../configuration.js";
@@ -33,49 +35,26 @@ class Heatmap extends VisualizationMap {
         // update self
         this.color = color;
         this.imageOverlay = null;
+        this.zoom = 5;
 
     }
 
     /**
      * Determine if data is array of objects with xy precomputed.
+     * @returns A boolean if TRUE data is already in xy format vs. geojson features.
      */
     get isXY() {
         return this.data && this.data.length > 0 && Object.keys(this.data[0]).some(k => ["count","x","y"].includes(k));
     }
-
+    
     /**
      * Generate mark size.
      * @returns An integer representing the render size of a visual mark.
      */
     get mark() {
-
-        let isHighDensityDisplay = window.devicePixelRatio > 1 && window.innerWidth * window.devicePixelRatio > 3360 && window.innerHeight * window.devicePixelRatio > 1942;
-
-        // set starting size
-        let base = isHighDensityDisplay ? this.unit * 1.75 : this.unit * 2;
-        let mark = base;
-
-        // determine mark size
-        switch (true) {
-            case (this.zoom >= 16):
-                mark = base - 1;
-                break;
-            case (this.zoom >= 14):
-                mark = base - 2;
-                break;
-            case (this.zoom >= 12):
-                mark = base - 3;
-                break;
-            case (this.zoom >= 8):
-                mark = base - 4;
-                break;
-            case (this.zoom >= 0):
-                mark = base - 5;
-                break;
-        }
-
-        return mark;
-
+        return scaleOrdinal()
+            .domain([...Array(19).keys()])
+            .range([0,0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.6,0.6,0.6,0.6,0.7,0.7,0.8,0.8,1,1,1].map(d => d * this.unit));
     }
 
     /**
@@ -85,7 +64,7 @@ class Heatmap extends VisualizationMap {
 
         // generate vega specification
         let spec = this.generateSpecification();
-
+        
         // render vega with deck.gl
         let view = new VegaDeckGl.ViewGl(vega.parse(spec))
             .renderer("deck.gl")
@@ -135,7 +114,7 @@ class Heatmap extends VisualizationMap {
             scales: [
                 {
                     name: "color",
-                    type: "linear",
+                    type: "quantize",
                     domain: { data: this.name, field: "count" },
                     range: { scheme: this.name, count: this.color.length }
                 }
@@ -149,7 +128,7 @@ class Heatmap extends VisualizationMap {
                             shape: { value: "square" },
                             x: { field: "x" },
                             y: { field: "y" },
-                            size: { value: this.mark },
+                            size: { value: this.mark(this.map.getZoom()) },
                             fill: { scale: "color", field: "count" },
                             opacity: { value: 1 }
                         },
@@ -158,7 +137,7 @@ class Heatmap extends VisualizationMap {
             ]
         }
 
-    }
+    }   
 
 }