Fork of DV Fork for geo for world

100%

Fork of DV Fork for geo for world

✓ Published0🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

This example displays a world map in a natural Earth projection, with countries rendered as yellow shapes with black outlines against a blue ocean sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data. The code loads the TopoJSON file from a remote GitHub gist via `json`, converts it using `feature`, and appends country paths dynamically. The sphere background is drawn first, and all shapes use the SVG `path` element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

DV Fork for geo for world

This example renders a world map using a natural Earth projection in D3 v5. It loads TopoJSON country boundaries from a GitHub gist and converts them to GeoJSON features with the `topojson.feature` API. The visualization displays a blue sphere as the globe backdrop and yellow country shapes with black strokes, drawn via `d3.geoPath` and `d3.geoNaturalEarth1`. The map is presented as static SVG paths, with styling applied through CSS classes.

PPallaviManupati

93% 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

90% 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

90% match

Loading thumbnail…

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

This example displays a natural Earth projection of the world, with countries filled in light green against a blue ocean sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON file and renders them as SVG paths using `d3.geoPath` with the `geoNaturalEarth1` projection. The code uses `d3.json` to fetch the data and `feature` from TopoJSON to convert it to GeoJSON. A single SVG element holds both the sphere backdrop and the country outlines, which have a subtle black stroke.

Yyycgrace

90% match

Loading thumbnail…

Fork of world map

This visualization displays a world map using a natural Earth projection, with countries rendered in red against an orange sphere. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from a TopoJSON file hosted on GitHub. The code imports `feature` from `topojson` to convert the TopoJSON topology into GeoJSON features, then appends each country path to the SVG. Styling is defined in a separate CSS file, outlining countries with black strokes.

Bbhargavarathod

89% match

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

89% match

Loading thumbnail…

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

This example displays a natural Earth projection of the world, with countries rendered as green SVG paths and oceans as a blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to generate the projection, while TopoJSON’s `feature` extracts country boundaries from the world-atlas 110m dataset. The code loads geographic data asynchronously via `json`, then appends each country path to the SVG canvas.

Rrajeshathakur

89% 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

89% match