Skip to main content
SimilarExport ZIP
100%

ICE-8_world_map

✓ Published0🌍 Public
NNiharika-Guthikonda
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from ICE 08 11540905

This example shows a world map with countries colored in red against an orange sphere, and hovering highlights each country in gray. It uses D3 v5’s `geoAzimuthalEqualArea` projection with `geoPath` to render the map, and TopoJSON’s `feature` method to extract country boundaries from the world-atlas countries-10m dataset. The SVG elements are styled via CSS, including hover effects and stroke opacity.

AI-generated description
MIT Licensed

Similar vizzes

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

Data Visualization - ICE8 - World Map

This example displays a world map using the D3.js library, rendering countries as red paths with blue outlines on a black sphere. It uses the `geoEquirectangular` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. Hovering over a country changes its fill to green via a CSS `:hover` rule. The visualization demonstrates geospatial data rendering with D3 v5 and TopoJSON’s `feature` method.

Ppravalika.thogaru10@gmail.com
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
90% match
Loading thumbnail…

ICE 8

This example renders a world map using the equirectangular projection, filling each country solid red against a blue sphere. It highlights countries in black on hover. The visualization loads TopoJSON world-atlas data, converts it to GeoJSON with TopoJSON’s `feature` method, and draws paths using `d3.geoPath` and `d3.geoEquirectangular`. The SVG output is styled via CSS, and interactions rely on the `:hover` selector.

Vvineeth0000
90% match
Loading thumbnail…

ICE 08 11590101

This example presents a world map rendered with D3 v5 and TopoJSON, using the `geoMercator` projection and `geoPath` to draw country boundaries from the world-atlas countries-110m dataset. The SVG displays oceans in blue and countries in purple, with a hover effect that changes the fill color to pink via CSS. The code loads the TopoJSON data asynchronously with `d3.json`, converts it to GeoJSON using `feature`, and appends each country as a path element.

DDivyasri0310
90% match
Loading thumbnail…

ICE 8

A world map rendered in red on a blue sphere, with country borders outlined in white, highlights each nation’s shape. Built with D3 v5 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from the world-atlas dataset. Hovering a country changes its fill to a darker red, while the base sphere is drawn using a GeoJSON Sphere object, displaying a full global projection.

MMounishSeeni
90% match
Loading thumbnail…

ICE-08 11550685

This example presents an interactive world map using a pink-filled sphere and blue countries with red borders. Hovering over a country highlights it in yellow. The visualization uses D3 v5’s `geoEquirectangular` projection and `geoPath` to render geographic features, while TopoJSON’s `feature` API converts the world-atlas countries-110m.json data into GeoJSON paths. The SVG elements are managed with D3 selections, including `select`, `selectAll`, and `enter`. The map loads the TopoJSON dataset from a CDN and includes basic CSS styling for interactivity.

AAISWARYAMARAPATLA1999
90% 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
90% match