Fork of World Map

100%

Fork of World Map

✓ Published0🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

This example uses D3 to render a fork of a world map, displaying country boundaries as light green vector shapes on a white background through an SVG canvas. The visualization applies a Natural Earth projection using `d3.geoNaturalEarth1` and generates the geographic paths with `d3.geoPath`. It loads GeoJSON data from the `world-atlas` package, parses the countries using `topojson`, and draws each feature onto the SVG. The output is a static equirectangular-style map highlighting national borders with subtle black strokes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Aadapavaishnavi12

93% match

Loading thumbnail…

Fork of World Map

This example displays a world map using a natural Earth projection, with countries rendered as green landmasses against a light blue spherical backdrop. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. It also appends a sphere path to frame the projection, all rendered as SVG elements.

SstellaWangg

92% match

Loading thumbnail…

Fork of World Map

This example displays a natural Earth projection of the world map, with countries rendered as green landmasses on a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw geographic features, while `topojson.feature` converts country boundaries from a TopoJSON world-atlas dataset loaded from unpkg. The SVG includes a background sphere path before adding individual country paths, resulting in a clean, stylized global visualization.

KKiran-tech007

92% match

Loading thumbnail…

Fork of World Map

This example renders a natural Earth projection world map using D3 v5 and TopoJSON. It displays countries as green landmasses with black strokes against a blue spherical backdrop. The code fetches world boundary data from the world-atlas package, converts TopoJSON to GeoJSON with topojson.feature, and visualizes it using d3.geoNaturalEarth1, d3.geoPath, and SVG paths. A pre-defined sphere path establishes the globe’s outline before country features are appended.

Ppemmasaniprudhvinadh

92% match

Loading thumbnail…

Fork of World Map

This visualization displays a natural Earth projection of the world map with countries rendered in light green and oceans in sky blue. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data sourced from the world-atlas package at 110m resolution. A sphere outline is drawn first, followed by country features parsed with TopoJSON’s `feature` method. The map is static, with no interactions or animations beyond the initial data join.

Ddineshtadepalli12

92% match

Loading thumbnail…

Fork of World Map

This example displays a simple world map rendered with SVG paths. It depicts the Earth’s natural Earth projection with countries filled in blue and outlined in yellow, set against a green sphere. The code uses D3’s `geoNaturalEarth1` projection, `geoPath` for generating the path data, and `topojson.feature` to parse the world-atlas GeoJSON data loaded from a remote URL. The visualization appends each country path to the SVG canvas.

Cchandrakalavanukuri

91% match

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. It renders geographic boundaries as SVG paths, generated from a world-atlas dataset loaded via D3’s `json` function. The code employs `d3.geoPath` with the `geoNaturalEarth1` projection and uses the `topojson` library’s `feature` method to extract country geometries from the TopoJSON data. A static sphere outline is drawn first, followed by each country path, with stroke opacity creating subtle border definition.

Ffsajedi22

91% match

Loading thumbnail…

Fork of World Map

This example renders a spherical world map inside an SVG, using a light blue sphere as the base and green landmasses with black outlines drawn on top. It shows the complete set of countries from the world-atlas TopoJSON dataset, projected with the Natural Earth projection. The code imports `geoPath`, `geoNaturalEarth1`, and the `feature` function from TopoJSON to convert the TopoJSON data to GeoJSON before drawing each country path.

Llakepee

91% match