Skip to main content
SimilarExport ZIP
100%

ICE8 map

✓ Published1🌍 Public
AAniv Chakravarty
Last edited Apr 5, 2023
Created on Feb 21, 2023

This visualization displays a world map using a Mercator projection, with each country rendered as an SVG path. It uses d3.geoMercator and d3.geoPath to project geographic coordinates, with TopoJSON data from the world-atlas package providing country boundaries. The map applies a brown fill with semi-transparent black strokes, and the page has a light blue background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE Eight-1A - World Map

This example presents a world map visualization using the Mercator projection, with each country rendered as an SVG path. The countries are initially filled teal with white borders, and hovering over a country turns it yellow, while moving the mouse away changes it to light green. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson library. It leverages D3.js v6 APIs including `d3.geoMercator`, `d3.geoPath`, and SVG `path` elements for rendering, with mouse events handled via D3's `.on()` method.

CChi Aghaizu
91% match
Loading thumbnail…

ICE-8 World Map

This example displays an ICE-8 world map, rendering countries as blue filled shapes with white outlines against a light blue spherical backdrop. It uses a Mercator projection via d3.geoMercator and draws the geographic paths with d3.geoPath. The SVG output is generated through React, with country boundaries parsed from a TopoJSON file using the topojson feature function. The visualization loads geographic data from a GitHub gist and styles the map using CSS, with the sphere and country paths colored separately for contrast.

Aanushaanumula
91% match
Loading thumbnail…

ICE #8 World Map

This map shows world country boundaries on a blue sphere with a graticule grid overlay. It uses D3's geoMercator projection and geoPath to render geographic features, while topojson's feature method converts TopoJSON data from the world-atlas dataset. The SVG elements include styled paths for the sphere, graticule, and individual countries loaded asynchronously.

KKevin Raj
90% match
Loading thumbnail…

ICE 8 - World Map

This example displays a world map rendered as a green SVG using a Mercator projection. It loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with topojson.feature. The code uses d3.geoPath and d3.geoMercator to define the projection, and appends a path for each country to an SVG element with a light blue background. The map is built with D3 v4 within a React-compatible HTML page.

DDaniel Mata
90% match
Loading thumbnail…

ICE 8

This visualization displays a world map using an equirectangular projection, with countries rendered in red and oceans in blue. The map is drawn as SVG paths generated by `d3.geoPath`, using geographic data from the world-atlas TopoJSON file, converted to GeoJSON via TopoJSON’s `feature` method. Country shapes respond to mouse hover by changing fill color, and the map is framed by a blue sphere outline.

MMounishSeeni
90% match
Loading thumbnail…

ICE 8 World Map with Topojson Data

This visualization displays a world map rendered as an SVG, with country boundaries drawn from TopoJSON data sourced from the world-atlas dataset. It uses D3 v5’s `d3.geoPath` and `d3.geoEquirectangular` to project and draw each country as a blue path with white strokes, while a white sphere outlines the globe. The `topojson.feature` method converts the TopoJSON topology into GeoJSON features for rendering. Hovering over any country changes its fill color to orange via CSS.

Ddivyakota99
90% match
Loading thumbnail…

ICE-8 World Map 1

This example displays a world map using the Mercator projection, with countries rendered as green filled paths with dark borders. A dashed graticule grid overlays the map, and both layers are scaled down from the top. The visualization uses D3 v7’s `geoPath` and `geoMercator` projections, along with the `topojson` library’s `feature` function to parse geographic data from the `world-atlas` land-50m JSON dataset hosted on a CDN. The map is drawn as SVG paths.

DDan Waters
90% match
Loading thumbnail…

ICE-8(World Map)

This interactive world map displays country boundaries using an equirectangular projection, rendered as SVG paths. The visualization loads geographic data from a TopoJSON world-atlas file and converts it to GeoJSON features via the `topojson.feature` API. Countries are drawn with `d3.geoPath` and respond to hover by changing fill color through CSS. The sphere background uses a blue fill, while countries appear in dark green with black strokes, creating clear visual separation between landmasses and ocean.

Jjayanthamol99
90% match