ICE 8 : D3 World map

100%

ICE 8 : D3 World map

✓ Published0🌍 Public

Last edited Jul 8, 2022

Created on Jul 7, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

ICE 8 World Map using D3

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.

Vvidhyanamini

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

88% match

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

88% match

Loading thumbnail…

ICE-8 part-A Task1 - World Map

This visualization presents a world map with natural Earth projection, overlaid with animated points representing geographic locations from a SPARQL query. The map uses d3.geoPath and d3.geoNaturalEarth1 to render country boundaries and the ocean sphere, while circles mark queried coordinates. Points emerge with a bounce transition, increasing in radius over time. Data comes from the Netwerk Digitaal Erfgoed API, and the code relies on topojson for country features and d3.json for map data.

Mmomopng

87% match

Loading thumbnail…

ICE - 8: World Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. Countries are filled with green and outlined with subtle strokes, while the surrounding sphere is colored light blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate paths, with TopoJSON's `feature` extracting country boundaries from the world-atlas dataset. It appends a sphere path first, then loads country geometries asynchronously from the CDN-hosted TopoJSON file.

PPYATA SHARAN

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

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

86% match

Loading thumbnail…

ICE8 World Map

This example displays a world map using a natural Earth projection, with each country rendered as a filled green path and the sphere outlined in sky blue. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` projection along with TopoJSON’s `feature` method to convert country boundaries from a remote TopoJSON dataset. The map is drawn as SVG elements onto a fixed 960×500 canvas, and the CSS styles the sphere and country paths for visual distinction.

CCherukuriMilind

85% match