ICE 8 World Map using D3

100%

ICE 8 World Map using D3

✓ Published1🌍 Public

Last edited Apr 2, 2022

Created on Apr 2, 2022

Forked from D3 map

This example shows a world map with animated circles that plot 1,500 museum object locations retrieved from a SPARQL endpoint, using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Each location appears sequentially with a bounce easing effect, transitioning from radius 0 to 8 pixels using `transition.attr`. The map is rendered as SVG, with country boundaries from TopoJSON (world-atlas) and a light blue sphere. The code uses D3 v5 and TopoJSON to fetch and draw geographic features.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 World Map using D3

This visualization presents a world map using D3.js with an equal-area natural Earth projection, plotting over 1,500 data points retrieved from a SPARQL endpoint. Each point is drawn as an SVG circle whose coordinates are projected from longitude and latitude values. The map itself is rendered with `d3.geoPath` using TopoJSON country outlines. Circles appear sequentially with a staggered `transition` delay, using a bounce easing function to animate their scale from zero to full size, creating a cascading effect across the globe.

Ssowmyanagula@my.unt.edu

94% match

Loading thumbnail…

ICE 8 : D3 World map

An interactive D3 world map plots up to 1,500 museum object locations as animated circles. The map uses a Natural Earth projection via `geoNaturalEarth1` and renders country boundaries with `geoPath` from TopoJSON data. Circle positions come from a SPARQL query against the Network of Digital Heritage API, with latitude and longitude mapped through the projection. Each point appears sequentially with a bouncing `transition` effect, styled as white circles over goldenrod countries on a black sphere.

SShreeti Upreti

92% match

Loading thumbnail…

ICE-8 World Map (Dhanusree Kodali)

This visualization presents a world map with data points plotted from a SPARQL query against the Netwerk Digitaal Erfgoed API. It uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries with `d3.geoPath` from TopoJSON data. Each retrieved location appears as an animated circle that transitions from zero to its final radius using `d3.easeBounce`, with staggered delays. The map is drawn with SVG elements styled in CSS, and the code relies on D3 v5 and the TopoJSON library.

DDhanusree Kodali

91% match

Loading thumbnail…

ICE8 - World Map

This example renders a world map using D3.js. It displays countries as pink shapes with black outlines, set against a light green sphere, using a natural Earth projection. The map is built with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG path data, while the `topojson` library’s `feature` function converts GeoJSON country boundaries from the world-atlas dataset for rendering.

AAnanyaSamala

91% match

Loading thumbnail…

ICE-8 World Map

This example displays a world map using a natural Earth projection, with each country rendered as a white SVG path with black outlines. The visualization loads geographic data from a GitHub-hosted TopoJSON file, then uses `d3.geoPath` and `geoNaturalEarth1` to project the features onto a 960x500 canvas. The code also draws a transparent sphere outline around the map. D3 v5’s `json` and `select` methods handle the asynchronous data loading and SVG element creation, while TopoJSON’s `feature` API converts the encoded boundaries into usable GeoJSON geometries.

Sspandhanabadekol

90% match

Loading thumbnail…

ICE8 - World Map

This example displays a world map using a natural Earth projection, rendering countries as green polygons with a blue ocean sphere. It uses D3 v5’s `d3.geoNaturalEarth1()` projection and `d3.geoPath()` to convert geographic coordinates into SVG paths. Country boundaries come from the world-atlas TopoJSON dataset, processed with `topojson.feature`. The map is drawn entirely in SVG, with the sphere background and country layers styled via CSS.

Ggeethikal

90% match

Loading thumbnail…

ICE8 - World Map

This example renders a world map using the Natural Earth projection. It draws a blue sphere as the globe’s background, then fills each country with a light green color and subtle black strokes. The visualization loads geographic data from the world-atlas TopoJSON file, converts it using `topojson.feature`, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output is generated entirely through D3’s selection and data-join methods.

LLakshmiVandanaNunna

89% match

Loading thumbnail…

ICE 8 : World Map

This example displays a world map using a natural Earth projection, with countries rendered as filled paths and a contrasting sphere background. The visualization loads geographic data from the `world-atlas` TopoJSON dataset, converting it to GeoJSON with TopoJSON’s `feature` function. The code uses D3 v5’s `geoPath`, `geoNaturalEarth1`, and `select`, appending SVG paths for each country, while styling is defined in CSS classes for the sphere and country fills.

NNITIN0601

89% match