Skip to main content
SimilarExport ZIP
100%

Fork of Data visualization ICE-8

✓ Published0🌍 Public
Vvamshisoletii
Last edited Mar 30, 2023
Created on Mar 30, 2023
Forked from Hello VizHub

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.

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 ICE 8 world map

This example displays a world map using an equirectangular projection, rendering each country as a green SVG path with black outlines that turn orange on hover. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method from TopoJSON. D3 v5’s `geoPath` and `geoEquirectangular` generate the sphere background and country shapes, while CSS handles the color styling and interactive hover states.

Ssushmithameher-patnam
92% 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 ICE 8 world map

This visualization displays a world map with countries rendered in saddle brown against a light blue sphere, using a simple equirectangular projection. Countries highlight in rosy brown on hover. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using TopoJSON’s `feature` method. It renders the map with D3’s `geoPath` and `geoEquirectangular` APIs, appending SVG path elements for each country. Styling is handled via CSS classes for the sphere and country fills.

Ssushmithameher-patnam
90% match
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
90% match
Loading thumbnail…

Fork of World_Map_ICE_8

This is a world map visualization rendered with SVG, depicting country borders and interior boundaries. The map uses an Eckert III projection, with landmasses filled in a light purple and graticules drawn in blue. It displays countries from the world-atlas TopoJSON dataset, with internal boundaries between countries highlighted in red. The visualization is built using React and D3, employing `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic projections and path rendering, while `topojson.feature` and `topojson.mesh` process the spatial data.

VVAbhiram99
90% match
Loading thumbnail…

Fork of ICE 08 11540905

This example shows a world map with countries rendered in green and an ocean-blue background, highlighting how geographic boundaries appear on an equirectangular projection. When hovered, individual countries change color to red. The visualization uses d3.geoPath and d3.geoEquirectangular to project GeoJSON data from a TopoJSON source file, with the topojson.feature method converting the TopoJSON objects into drawable features. The SVG is styled using CSS classes for the earth background and country fills.

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

Fork of ICE 8: Country Map

This visualization presents a world map using the spherical Mercator projection. Landmasses are rendered in a deep red, with graticules shown in light gray and country interiors outlined in teal against a pale sphere. The example leverages d3.geoPath, geoMercator, and geoGraticule from D3 to generate geographic shapes, while React manages the SVG rendering. Topological data from World Atlas 110m is processed with topojson’s feature and mesh functions to distinguish land from country interiors. The projection and custom styling convey a clean, minimalist cartographic aesthetic.

Bbhargavarathod
90% match