ICE 8 World Map using D3

100%

ICE 8 World Map using D3

✓ Published0🌍 Public

Ssowmyanagula@my.unt.edu

Last edited Apr 2, 2022

Created on Apr 2, 2022

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.

AI-generated description

MIT Licensed

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

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

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

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

89% match

Loading thumbnail…

ICE 8- World Map

This visualization displays a world map using a natural Earth projection, rendered as SVG paths. Countries appear in green with brown outlines against a steel-blue sphere, conveying a simple geographic overview. The map draws country boundaries from the world-atlas JSON dataset, which is loaded and processed using D3’s `json` and `geoPath` functions with the `geoNaturalEarth1` projection, while TopoJSON’s `feature` extracts the country geometries. The code builds the map with D3 v5, appending sphere and country paths to the SVG canvas.

AAmruthaVee

89% match

Loading thumbnail…

ICE 8 (World Map)

This visualization displays a world map using a natural Earth projection, with each country rendered as a distinct SVG path. The map is initially presented as a grey sphere with countries shown in their default color, and hovering over a country highlights it in blue with a white outline. The code uses D3.js v5 and the topojson library to fetch geospatial data from the world-atlas dataset and convert it into geographic features via `d3.geoPath` and `projection`. The rendering approach leverages the `geoNaturalEarth1` projection for a visually balanced earth representation.

Pprashanth yamala

89% match

Loading thumbnail…

ICE8 World Map

This visualization presents a world map using a natural Earth projection, with countries filled in sky blue and outlined in black against a maroon sphere, all set on a pink background. The map is rendered as an SVG using D3.js (v5) and topojson, pulling geographic data from a remote GitHub gist. The code demonstrates the use of `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the country boundaries, while styling is applied via CSS classes for the sphere and countries.

RRamyapriyaPutta

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

88% match