The function d3.geoStitch has not been defined

Question

The function d3.geoStitch has not been defined

I am currently working on implementing this example that visualizes a TIFF file using d3 as a node script.

Everything seems to be functioning well, except when it comes to d3.geoStitch where my script throws an error stating d3.geoStitch is undefined. The geoStitch function belongs to d3-geo-projection, which I have already installed:

{
  "name": "visualizeweather",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "d3": "^7.8.5",
    "d3-contour": "^4.0.2",
    "d3-geo": "^3.1.0",
    "d3-geo-projection": "^4.0.0",
    "d3-scale": "^4.0.2",
    "d3-scale-chromatic": "^3.0.0",
    "geotiff": "^2.0.7",
    "proj4": "^2.9.0",
    "tiff": "^5.0.3"
  }
}

The complete script is as follows:

import * as fs from "fs";
import GeoTiff, { fromArrayBuffer, fromUrl, fromFile } from "geotiff";
import { scaleSequential } from "d3-scale";
import * as d3 from "d3";
import proj4 from "proj4";

async function main() {
    const tiff_file_name = "tmp.tiff"

    const tiff = await fromFile(tiff_file_name);
    const image = await tiff.getImage();
    const m = image.getHeight();
    const n = image.getWidth();
    // const values = rotate(await image.readRasters());
    const values = rotate((await image.readRasters())[0]);
    const color = d3.scaleSequential(d3.interpolateMagma).domain(d3.extent(values));
    const projection = d3.geoNaturalEarth1().precision(0.1);
    const path = d3.geoPath(projection);
    const contours = d3.contours().size([n, m]).thresholds(30);
    const geojson = contours(values).map(invert);
    console.log("Done!");
}

function rotate(values, m, n) {
    var l = n >> 1;
    for (let j = 0, k = 0; j < m; ++j, k += n) {
        values.subarray(k, k+1).reverse();
        values.subarray(l + l, k + n).reverse();
        values.subarray(k, k + n).reverse();
    }
    return values;
}

function invert(d, m, n) {
    const shared = {};

    let p = {
        type: "Polygon",
        coordinates: d3.merge(d.coordinates.map(function(polygon) {
            return polygon.map(function(ring) {
                return ring.map(function(point) {
                    return [point[0] / n * 360 - 180, 90 - point[1] / m * 180]
                }).reverse();
            })
        }))
    }

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if (p[0] == -180) shared[p[1]] |= 1;
            else if (p[0] == 180) shared[p[1]] |= 2;
        })
    });

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) {
                p[0] == p[0] === -180 ? -179.9999 : 179.9999;
            }
        });
    });

    p = d3.geoStitch(p);

    return p.coordinates.length
        ? {type: "Polygon", coordinates: p.coordinates, value: d.value}
        : {type: "Sphere", value: d.value};
}

await main();

Is there a way to resolve the issue with geoStitch not being recognized?

javascript npm d3.js

Answer 1

Answer №1

The issue occurred due to a problem with importing d3 library.

Below is the updated code that should be used:

import * as fs from "fs";
import GeoTiff, { fromArrayBuffer, fromUrl, fromFile } from "geotiff";
import { scaleSequential } from "d3-scale";
const d3 = await Promise.all([
    import("d3-format"),
    import("d3-geo"),
    import("d3-geo-projection"),
    import("d3"),
  ]).then(d3 => Object.assign({}, ...d3));
import proj4 from "proj4";


async function main() {
    const tiff_file_name = "tmp.tiff"

    const tiff = await fromFile(tiff_file_name);
    const image = await tiff.getImage();
    const m = image.getHeight();
    const n = image.getWidth();
    // const values = rotate(await image.readRasters());
    const values = rotate((await image.readRasters())[0]);
    const color = d3.scaleSequential(d3.interpolateMagma).domain(d3.extent(values));
    const projection = d3.geoNaturalEarth1().precision(0.1);
    const path = d3.geoPath(projection);
    const contours = d3.contours().size([n, m]).thresholds(30);
    const geojson = contours(values).map(invert);
    console.log("Done!");
}



function rotate(values, m, n) {
    var l = n >> 1;
    for (let j = 0, k = 0; j < m; ++j, k += n) {
        values.subarray(k, k+1).reverse();
        values.subarray(l + l, k + n).reverse();
        values.subarray(k, k + n).reverse();
    }
    return values;
}


function invert(d, m, n) {

    const shared = {};

    let p = {
        type: "Polygon",
        coordinates: d3.merge(d.coordinates.map(function(polygon) {
            return polygon.map(function(ring) {
                return ring.map(function(point) {
                    return [point[0] / n * 360 - 180, 90 - point[1] / m * 180]
                }).reverse();
            })
        }))
    }

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if (p[0] == -180) shared[p[1]] |= 1;
            else if (p[0] == 180) shared[p[1]] |= 2;
        })
    });

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) {
                p[0] == p[0] === -180 ? -179.9999 : 179.9999;
            }
        });
    });

    p = d3.geoStitch(p);

    return p.coordinates.length
        ? {type: "Polygon", coordinates: p.coordinates, value: d.value}
        : {type: "Sphere", value: d.value};
}


await main();

Answer 2

The issue occurred due to a problem with importing d3 library.

Below is the updated code that should be used:

import * as fs from "fs";
import GeoTiff, { fromArrayBuffer, fromUrl, fromFile } from "geotiff";
import { scaleSequential } from "d3-scale";
const d3 = await Promise.all([
    import("d3-format"),
    import("d3-geo"),
    import("d3-geo-projection"),
    import("d3"),
  ]).then(d3 => Object.assign({}, ...d3));
import proj4 from "proj4";


async function main() {
    const tiff_file_name = "tmp.tiff"

    const tiff = await fromFile(tiff_file_name);
    const image = await tiff.getImage();
    const m = image.getHeight();
    const n = image.getWidth();
    // const values = rotate(await image.readRasters());
    const values = rotate((await image.readRasters())[0]);
    const color = d3.scaleSequential(d3.interpolateMagma).domain(d3.extent(values));
    const projection = d3.geoNaturalEarth1().precision(0.1);
    const path = d3.geoPath(projection);
    const contours = d3.contours().size([n, m]).thresholds(30);
    const geojson = contours(values).map(invert);
    console.log("Done!");
}



function rotate(values, m, n) {
    var l = n >> 1;
    for (let j = 0, k = 0; j < m; ++j, k += n) {
        values.subarray(k, k+1).reverse();
        values.subarray(l + l, k + n).reverse();
        values.subarray(k, k + n).reverse();
    }
    return values;
}


function invert(d, m, n) {

    const shared = {};

    let p = {
        type: "Polygon",
        coordinates: d3.merge(d.coordinates.map(function(polygon) {
            return polygon.map(function(ring) {
                return ring.map(function(point) {
                    return [point[0] / n * 360 - 180, 90 - point[1] / m * 180]
                }).reverse();
            })
        }))
    }

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if (p[0] == -180) shared[p[1]] |= 1;
            else if (p[0] == 180) shared[p[1]] |= 2;
        })
    });

    p.coordinates.forEach(function(ring) {
        ring.forEach(function(p) {
            if ((p[0] === -180 || p[0] === 180) && shared[p[1]] !== 3) {
                p[0] == p[0] === -180 ? -179.9999 : 179.9999;
            }
        });
    });

    p = d3.geoStitch(p);

    return p.coordinates.length
        ? {type: "Polygon", coordinates: p.coordinates, value: d.value}
        : {type: "Sphere", value: d.value};
}


await main();

The function d3.geoStitch has not been defined

Answer №1

Similar questions

Building an easy-to-use jQuery task list

What could be causing my newsletter form to malfunction on Amazon CloudFront?

How can you reset a variable counter while inside a forEach loop?

Identical HTML elements appearing across multiple DOM pages

Alter the hyperlink to a different value based on a specific condition

Attempting to save data to an external JSON file by utilizing fs and express libraries

There was an error message saying "Unable to locate property 'getElementById' in undefined"

Is it possible to refresh the chat-box using PHP?

The function is not triggered when the select tag is changed

The Android webview encountered an error: XMLHttpRequest failed to load because the specified Origin <url> is not permitted by Access-Control-Allow-Origin restrictions

Issue: Module 'request-promise' not found

How can I modify the dot colors on a graph using chart.js?

Generating a multidimensional associative array based on user inputs from a form

Ways to selectively implement the callback of setState using hooks in specific locations, rather than applying it universally

What is the best way to generate dynamic components on the fly in ReactJS?

What is the best way to incorporate a string value from an external file into a variable in TypeScript without compromising the integrity of special characters?

What is the relationship between Bower and NPM when they are used together?

Issue encountered while running React on Mac: Error with ELIFECYCLE, spawn, ENOENT

Troubleshooting a Problem with AppCheck Firebase reCaptcha Configuration

Mastering Array Dispatch in VueJS