Skip to main content
SimilarExport ZIP
100%

Fork of World Map : ICE-8

✓ Published0🌍 Public
Aarcothanmukha
Last edited Apr 5, 2022
Created on Apr 5, 2022
Forked from World Map : ICE-8

This example visualizes a world map using an azimuthal equidistant projection, with countries rendered as light green SVG paths over a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset via `d3.json`, converts it to GeoJSON features using `topojson.feature`, and draws them with `d3.geoPath` and `geoAzimuthalEquidistant`. The code imports these functions from the d3 v5 and topojson libraries within a React framework context.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of WORLD MAP FOR ICE-8

This visualization displays a world map rendered as green countries against a blue spherical backdrop. The map is built using D3.js v5 and the topojson library, with the geoNaturalEarth1 projection and geoPath function generating country boundaries. Country data comes from the world-atlas countries-110m.json dataset loaded via JSON. The React framework is not visibly used in the code; instead, the SVG rendering appends country paths directly after fetching and processing the geographic features.

Eeravellisaimeghana
91% match
Loading thumbnail…

Fork of World Map ICE 8

This example displays a world map with countries rendered in red on a yellow sphere, using a natural Earth projection. It loads world geography data from a JSON file via `d3.json` and processes the TopoJSON with `feature` from the `topojson` library. The map is drawn as SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The visualization is built with D3 v5 and React, with styling applied through CSS classes for the sphere and country paths.

Ssathwikrajidi
91% match
Loading thumbnail…

Fork of ICE-8(World Map)

This example renders a world map using D3 v5 and TopoJSON, displaying countries as dark green filled polygons against a blue sphere. It uses the `geoEquirectangular` projection with `d3.geoPath` to generate SVG paths for each country, while the sphere and country hover states are styled via CSS classes. The map data comes from the world-atlas countries-110m.json file, and the `feature` method from TopoJSON converts the TopoJSON data into GeoJSON features for rendering.

Aajaysonu
91% match
Loading thumbnail…

Fork of Data visualization ICE-8

This visualization displays a world map using an equirectangular projection, with countries rendered as red polygons outlined in green against a yellow sphere background. The map loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. D3’s `geoEquirectangular` and `geoPath` handle the projection and path generation, while SVG paths are bound to country features via `selectAll` and `enter`. Hovering over a country changes its fill to blue through CSS.

Vvamshisoletii
90% match
Loading thumbnail…

Fork of World Map IC8

This example visualizes a world map with countries filled in red and a yellow sphere background, using a natural Earth projection to render geographic features as SVG paths. It loads world data from a remote JSON file via `d3.json` and processes it with `topojson.feature` to extract country boundaries. The code uses `d3.geoPath` with `d3.geoNaturalEarth1` to project coordinates, appending each country path to an SVG element within a React-based setup.

NNaimisha-M
90% match
Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

SsreepavanKothapalli
90% match
Loading thumbnail…

Fork of World_Map_ICE_8

This example displays a world map rendered as an SVG using the Natural Earth projection. The visualization shows landmasses in a purple fill with red country borders and blue graticule lines over a white sphere, all generated with d3.geoPath. The code loads geographic data from a TopoJSON world atlas using d3.json and processes it with topojson.feature and topojson.mesh. React manages the component state through hooks, while the Marks component structures the SVG paths for each geographic layer.

SsreepavanKothapalli
90% match
Loading thumbnail…

Fork of World Map - ICE-8

This example shows a world map rendered in an SVG, with each country outlined in yellow against a blue background. It uses d3.geoPath with a geoNaturalEarth1 projection to convert geographic data into SVG paths. The country boundaries come from the world-atlas TopoJSON dataset, loaded via d3’s json function and processed with the topojson feature API. The map is static, displaying only land outlines without additional styling or interaction.

NNHRK555
90% match