@lgv/visualization-map 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lgv/visualization-map",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "ES6 d3.js core visualization scaffold object and utilities for maps.",
   "main": "src/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack build --config webpack.prod.js",
     "coverage": "c8 --reporter=html --reporter=text ava --node-arguments='--experimental-json-modules'",
     "start": "webpack serve --config webpack.dev.js",
-    "startdocker": "webpack serve --config webpack.dev.js --host 0.0.0.0 --public 0.0.0.0",
+    "startdocker": "webpack serve --config webpack.dev.js --host 0.0.0.0 --allowed-hosts all",
     "test": "npx ava --verbose --serial --timeout 1m --node-arguments='--experimental-json-modules'"
   },
   "repository": {
@@ -36,13 +36,14 @@
     "css-loader": "^6.7.2",
     "html-webpack-plugin": "^5.3.2",
     "style-loader": "^3.3.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.86.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@deck.gl/core": "^8.8.20",
     "@deck.gl/layers": "^8.8.20",
-    "@lgv/visualization-chart": "^0.3.5",
+    "@lgv/visualization-chart": "^0.3.21",
     "@msrvida/vega-deck.gl": "^3.3.4",
     "leaflet": "^1.9.2",
     "vega": "^5.22.1"

package/src/configuration.js

@@ -6,12 +6,13 @@ const configuration = {
 };
 
 const configurationColor = {
-    p1: ["#eb4034","#34ebe5"]
+    p1: ["#0a86ca", "#0a86ca"],
+    p2: ["#F7BBB5", "#F37765", "#EF4223", "#992B20", "#37150E"]
 };
 
 const configurationLayout = {
     height: process.env.LGV_HEIGHT || 400,
-    tileserver: process.env.LGV_TILESERVER || "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png",
+    tileserver: process.env.LGV_TILESERVER || "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
     width: process.env.LGV_WIDTH || 400
 }
 

package/src/layout/heat.js

@@ -30,21 +30,25 @@ class HeatLayout extends MapData {
 
         if (this.map && data.type == "FeatureCollection") {
 
-            // project to xy
-            result = data.features.map(d => {
-
-                // convert to xy
-                let xy = this.map.latLngToContainerPoint(L.latLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
+            let bounds = this.map.getBounds();
 
-                return {
-                    count: d.properties.count,
-                    id: d.properties.id,
-                    label: d.properties.name,
-                    x: xy.x,
-                    y: xy.y
-                }
-
-            });
+            // project to xy
+            result = data.features
+                .filter(d => d.geometry.coordinates[1] >= bounds._southWest.lat && d.geometry.coordinates[1] <= bounds._northEast.lat && d.geometry.coordinates[0] >= bounds._southWest.lng && d.geometry.coordinates[0] <= bounds._northEast.lng)
+                .map(d => {
+
+                    // convert to xy
+                    let xy = this.map.latLngToContainerPoint(L.latLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
+
+                    return {
+                        count: d.properties.count,
+                        id: d.properties.id,
+                        label: d.properties.name,
+                        x: xy.x,
+                        y: xy.y
+                    }
+
+                });
 
         }
 

package/src/visualization/heatmap.js

@@ -11,7 +11,7 @@ import { HeatLayout as HL } from "../layout/heat.js";
 import { configuration, configurationColor, configurationLayout } from "../configuration.js";
 
 /**
- * VisualizationMap is a map abstraction.
+ * Heatmap is a map abstraction for a heatmap visualization.
  * @param {object} data - usually array; occasionally object
  * @param {string} label - identifer for chart brand
  * @param {float} height - specified height of chart
@@ -43,7 +43,7 @@ class Heatmap extends VisualizationMap {
         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 * 1.5;
+        let base = isHighDensityDisplay ? this.unit * 1.75 : this.unit * 2;
         let mark = base;
 
         // determine mark size
@@ -72,12 +72,7 @@ class Heatmap extends VisualizationMap {
     /**
      * Generate main visualization, i.e. everything that sits inside the map.
      */
-    generateChart(e) {
-
-        // process data
-        // update data object now that map exists
-        this.Data.map = this.map;
-        this.data = this.Data.update;
+    generateChart() {
 
         // generate vega specification
         let spec = this.generateSpecification();
@@ -123,11 +118,11 @@ class Heatmap extends VisualizationMap {
         return {
             width: this.width,
             height: this.height,
-            data: [{ name: this.name, values: this.data }],
+            data: [{ name: this.name, values: this.isXY ? this.data.results : this.data }],
             scales: [
                 {
                     name: "color",
-                    type: "log",
+                    type: "linear",
                     domain: { data: this.name, field: "count" },
                     range: { scheme: this.name, count: configurationColor.p1.length }
                 }
@@ -143,6 +138,7 @@ class Heatmap extends VisualizationMap {
                             y: { field: "y" },
                             size: { value: this.mark },
                             fill: { scale: "color", field: "count" },
+                            opacity: { value: 1 }
                         },
                     },
                 }

package/src/visualization/index.js

@@ -21,8 +21,16 @@ class VisualizationMap extends LinearGrid {
         // initialize inheritance
         super(data, width, height, MapData, label, name);
 
+        // determine type of data object
+        this.determineDataType();
+
+        // determine x/y center
+        let x = this.isFeatureCollection ? mean(this.data.features, d => d.geometry.coordinates[1]) : (this.isPoint ? this.data.coordinates[1] : (this.isXY ?  mean([this.data.metadata.bounds[0][1],this.data.metadata.bounds[1][1]]) : 0));
+
+        let y = this.isFeatureCollection ? mean(this.data.features, d => d.geometry.coordinates[0]) : (this.isPoint ? this.data.coordinates[0] : (this.isXY ?  mean([this.data.metadata.bounds[0][0],this.data.metadata.bounds[1][0]]) : 0));
+
         // update self
-        this.center = [mean(this.data.features, d => d.geometry.coordinates[1]), mean(this.data.features, d => d.geometry.coordinates[0])];
+        this.center = [x,y];
         this.map = null;
         this.tileserver = configurationLayout.tileserver;
         this.zoom = 1;
@@ -30,12 +38,46 @@ class VisualizationMap extends LinearGrid {
     }
 
     /**
-     * Generate main visualization, i.e. everything that sits inside the svg.
+     * Attach event handlers for map events.
      */
-    generateChart() {
+    attachEvents() {
+        this.map.on("moveend", e => {
+
+            // update dimensions on class
+            let containerSize = this.map.getSize();
+            this.heightSpecified = containerSize.y;
+            this.widthSpecified = containerSize.x;
+
+            // process data
+            // update data object now that map exists
+            this.Data.map = this.map;
+            if (this.Data.data) this.data = this.Data.update;
+
+            // render overlay
+            this.generateChart();
+
+            // broadcast event
+            this.container.dispatch("map-change", {
+                bubbles: true
+            });
+
+        });
+    }
 
-        //
+    /**
+     * Generate main visualization, i.e. everything that sits inside the svg.
+     */
+    determineDataType() {
+        this.isFeatureCollection = this.data && this.data.features;
+        this.isPoint = this.data && this.data.coordinates && this.data.type.lower() == "point";
+        this.isXY = this.data && this.data.metadata && this.data.results;
+    }
 
+    /**
+     * Generate main visualization, i.e. everything that sits inside the svg.
+     */
+    generateChart() {
+        // empty method for specific map visualizations to overwrite
     }
 
     /**
@@ -43,21 +85,59 @@ class VisualizationMap extends LinearGrid {
      */
     generateCore() {
 
-        // determine averaged center of coordinates
-        // without curvature of earth accounted for
+        // pull dom element styles
+        let styles = window.getComputedStyle(this.container.node());
+        let height = parseFloat(styles.height.split("px")[0]);
+        let width = parseFloat(styles.width.split("px")[0]);
+
+        // check for unset width or height
+        if (height == 0 || width == 0) {
+
+            // add dom element attribute
+            this.container.node().setAttribute(`data-${this.branding}`, this.name);
+
+            // generate css for account for unset dimension(s)
+            let property = `[data-${this.branding}="${this.name}"]`;
+            let value = width == 0 && height == 0 ? `{ height: ${this.height}px; width: ${this.width}px; }` : (width == 0 ? `{ width: ${this.width}px; }` : `{ height: ${this.height}px; }`);
+
+            // generate stylesheet and insert in document
+            let style = document.createElement("style");
+            style.type = "text/css";
+            style.append(document.createTextNode(`${property} ${value}`));
+            document.head.append(style);
+
+        }
+
+        // update stored dimensions
+        if (height > 0) this.heightSpecified = height;
+        if (width > 0) this.widthSpecified = width;
+
+        // initialize map
         this.map = L.map(this.container.node(), {
             center: this.center,
             zoom: this.zoom
         });
 
         // add handlers for leaflet events
-        this.map.on("moveend", this.generateChart.bind(this));
+        this.attachEvents();
 
         // update tile server
         L.tileLayer(this.tileserver).addTo(this.map);
 
-        // fit to center + distance
-        this.map.fitBounds(L.geoJSON(this.Data.source).getBounds());
+        // determine bounding box
+        let bounds = (this.isFeatureCollection || this.isPoint) ? L.geoJSON(this.Data.source).getBounds() : (this.isXY ? this.data.metadata.bounds : this.map.getBounds());
+
+        // fit to bounds
+        if (this.isFeatureCollection || this.isXY) {
+            // several data points
+            this.map.fitBounds(bounds);
+        } else if (this.isPoint) {
+            // zoom out if only provided single data point
+            this.map.setView(bounds.getCenter(), this.map.getMaxZoom() / 2);
+        } else {
+            // no geo data provided so center world
+            this.map.setView(bounds.getCenter());
+        }
 
     }
 
@@ -74,6 +154,40 @@ class VisualizationMap extends LinearGrid {
 
     }
 
+    /**
+     * Update visualization.
+     * @param {object} data - geojson
+     * @param {float} height - specified height of chart
+     * @param {float} width - specified width of chart
+     */
+    update(data, width, height) {
+
+        // update self
+        this.heightSpecified = height || this.heightSpecified;
+        this.widthSpecified = width || this.widthSpecified;
+
+        // if layout data object
+        if (this.Data.height && this.Data.width) {
+
+            // update layout attributes
+            this.Data.height = this.heightSpecified;
+            this.Data.width = this.widthSpecified;
+
+        }
+
+        // recalculate values
+        this.Data.source = data;
+        this.Data.data = this.Data.update;
+        this.data = this.Data.data;
+
+        // determine type of data object
+        this.determineDataType();
+
+        // generate visualization
+        this.generateChart();
+
+    }
+
 }
 
 export { VisualizationMap };