World Map - ICE 8

100%

World Map - ICE 8

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 24, 2023

This visualization displays a world map with tan-colored country polygons outlined in black, rendered on a gray background and capable of zooming through user interaction. Built with D3 v5 and TopoJSON, the map loads country boundary data from the world-atlas package and names from a corresponding TSV file, using a Natural Earth projection to generate SVG paths. Each country includes a title tooltip showing its name, with the zoom behavior applied to the entire map group via D3’s zoom() API.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map- ICE8

This visualization displays a world map using a natural Earth projection, rendered as orange countries with black borders on a white background. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset. The code uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to parse the GeoJSON features. A single SVG element contains all country paths, with the sphere drawn as a separate path class.

KKolliTeja

91% match

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using D3 version 5. It renders countries as green regions with black borders on a blue sphere. The map uses the Natural Earth projection and retrieves country boundaries from the world-atlas dataset via a JSON file. The code employs `d3.geoPath` with `d3.geoNaturalEarth1` to generate the map, and countries respond to hover events by changing color. Data loading is handled through `d3.json`, with topojson processing features.

VVamsi Krishna

90% match

Loading thumbnail…

ICE 8 - World Map

A world map displays countries as green filled polygons with black strokes on a sky blue circular backdrop. The visualization loads geographic data from a local `worldmap.json` TopoJSON file and projects it using the Natural Earth projection. D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` APIs, combined with TopoJSON’s `feature` method, render the country boundaries as SVG paths within a 960 by 500 pixel viewport.

Nnagarajuobbineni

89% match

Loading thumbnail…

ICE-8 WORLD MAP

This visualization displays a world map using a natural Earth projection, rendering countries as green filled polygons with blue strokes. The code loads geographic data from the world-atlas TopoJSON source and converts it using `topojson.feature`, then applies `d3.geoPath` with `d3.geoNaturalEarth1` to generate SVG paths. A blue sphere outline highlights the globe’s boundary. The countries appear as static shapes without interaction, with styling defined via CSS classes for the sphere and country paths.

Ssaidhiraj16

89% match

Loading thumbnail…

ICE8 - World Map

This visualization displays a world map using a natural Earth projection, with countries rendered as filled SVG paths and a light blue sphere representing the globe. The map loads geographic data from the world-atlas TopoJSON dataset, then converts it to GeoJSON features via the topojson library’s `feature` function. The D3.js `geoNaturalEarth1` projection and `geoPath` API generate the country boundaries, which are styled with a pale fill and semi-transparent black strokes against a white background.

Mmosesimmanuelvemana@my.unt.edu

89% match

Loading thumbnail…

World Map - ICE8

This example presents a world map using the Natural Earth projection, rendered as an SVG with D3.js. Countries are drawn as paths using `d3.geoPath` and a `geoNaturalEarth1` projection, with a distinct sphere path representing the globe. The map is interactive, allowing users to zoom and pan via the `d3.zoom` API. Geographic data is loaded from a remote JSON file containing TopoJSON, which is converted to GeoJSON features using the `topojson` library. The visualization employs a brown background and a dark green sphere fill, with countries styled in a light beige.

Ggayuvurukuti@gmail.com

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

88% match

Loading thumbnail…

ICE-8-World-Map

This visualization displays a world map with countries rendered as black landmasses with gold outlines, all set against a blue spherical background. It uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw the map, while the `topojson.feature` method converts the World Atlas TopoJSON data from the countries-110m.json file into GeoJSON features. The map also includes a hover effect that highlights individual countries in white.

Hhossaphul

88% match