ICE on World Map

100%

ICE on World Map

✓ Published0🌍 Public

Last edited Apr 12, 2023

Created on Apr 11, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 8 - World Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and a light blue sphere representing the globe. The map loads GeoJSON data from a hosted JSON file, processed through TopoJSON’s `feature` method, and draws each country with a green fill and black stroke. Hovering over a country highlights it in a warm peach color. The visualization uses D3 v5 APIs including `d3.geoEquirectangular`, `d3.geoPath`, and `d3.select`, with React as the underlying framework.

IIndiraSiripurapu

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

91% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered as SVG, with each country filled using a pastel color scale and outlined with subtle brown strokes. It uses the `geoNaturalEarth1` projection and `geoPath` from d3.v5 to generate the map geometry, while `topojson.feature` extracts country boundaries from a world-atlas TopoJSON file hosted on GitHub. The map is set against a sky-blue sphere background, with a title text appended to the SVG canvas.

Nnehabaddam

91% match

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

90% match

Loading thumbnail…

ICE:8 World Map

This example displays a world map rendered as an SVG, using an equirectangular projection to plot countries from the world-atlas TopoJSON dataset. A light blue sphere path provides the ocean background, while each country is drawn as a brown filled path with black strokes. The visualization is built with D3 v5, specifically using `d3.geoEquirectangular()` for projection, `d3.geoPath()` to generate SVG path data, and the TopoJSON client’s `feature()` function to extract GeoJSON from the loaded data.

SSharmaAshwini

90% match

Loading thumbnail…

ICE-8 World Map

This example displays a simple world map with countries rendered in light gray against an olive-colored ocean sphere. Using D3 v5 and TopoJSON, it loads world-atlas country boundaries and projects them with `geoEquirectangular` and `d3.geoPath`. Hovering over any country changes its fill to pale turquoise. The map is drawn as SVG paths, with the sphere generated from a GeoJSON Sphere object.

DDeepa-Murugesan

90% match

Loading thumbnail…

ICE-8 World Map

This example shows a world map of countries rendered as filled green shapes with black outlines on a white sphere. It uses D3.js to load TopoJSON data from the world-atlas package, converts it to GeoJSON features via `topojson.feature`, and draws the paths with a `d3.geoPath` generator using the `d3.geoNaturalEarth1` projection. The SVG output includes a separate sphere path for the globe outline, with styling applied through the external stylesheet.

DDeeraj Thakkilapati

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