Reverse geojson generated with mapshaper to use it with d3.
Using d3 to plot a geojson from an INEGI* or INE** map can be complicated. If a tool like mapshaper is used to convert the shape (.shp) documents to geojson, they will have the vertices in a different order than d3 requires to graph them correctly.
To use it, you have to import the library, and pass it a geojson to correct the order in which its coordinates are arranged(clockwise). It also supports an array of points.
// import the method
const reverseGeojson = require("reverse-geojson");
// reverse the geojson
const clockwiseCoordinates = reverseGeojson(someGeojson);For example, if we use mapshaper to generate a geojson of the Mexican Republic using the official INEGI shape file, and from there we use d3 to display it, this is what we would get:
import {create} from "d3-selection";
import { geoPath, geoMercator } from "d3-geo";
const someGeojson = require("./mexico.json");
const width = 800;
const height = 800;
let root = document.getElementById("mexico");
let svg = create("svg").attr("viewBox", [0, 0, width, height]);
let projection = geoMercator().fitExtent([[0, 0], [width, height]], someGeojson);
let path = geoPath(projection);
svg.selectAll("path")
.data(someGeojson.features)
.enter().append("path")
.attr("d",path);
root.appendChild(svg.node())
Instead, if we first change the order of the coordinates, the map will be displayed correctly:
import {create} from "d3-selection";
import { geoPath, geoMercator } from "d3-geo";
const reverseGeojson = require("reverse-geojson");
const someGeojson = require("./mexico.json");
const width = 800;
const height = 800;
// reverse the coordinates first
const correctGeojson = reverseGeojson(someGeojson);
let root = document.getElementById("mexico");
let svg = create("svg").attr("viewBox", [0, 0, width, height]);
let projection = geoMercator().fitExtent([[0, 0], [width, height]], correctGeojson);
let path = geoPath(projection);
svg.selectAll("path")
.data(correctGeojson.features)
.enter().append("path")
.attr("d",path);
root.appendChild(svg.node())
The function is based on this response on stackoverflow
* Instituto Nacional de Estadística, Geografía e Informática (México)
** Instituto Nacional Electoral (México)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent