Fork of Fork of Fork of ICE 08 11540905

100%

Fork of Fork of Fork of ICE 08 11540905

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This visualization displays a world map with countries filled in green and blue, highlighting hovered regions in red. It uses D3 v5 and TopoJSON to render geographic boundaries as SVG paths via `d3.geoPath`, with the `topojson` library parsing the map data. Country styling and hover effects are controlled through CSS classes, while the SVG canvas is sized to 960 by 500 pixels. The map focuses on interactive exploration of national borders without additional data layers or animations.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 08 11540905

This visualization displays a world map with countries rendered as filled shapes. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from TopoJSON data loaded via `json()`. The map is an SVG with an orange ocean background, navy countries, and a red hover effect. Country borders are defined with a black stroke, and hovering any country changes its fill color.

NNikhilchiguru-8

89% match

Loading thumbnail…

Fork of ICE 08 11540905

This interactive map displays the world's countries, rendered as SVG paths filled with a green color and outlined in black. The visualization uses D3.js version 5 and the TopoJSON library with the `geoEquirectangular` projection and `geoPath` to draw the map, pulling country boundaries from the world-atlas dataset (countries-110m.json). Upon hovering over a country, its fill color changes from green to blue, providing a simple interactive feedback mechanism.

SstellaWangg

89% match

Loading thumbnail…

Fork of ICE 08 11540905

This example shows a world map with countries rendered in green and an ocean-blue background, highlighting how geographic boundaries appear on an equirectangular projection. When hovered, individual countries change color to red. The visualization uses d3.geoPath and d3.geoEquirectangular to project GeoJSON data from a TopoJSON source file, with the topojson.feature method converting the TopoJSON objects into drawable features. The SVG is styled using CSS classes for the earth background and country fills.

Ssnehareddygurram

89% match

Loading thumbnail…

Fork of Fork of ICE-8 world map

This example shows a world map rendered in an SVG using D3 v5, with countries filled in orange and outlined in red against a skyblue sphere. It uses the `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while `topojson.feature` converts TopoJSON data from a remote gist into GeoJSON for country boundaries. The visualization loads the world map data asynchronously via `d3.json` and appends each country path to the SVG. The sphere background and country styling are defined in the accompanying CSS.

GGARIDIDEEKSHITHREDDY

88% match

Loading thumbnail…

Fork of Fork of ICE-8 world map

This visualization presents a world map rendered as light green countries on a sky blue sphere, using a natural Earth projection to flatten the globe onto a two-dimensional SVG canvas. The map is built with D3 version 5, specifically using `select`, `json`, `geoPath`, and `geoNaturalEarth1` to handle the projection and drawing, while the TopoJSON library’s `feature` function extracts geographic boundaries from the remote worldmap dataset. The sphere is drawn first, followed by country paths, each stroked with semi-transparent black outlines. The SVG output is styled with CSS for the sphere and country fills, and the data is loaded from an external JSON source.

KKolliTeja

88% match

Loading thumbnail…

Fork of ICE 08 11540905

This example presents an interactive world map using a geographic projection. It displays countries as colored regions with a blue sphere background, and hovering over a country changes its fill to red. The visualization is built with D3 v5 and TopoJSON, using `d3.geoEquirectangular` for the projection and `d3.geoPath` to render the map. Country boundaries and shapes come from the world-atlas dataset (countries-110m.json), with SVG paths styled via CSS classes.

GGogineni44

88% match

Loading thumbnail…

Fork of ICE 08 11540905

This example displays a world map with country boundaries, rendered as an SVG using D3.js. The map uses an equirectangular projection and fills the Earth with a light blue color, while countries are colored green and shift to red on hover. It loads GeoJSON data representing boundary lines from a remote source, processes it with the TopoJSON library’s `feature` method, and draws the paths via `d3.geoPath`. The visualization relies on D3’s `select`, `json`, and `geoEquirectangular` functions.

Ssnehareddygurram

88% match

Loading thumbnail…

Fork of ICE 08 11540905 - test

This interactive map displays world countries in a blue and green color scheme, with hover effects that change the country fill to red. It uses d3.geoEquirectangular projection and d3.geoPath to render the map from a Sphere object, while country boundaries and features are drawn from a JSON file loaded from the world-atlas package. The TopoJSON feature method creates GeoJSON objects for the countries. The map is rendered as an SVG with CSS-based hover styling.

MMatovu Ronald

87% match