ICE:8 World Map

100%

ICE:8 World Map

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 7, 2023

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.

AI-generated description

ICE 8: World map using d3.geoEquirectangular() and the world TopoJSON data.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 World Map

This example displays a world map using an equirectangular projection, rendered as an SVG with D3 v5. The visualization shows all countries from the world-atlas TopoJSON dataset, filled in yellow with red borders, and highlights each country in gray on hover. It uses `d3.geoPath` with a `geoEquirectangular` projection and processes the TopoJSON data through the `feature` method from the topojson library to generate geographic paths.

IIndhuKrishnaraj

93% match

Loading thumbnail…

ICE-8 world map

This example displays a world map using an Equirectangular-like natural Earth projection, with countries shaded in light green on a sky-blue ocean sphere. It renders geographic boundaries as SVG paths using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while TopoJSON’s `feature` method extracts country polygons from a remote dataset. The map loads asynchronously via D3’s `json` request and appends each country path to the SVG, with subtle black strokes highlighting borders.

Ssumitradevipolina

92% match

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

92% match

Loading thumbnail…

World Map ICE 8

This visualization displays a global world map using the equirectangular projection, with countries rendered as individual SVG paths filled in brown and outlined in black. The sphere background is shaded blue, and hovering over any country highlights it in a darker orange. It uses D3 v5’s `geoPath` and `geoEquirectangular` functions together with TopoJSON’s `feature` method to convert country boundaries from the world-atlas dataset. The map is drawn entirely with SVG elements, and interactivity is handled by CSS hover selectors.

Mmboinapally17

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

92% match

Loading thumbnail…

ICE 8 : World Map

This example displays a world map using a natural Earth projection, with countries rendered as filled paths and a contrasting sphere background. The visualization loads geographic data from the `world-atlas` TopoJSON dataset, converting it to GeoJSON with TopoJSON’s `feature` function. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, and `select`, appending SVG paths for each country, while styling is defined in CSS classes for the sphere and country fills.

NNITIN0601

92% match

Loading thumbnail…

ICE-8 World Map

This visualization presents a world map rendered in an SVG, where countries appear in light green with purple outlines and the ocean is filled with a blue sphere. The map is generated using D3.js (v5) with a geoEquirectangular projection and the geoPath function to draw geographic shapes. TopoJSON's feature method converts country boundaries from the world-atlas countries-110m JSON data source, while the CSS defines the visual styling for the sphere and country elements.

Kkartik900

92% match

Loading thumbnail…

ICE-8 world map

This example displays a world map using an Equal Earth projection, rendered as an SVG with D3 v5 and TopoJSON. It loads geographic data from the World Atlas TopoJSON file and draws each country as a separate path with a light green fill and subtle blue stroke. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `topojson.feature` to convert TopoJSON to GeoJSON. A distinct green sphere outlines the globe's boundaries.

Ssandeep-gollamudi

92% match