Skip to main content
SimilarExport ZIP
100%

Activity 8 Map

✓ Published0🌍 Public
NNukaShravanKumar
Last edited Jul 20, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

This example uses an SVG world map to visualize country boundaries. It renders a blue sphere as the Earth's base and fills each country with a light green color that changes to maroon on hover. The visualization supports panning and zooming through D3’s `zoom` event. It uses D3 v5’s `geoEquirectangular` projection and `geoPath` to draw the map, while TopoJSON’s `feature` method converts the world-atlas countries-110m GeoJSON-like data into useable features.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 8 Map

This example presents an interactive world map using a sphere outline and country boundaries. The map is rendered in SVG using D3 v5 with a `geoEquirectangular` projection and `geoPath` to draw geographic features. Country data comes from the `world-atlas` TopoJSON file, converted to GeoJSON with the `feature` method. Users can pan and zoom the map via D3's `zoom` behavior, while hovering over countries changes their fill color to maroon.

Aanith462@gmail.com
94% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON. It loads country boundaries from the world-atlas dataset and renders them as SVG paths using `d3.geoPath` with a `d3.geoEquirectangular` projection. The map applies a blue sphere background and green country polygons with an indigo stroke, while a `d3.zoom` handler enables pan and zoom transformations. Hovering over a country changes its fill color to maroon via CSS.

BBhavyaMammai
94% match
Loading thumbnail…

Activity 8 Map

This example shows an interactive world map with zoom and pan capabilities. The map renders countries as light green SVG paths with indigo borders on a sky-blue sphere background, and countries turn maroon when hovered. The visualization uses D3 v5’s `geoEquirectangular` projection with `geoPath` to draw geographic features, and `zoom` for user interaction. TopoJSON is used to convert world-atlas country data into GeoJSON features.

Iindushashi.g@gmail.com
93% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using a spherical projection, with countries rendered as filled paths and an ocean backdrop. Panning and zooming are enabled through D3’s zoom behavior, which applies transforms to the entire SVG. The map is built with `d3.geoEquirectangular` for projection, `d3.geoPath` for generating paths, and `topojson.feature` to convert TopoJSON data from the world-atlas dataset into GeoJSON. Countries are colored light green and turn maroon on hover.

SSharankumar02
93% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke against a sky-blue sphere. The map loads geographic data from the world-atlas countries-110m.json dataset and supports zooming and panning through d3.zoom. Hovering over a country changes its fill to maroon via CSS, while d3.geoPath and d3.geoEquirectangular handle the projection and path generation for the GeoJSON features.

Aakshayvenishetty1437
93% match
Loading thumbnail…

Activity 8 Map

This example displays a zoomable world map using an equirectangular projection, with countries rendered as interactive SVG paths that change color on hover. It loads geographic data from the world-atlas TopoJSON file, converting it to GeoJSON with the `feature` method from the `topojson` library. The visualization applies a blue sphere background and green country fill, using D3 v5's `geoPath`, `geoEquirectangular`, and `zoom` APIs to enable panning and scaling of the map.

VVenkat-Sumith-Thota
93% match
Loading thumbnail…

Activity 8 Map

This visualization displays a zoomable world map with countries colored in light green and outlined in indigo, with a sky-blue sphere background. Countries turn maroon when hovered. The map uses D3’s `geoEquirectangular` projection and `geoPath` to render geographic features from a TopoJSON dataset (`world-atlas@2`), while `d3.zoom` enables panning and zooming. The SVG output is styled via CSS class selectors, and the map data is loaded asynchronously using `d3.json` and processed with `topojson.feature`.

Aaniteshterala2000
93% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 version 5 with an equirectangular projection. The map renders country boundaries from a TopoJSON world-atlas dataset, filling landmasses in light green with indigo borders against a sky-blue ocean background. Users can pan and zoom the map through D3’s zoom behavior, which applies transformations to the SVG. Hovering over any country changes its fill color to maroon. The code leverages `d3.geoPath`, `d3.geoEquirectangular`, and the TopoJSON `feature` method to convert and render geographic data.

Ppardha1411
92% match