ICE 08 11590101

100%

ICE 08 11590101

✓ Published1🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 08 11540905

This example displays a world map with countries filled in green and an ocean-blue background. It uses the `geoEquirectangular` projection from D3 v5, applying `geoPath` to render the geographic shapes, and the `topojson.feature` function to convert data from the world-atlas countries-110m.json TopoJSON file into GeoJSON features. The map is drawn as SVG paths, and countries change to red when hovered.

Nnagasai-gummadi

91% match

Loading thumbnail…

ICE-08 11603435

This visualization displays a world map using an equirectangular projection, with countries rendered as black-filled paths against a blue ocean sphere. It loads geospatial data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature()` method from TopoJSON. The D3 v5 code employs `geoEquirectangular()`, `geoPath()`, and `.projection()` to generate the map geometry. Countries change to a red color on hover through a CSS `:hover` rule, and the SVG output is fixed at 960 by 500 pixels.

0057SatvikDamera

91% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered with D3.js, using an orange fill for countries and blue for the ocean background. It draws country boundaries from the world-atlas TopoJSON dataset (countries-110m.json), converting the data into SVG paths via the `geoNaturalEarth1` projection and `geoPath` generator. The code also appends a circular outline over the sphere. Topojson’s `feature` API extracts geographies, and D3’s selection methods bind the data to path elements, with styling handled by CSS classes.

MMgk1255

90% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered as an SVG, with countries drawn in pink and the globe’s sphere filled in light blue. It uses D3 v5 and the TopoJSON library to load country boundaries from the world-atlas dataset, specifically the countries-110m.json file. The map employs a natural Earth projection via `geoNaturalEarth1` and generates SVG paths with `geoPath`. Country features are extracted using TopoJSON’s `feature` method and bound to SVG elements.

KKande2011

90% match

Loading thumbnail…

ICE 08 worldmap

This example displays an interactive world map using an equirectangular projection, rendered as SVG paths with countries filled in a light cream color and a blue ocean background. Hovering over any country changes its fill to red, providing immediate visual feedback. The visualization uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` for map generation, while TopoJSON’s `feature` method converts the world-atlas countries-110m.json dataset into GeoJSON features for rendering. Styling is controlled through CSS classes for earth and country elements.

Aayodhyanandh

90% match

Loading thumbnail…

ICE-8_world_map

This example shows a world map with countries colored in red against an orange sphere, and hovering highlights each country in gray. It uses D3 v5’s `geoAzimuthalEqualArea` projection with `geoPath` to render the map, and TopoJSON’s `feature` method to extract country boundaries from the world-atlas countries-10m dataset. The SVG elements are styled via CSS, including hover effects and stroke opacity.

NNiharika-Guthikonda

90% match

Loading thumbnail…

ICE-08 11550685

This example presents an interactive world map using a pink-filled sphere and blue countries with red borders. Hovering over a country highlights it in yellow. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to render geographic features, while TopoJSON’s `feature` API converts the world-atlas countries-110m.json data into GeoJSON paths. The SVG elements are managed with D3 selections, including `select`, `selectAll`, and `enter`. The map loads the TopoJSON dataset from a CDN and includes basic CSS styling for interactivity.

AAISWARYAMARAPATLA1999

90% match

Loading thumbnail…

ICE on World Map

This example displays a world map rendered in SVG, with countries filled in maroon and outlined in green against a skyblue sphere. Hovering over a country changes its fill to brown. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, with geographic data loaded as TopoJSON from the world-atlas dataset. The page also leverages `topojson.feature` to convert the TopoJSON into GeoJSON for rendering.

DDineshK2602

90% match