GeoJSON to SVG

100%

GeoJSON to SVG

✓ Published0🌍 Public

Last edited Jun 8, 2016

Created on Jun 8, 2016

The example converts GeoJSON country polygons into standalone SVG files, one per country, using the `geojson2svg` library. It computes each feature’s bounding box with `turf.bbox` to set the map extent, then renders a filled green path with a `Name` attribute as the SVG element’s ID. A second, black offset path is attempted by reusing the converter with a `translate(5,5)` transform, though the code notes this styling step is unfinished. The script reads `Admin_0_Polygons.json` from a local gist and writes each resulting SVG to disk.

AI-generated description

Similar vizzes

Loading thumbnail…

geojson csv join

A world map renders country outlines as SVG paths, with each country’s name appearing on mouseover via a reporter function. The visualization joins country IDs from a GeoJSON file with names from a CSV, using nested `forEach` loops to match identifiers. The map uses a D3 v3 Mercator projection with automatic scaling and translation based on the data’s bounding box. The code loads `countries.geo.json` and `idCountry.csv`, then displays stroke-only paths, leaving country fills empty.

Aangelferro

73% match

Loading thumbnail…

Let's make a Map with simplified code!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

CChristine Lanser

73% match

Loading thumbnail…

Let's make a map

This example shows a world map rendered as SVG paths, with each country outlined using a Mercator projection. The code loads a GeoJSON-like dataset from the world-atlas package and uses the `topojson` library's `feature` function to extract country features. It then applies `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data for each country, appending them to the SVG canvas.

JJanet Chen

72% match

Loading thumbnail…

GeoJSON Contours Test

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

CCurran Kelleher

72% match

Loading thumbnail…

Let's make a map!

This example creates a world map by rendering GeoJSON country boundaries onto an SVG. It first draws a blue sphere background and then overlays light green country paths with subtle black strokes, using the Natural Earth projection. The code loads world topology data from the world-atlas package and converts it to GeoJSON using topojson’s `feature` method, then applies `d3.geoPath` with `geoNaturalEarth1` for projection. Both D3 and TopoJSON libraries are included via CDN.

RRoger Yu-Hsiang Lo

72% match

Loading thumbnail…

test2

This example displays a map of the United States rendered as SVG paths, with each state outlined using GeoJSON data loaded from an external gist. It shows the geographic boundaries without additional styling or interaction. The visualization relies on D3 v3, specifically `d3.geo.path()` to convert GeoJSON features into SVG path data, and `d3.json()` to fetch the state geometry. The map is drawn into an SVG container with fixed width and height, using a simple data join to append one `<path>` element per state. No choropleth or data-encoding is applied, so the result is a plain state boundary map.

FFrieseWoudloper

71% match

Loading thumbnail…

world map

This example shows a world map rendered as an SVG. It displays countries as white shapes with black outlines on a blue sphere, with a hover effect that changes a country’s fill to orange. The code uses D3 v5 to load GeoJSON country boundaries via `json` and then draws them with `geoPath` and a `geoEquirectangular` projection. It also uses the TopoJSON `feature` function to process the raw data from the world-atlas dataset.

Sshabbab01

71% match

Loading thumbnail…

Make a World Map

This example displays a world map rendered as SVG paths, with countries filled in light green and a dark blue sphere as the background. It uses D3 version 7’s `geoPath` and `geoNaturalEarth1` projection to generate the geographic shapes, while the `topojson` library’s `feature` function converts TopoJSON country boundaries from the world-atlas dataset into GeoJSON features. The code fetches the data from a remote URL and asynchronously appends the country paths to the SVG container.

EEngine194

71% match