Skip to main content
SimilarExport ZIP
100%

ICE-8 World Map

✓ Published0🌍 Public
DDeepa-Murugesan
Last edited Mar 29, 2023
Created on Mar 29, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE-8_World_Map

This visualization displays a world map with countries rendered in purple with yellow outlines, set against a blue sphere background. Using d3-geo's geoEquirectangular projection, the code loads GeoJSON data from the world-atlas TopoJSON file via topojson.feature to draw each country path. The map responds to hover events, highlighting countries in green. It also includes a canvas-based alternative implementation using d3.geoPath with a graticule layer.

MMeghanaArepalli
91% 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
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 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
90% match