Cannot display geojson, error "Expected number"

Community Help
1

I am doing a GIS project. I have downloaded the shape files for my country, India, containing the district (an administrative unit) map. I have converted the shapefiles to GeoJSON.

Now, I am trying to plot it. But it results in the following error. This error is thrown as many times for each GIS feature in that GeoJSON.

_esm.js:7 Error: attribute d: Expected number, “…L305.904,56.801LNaN,NaNLNaN,NaNL…”.

Here is my code.

const geojson = await FileAttachment("data/output.geojson").json();
const projection = d3.geoConicConformal()
               .parallels([12.472944, 35.172806]);
               /*
               .rotate([-80, 0])
               .scale(1000);
               .translate([width / 2, height / 2]);*/

Plot.plot({
    projection: projection,
    marks : [
        Plot.geo(geojson, {
            title: (d) => `${d.STATE} ${d.District}`,
            tip: true
        })
    ]
});

I had even reduced the decimal point precision of the points in the GeoJSON to 6. Still I get the same error.

What mistake am I making ?

2

can you share the file?

3

How can I attach the file here ?

4

I don’t think that is possible. You could attach it to an observable notebook, or share it as a gist.

5

I have created an archive of the output.geojson file called output.7z and uploaded it to GitHub - SourajitBasak/observable: Repo for storing observable samples.

You can use the 7-Zip software to deflate it.

6

The coordinates in this file are already projected—they are not longitude and latitudes in degrees, but (possibly) meters on a plane.

You can use projection: {type: "reflect-y", domain: geojson} to display this data:

Capture d’écran 2024-06-29 à 10.22.10
Capture d’écran 2024-06-29 à 10.22.101154×988 86.2 KB

7

Maybe I am making a silly mistake. But this code does not create any map of the browser screen. There are no errors as well.

BTW what does this projection mean ?

const geojson = await FileAttachment("data/output.geojson").json();
console.log(geojson);


Plot.plot({
    projection: {type: 'reflect-y', domain: geojson},
    marks : [Plot.geo(geojson)]
});
8

In Observable Framework you have to use display(…) to put the chart on the screen, unless it is an expression (single line of code, without a semi-colon).
see JavaScript | Observable Framework

Projections are documented here:

9

Thanks a lot for your support.

10 
display(Plot.plot({
                    projection: {type: 'reflect-y', domain: geojson},
                    marks : [Plot.geo(geojson, {
                        title: (d) => `${d.properties.STATE} ${d.properties.District}`
                    })]})
);

The title (popup on hover) does not work as expected.

11

Well, I have converted the shapefile to a geojson i.e. EPSG:4326 (WGS 84) where the co-ordinates are latitude and longitude. Thereafter, I have used the following code to display the map. It is showing up, but how do I adjust the parallels and rotate it and magnify it to show the map properly.

display(Plot.plot({
                    projection: { type: "conic-conformal"},
                    marks : [Plot.geo(geojson, {
                        title: (d) => `${d.properties.STATE} ${d.properties.District}`,
                        tip: true
                    })]})
);

India government uses Lambert Conic Conformal projections and the shapefile has that Co-ordinate reference system.

12

The title will work better if you fill the shapes (e.g. with an option such as fill: 'white', stroke: 'black')

Projections are documented in details at the link provided above. There are many options that allow you to control rotation, scale etc.