Skip to main content
SimilarExport ZIP
100%

Fork for the world map

✓ Published0🌍 Public
Rrohinikotha
Last edited Apr 3, 2022
Created on Apr 3, 2022
Forked from world map

This visualization displays a global map with countries rendered in yellow against a purple sphere, using a natural Earth projection. The code employs D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` functions, alongside the TopoJSON `feature` API to convert topojson country boundaries into SVG paths. The map data is fetched from a GitHub-hosted worldmap.json file, with each country drawn as a filled path with a black stroke. The static SVG canvas is sized at 1600×1000 pixels.

AI-generated description
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Fork of Fork of World Map with D3.js!

This visualization displays a world map using D3.js and TopoJSON, with countries rendered as yellow filled paths on a dark blue sphere. It loads geographic data from the world-atlas countries-110m.json file and projects it using d3.geoEquirectangular. The code employs d3.json to fetch data, topojson.feature to convert TopoJSON to GeoJSON, and d3.geoPath to generate SVG paths. A hover effect darkens country fills using CSS, while the sphere background uses a navy color.

Rradhadevarapu
90% match
Loading thumbnail…

Fork of world map

This example renders a natural Earth projection world map using SVG paths. It displays country boundaries with a hover effect that turns each country yellow, while oceans appear as a blue sphere. The visualization loads GeoJSON country data from the world-atlas TopoJSON file and converts it using topojson’s `feature` method, then projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The code uses D3 v5 selections to append and style the paths, with CSS controlling fill and stroke properties.

Rreddysushma994@gmail.com
89% match
Loading thumbnail…

Fork of world map

This fork visualizes a world map using a light pink color scheme, displaying country boundaries and a graticule over a styled globe background. The rendering uses D3 v7 with the `d3.geoNaturalEarth1` projection and `d3.geoGraticule` for grid lines, while country shapes are loaded from a world-atlas TopoJSON file and converted using `topojson.feature`. The code leverages `d3.select`, `d3.json`, and the D3 `path` generator to draw the geographic data as SVG paths.

Ssravya7136@gmail.com
89% match
Loading thumbnail…

Fork of world map

This fork of a world map visualizes country boundaries using a Natural Earth projection, with each nation rendered as a violet SVG path with black strokes on a pink sphere. The code loads TopoJSON country data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and projects it with `d3.geoPath` and `d3.geoNaturalEarth1`. Hover effects are styled via CSS, while the map is static without zoom or interaction.

Sshreyasribearelly@gmail.com
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
Loading thumbnail…

Fork of World Map

This visualization displays a world map using a natural Earth projection, with land masses rendered in a light purple fill on a white spherical background. The example loads GeoJSON data derived from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` for data conversion. A sphere is drawn first to provide the globe’s outline, followed by country paths. The stylesheet defines distinct colors for the sphere, land, and extra strokes, though the latter two are not actively applied in the current code.

MMahendraGullinkala
89% match
Loading thumbnail…

Fork of DV Fork for geo for world

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.

Bbhargavarathod
89% match