Skip to main content
SimilarExport ZIP
100%

ICE_5_ASSIGNMENT

✓ Published0🌍 Public
Ppemmasaniprudhvinadh
Last edited Mar 9, 2023
Created on Mar 9, 2023

This example presents an interactive world map rendered with SVG, allowing users to zoom and pan across a natural Earth projection. It shows country boundaries with hover highlighting, using a dark blue ocean and light green landmasses. The map is built with D3 v7 and TopoJSON, using `d3.geoPath` and `geoNaturalEarth1` for geographic projection. A CSV file from Walmart is loaded via `d3.csv` to display file size, row, and column counts in a text overlay. The zoom behavior is implemented with D3's `zoom` function.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE on World Map

This example displays a world map rendered in SVG, with countries filled in maroon and outlined in green against a skyblue sphere. Hovering over a country changes its fill to brown. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, with geographic data loaded as TopoJSON from the world-atlas dataset. The page also leverages `topojson.feature` to convert the TopoJSON into GeoJSON for rendering.

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

ICE-8 world map

This example displays a world map using an Equal Earth projection, rendered as an SVG with D3 v5 and TopoJSON. It loads geographic data from the World Atlas TopoJSON file and draws each country as a separate path with a light green fill and subtle blue stroke. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate paths, and `topojson.feature` to convert TopoJSON to GeoJSON. A distinct green sphere outlines the globe's boundaries.

Ssandeep-gollamudi
86% 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
86% match
Loading thumbnail…

ICE8 World Map

This example displays a world map using the Natural Earth projection, with country boundaries rendered as filled paths on an SVG canvas. It demonstrates fundamental D3.js DOM manipulation by loading geographic data from a remote TopoJSON file, converting it to GeoJSON with the `feature` function, and projecting it using `d3.geoPath` and `geoNaturalEarth1`. The sphere outline and countries are styled via CSS, with sky-blue fills and thin stroke outlines. The visualization relies on D3 v5 and TopoJSON v3 to generate the map.

SSnigdha6698
86% match
Loading thumbnail…

World Map - ICE8

This example presents a world map using the Natural Earth projection, rendered as an SVG with D3.js. Countries are drawn as paths using `d3.geoPath` and a `geoNaturalEarth1` projection, with a distinct sphere path representing the globe. The map is interactive, allowing users to zoom and pan via the `d3.zoom` API. Geographic data is loaded from a remote JSON file containing TopoJSON, which is converted to GeoJSON features using the `topojson` library. The visualization employs a brown background and a dark green sphere fill, with countries styled in a light beige.

Ggayuvurukuti@gmail.com
85% match
Loading thumbnail…

ICE 8: World Map with Topojson Data

This example displays an interactive world map using a natural Earth projection, with each country rendered as a distinct filled path. The visualization loads GeoJSON data from the world-atlas TopoJSON file, converts it using the `feature` method from topojson, and projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The SVG output includes a light sphere background and hover highlighting on countries, driven by CSS and D3 v5’s `select` and `data` binding.

Bbharathsivakumar07
85% match
Loading thumbnail…

ICE 8 world map

This example displays a world map using a natural Earth projection, with each country rendered as a green SVG path. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` generators to project and draw geographic features from TopoJSON data fetched from the world-atlas CDN. The code selects an SVG element, loads country boundaries, and appends styled path elements for each nation on a light blue background.

Ssaivinay143
85% match