@lgv/visualization-map 0.0.1

package/.gitlab-ci.yml

@@ -0,0 +1,40 @@
+stages:
+  - test
+  - version
+  - publish
+
+include:
+  ######################################  GITLAB TEMPLATES  ######################################
+  - template: Security/SAST.gitlab-ci.yml
+  
+  # overwrites
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/eslint-sast.yml"
+
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/nodejs-scan-sast.yml"
+
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/semgrep-sast.yml"
+    
+  ######################################  TESTING  ######################################
+
+  # unit test
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/test.yml"
+
+  # coverage
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/coverage.yml"
+
+  ######################################  VERSIONING  ######################################
+
+  # module
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/version.yml"
+
+  ######################################  PUBLISHING  ######################################
+
+  # npm
+  - project: "lgensinger/cicd-templates"
+    file: "node/module/publish.yml"

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 lgensinger
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Visualization Map
+
+ES6 d3.js core visualization scaffold object and utilities for maps.

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@lgv/visualization-map",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "ES6 d3.js core visualization scaffold object and utilities for maps.",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "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",
+    "test": "npx ava --verbose --serial --timeout 1m --node-arguments='--experimental-json-modules'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/lgensinger/visualization-map.git"
+  },
+  "keywords": [
+    "visualization",
+    "d3"
+  ],
+  "author": "lgensinger",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitlab.com/lgensinger/visualization-map/issues"
+  },
+  "homepage": "https://gitlab.com/lgensinger/visualization-map#readme",
+  "devDependencies": {
+    "ava": "^4.2.0",
+    "browser-env": "^3.3.0",
+    "c8": "^7.11.3",
+    "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"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^8.8.20",
+    "@deck.gl/layers": "^8.8.20",
+    "@lgv/visualization-chart": "^0.3.5",
+    "@msrvida/vega-deck.gl": "^3.3.4",
+    "leaflet": "^1.9.2",
+    "vega": "^5.22.1"
+  },
+  "ava": {
+    "files": [
+      "tests/*_test.js"
+    ],
+    "require": [
+      "./tests/_setup-browser-env.js"
+    ]
+  }
+}

package/src/configuration.js

@@ -0,0 +1,19 @@
+import packagejson from "../package.json";
+
+const configuration = {
+    branding: "lgv",
+    name: packagejson.name.replace("/", "-").slice(1)
+};
+
+const configurationColor = {
+    p1: ["#eb4034","#34ebe5"]
+};
+
+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",
+    width: process.env.LGV_WIDTH || 400
+}
+
+export { configuration, configurationColor, configurationLayout };
+export default configuration;

package/src/index.js

@@ -0,0 +1,8 @@
+import { HeatLayout } from "./layout/heat.js";
+
+import { MapData } from "./structure/index.js";
+
+import { Heatmap } from "./visualization/heatmap.js";
+import { VisualizationMap } from "./visualization/index.js";
+
+export { HeatLayout, Heatmap, MapData, VisualizationMap };

package/src/layout/heat.js

@@ -0,0 +1,58 @@
+import L from "leaflet";
+
+import { MapData } from "../structure/index.js";
+
+/**
+ * HeatLayout is a data-bound layout abstraction for a heatmap.
+ * @param {array} data - geojson
+ * @param {class} map - Leaflet map object
+ */
+class HeatLayout extends MapData {
+
+    constructor(data, map) {
+
+        // initialize inheritance
+        super(data);
+
+        // update self
+        this.map = map;
+
+    }
+
+    /**
+     * Condition data for visualization requirements.
+     * @param {array} data - geojson
+     * @returns An object or array of data specifically formatted to the visualization type.
+     */
+    condition(data) {
+
+        let result = data;
+
+        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]));
+
+                return {
+                    count: d.properties.count,
+                    id: d.properties.id,
+                    label: d.properties.name,
+                    x: xy.x,
+                    y: xy.y
+                }
+
+            });
+
+        }
+
+        return result;
+
+    }
+
+}
+
+export { HeatLayout };
+export default HeatLayout;

package/src/structure/index.js

@@ -0,0 +1,19 @@
+import { ChartData } from "@lgv/visualization-chart";
+
+/**
+ * MapData is a data abstraction.
+ * @param {array} data - geojson
+ */
+class MapData extends ChartData {
+
+    constructor(data) {
+
+        // initialize inheritance
+        super(data);
+
+    }
+
+}
+
+export { MapData };
+export default MapData;

package/src/visualization/heatmap.js

@@ -0,0 +1,157 @@
+import * as deck from '@deck.gl/core';
+import * as layers from '@deck.gl/layers';
+import * as luma from '@luma.gl/core';
+import * as VegaDeckGl from "@msrvida/vega-deck.gl";
+import L from "leaflet";
+import * as vega from "vega";
+
+import { VisualizationMap } from "./index.js";
+import { HeatLayout as HL } from "../layout/heat.js";
+
+import { configuration, configurationColor, configurationLayout } from "../configuration.js";
+
+/**
+ * VisualizationMap is a map abstraction.
+ * @param {object} data - usually array; occasionally object
+ * @param {string} label - identifer for chart brand
+ * @param {float} height - specified height of chart
+ * @param {class} MapData - lgv data class
+ * @param {string} name - name of chart
+ * @param {float} width - specified width of chart
+ */
+class Heatmap extends VisualizationMap {
+
+    constructor(data, width=configurationLayout.width, height=configurationLayout.height, HeatLayout=null, label=configuration.branding, name=configuration.name) {
+
+        // initialize inheritance
+        super(data, width, height, HeatLayout ? HeatLayout : new HL(data), label, name);
+
+        // initialize vega
+        VegaDeckGl.use(vega, deck, layers, luma);
+
+        // update self
+        this.imageOverlay = null;
+
+    }
+
+    /**
+     * 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 * 1.5;
+        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;
+
+    }
+
+    /**
+     * 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;
+
+        // generate vega specification
+        let spec = this.generateSpecification();
+
+        // render vega with deck.gl
+        let view = new VegaDeckGl.ViewGl(vega.parse(spec))
+            .renderer("deck.gl")
+            .run();
+
+        // generate url blob
+        view.toImageURL("svg")
+            .then(url => {
+
+                // check if overlay exists
+                if (this.imageOverlay) {
+
+                    // update existing
+                    this.imageOverlay.setUrl(url);
+                    this.imageOverlay.setBounds(this.map.getBounds());
+
+                } else {
+
+                    // initialize
+                    this.imageOverlay = L.imageOverlay(url, this.map.getBounds());
+
+                    // update map
+                    this.imageOverlay.addTo(this.map);
+
+                }
+
+        });
+
+    }
+
+    /**
+     * Generate vega specification in prep for render.
+     */
+    generateSpecification() {
+
+        // register custom scheme
+        vega.scheme(this.name, configurationColor.p1);
+
+        return {
+            width: this.width,
+            height: this.height,
+            data: [{ name: this.name, values: this.data }],
+            scales: [
+                {
+                    name: "color",
+                    type: "log",
+                    domain: { data: this.name, field: "count" },
+                    range: { scheme: this.name, count: configurationColor.p1.length }
+                }
+            ],
+            marks: [
+                {
+                    type: "symbol",
+                    from: { data: this.name },
+                    encode: {
+                        update: {
+                            shape: { value: "square" },
+                            x: { field: "x" },
+                            y: { field: "y" },
+                            size: { value: this.mark },
+                            fill: { scale: "color", field: "count" },
+                        },
+                    },
+                }
+            ]
+        }
+
+    }
+
+}
+
+export { Heatmap };
+export default Heatmap;

package/src/visualization/index.js

@@ -0,0 +1,80 @@
+import { degreeToRadian, LinearGrid, radianToDegree } from "@lgv/visualization-chart";
+import { mean } from "d3-array";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+import { configuration, configurationLayout } from "../configuration.js";
+
+/**
+ * VisualizationMap is a map abstraction.
+ * @param {object} data - usually array; occasionally object
+ * @param {string} label - identifer for chart brand
+ * @param {float} height - specified height of chart
+ * @param {class} MapData - lgv data class
+ * @param {string} name - name of chart
+ * @param {float} width - specified width of chart
+ */
+class VisualizationMap extends LinearGrid {
+
+    constructor(data, width=configurationLayout.width, height=configurationLayout.height, MapData=null, label=configuration.branding, name=configuration.name) {
+
+        // initialize inheritance
+        super(data, width, height, MapData, label, name);
+
+        // update self
+        this.center = [mean(this.data.features, d => d.geometry.coordinates[1]), mean(this.data.features, d => d.geometry.coordinates[0])];
+        this.map = null;
+        this.tileserver = configurationLayout.tileserver;
+        this.zoom = 1;
+
+    }
+
+    /**
+     * Generate main visualization, i.e. everything that sits inside the svg.
+     */
+    generateChart() {
+
+        //
+
+    }
+
+    /**
+     * Generate artboard for map.
+     */
+    generateCore() {
+
+        // determine averaged center of coordinates
+        // without curvature of earth accounted for
+        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));
+
+        // update tile server
+        L.tileLayer(this.tileserver).addTo(this.map);
+
+        // fit to center + distance
+        this.map.fitBounds(L.geoJSON(this.Data.source).getBounds());
+
+    }
+
+    /**
+     * Generate visualization.
+     */
+    generateVisualization() {
+
+        // generate core elements
+        this.generateCore();
+
+        // generate patterns
+        this.generatePatterns();
+
+    }
+
+}
+
+export { VisualizationMap };
+export default VisualizationMap;

package/tests/_setup-browser-env.js

@@ -0,0 +1,3 @@
+import browserEnv from "browser-env";
+
+browserEnv(["document"]);

package/tests/init_test.js

@@ -0,0 +1,10 @@
+import test from "ava";
+
+import { configuration } from "../src/configuration.js";
+
+test("init", t => {
+
+    // INIT TEST //
+    t.true(typeof(configuration) === "object");
+
+});

package/webpack.common.js

@@ -0,0 +1,43 @@
+import path from "path";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+import webpack from "webpack";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const commonConfig = {
+
+    entry: {
+        index: "./src/index.js"
+    },
+
+    plugins: [
+        new webpack.DefinePlugin({
+            "process.env": {
+                "LGV_HEIGHT": JSON.stringify(process.env.LGV_HEIGHT),
+                "LGV_TILESERVER": JSON.stringify(process.env.LGV_TILESERVER),
+                "LGV_WIDTH": JSON.stringify(process.env.LGV_WIDTH)
+            }
+        })
+    ],
+
+    output: {
+        filename: "visualization-map.bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        clean: true
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"]
+            }
+        ]
+    }
+
+ };
+
+ export { commonConfig };
+ export default commonConfig;

package/webpack.dev.js

@@ -0,0 +1,19 @@
+import { commonConfig } from "./webpack.common.js";
+
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { merge } from "webpack-merge";
+
+const webpackConfig = merge(commonConfig, {
+
+    mode: "development",
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: "Development",
+        })
+    ]
+
+});
+
+export { webpackConfig };
+export default webpackConfig;

package/webpack.prod.js

@@ -0,0 +1,19 @@
+import { commonConfig } from "./webpack.common.js";
+
+import { merge } from "webpack-merge";
+
+const webpackConfig = merge(commonConfig, {
+
+    mode: "production",
+
+    output: {
+        library: {
+            name: "VisualizationMap",
+            type: "umd"
+        }
+    }
+
+});
+
+export { webpackConfig };
+export default webpackConfig;