Skip to main content
SimilarExport ZIP
100%

Activity 8 Map

✓ Published0🌍 Public
HHarshiiiiiiiip
Last edited Jul 10, 2023
Created on Jul 10, 2023
Forked from Hello VizHub

This example displays an interactive world map using an equirectangular projection, with countries filled in light green and the ocean in sky blue. It shows the geographic boundaries of nations from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` and `d3.geoEquirectangular`. The map supports zooming through `d3.zoom`, and hovered countries change to maroon using CSS `:hover` rules. The code uses D3 v5 and TopoJSON to convert country features into GeoJSON for visualization.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

Activity8_Task5_Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as light green SVG paths with indigo borders against a skyblue ocean. The map loads GeoJSON county boundaries from the world-atlas TopoJSON dataset via `d3.json`. A `d3.zoom` behavior enables panning and zooming on the SVG, while `d3.geoPath` and the `topojson.feature` method generate the geographic shapes. Hovering over a country changes its fill to maroon through CSS.

HHarshithaAmbilpur
94% match
Loading thumbnail…

Activity 8 Map

This example displays a world map using an equirectangular projection, with countries filled in light green and bordered by indigo. It demonstrates how to load geographic data from the World Atlas TopoJSON file and render it as SVG paths using `d3.geoPath` and `d3.geoEquirectangular`. The map supports pan and zoom interactions via `d3.zoom`, and countries change color to maroon on hover through CSS. The code imports D3 modules and the `feature` method from TopoJSON.

MmNamratha25
94% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using an equirectangular projection, with countries rendered in light green against a sky-blue sphere. The visualization loads GeoJSON data from the world-atlas TopoJSON dataset via the `feature` method, and employs `d3.geoPath` with `d3.geoEquirectangular` to draw the paths. Users can pan and zoom the map using `d3.zoom`, while hovering over countries changes their fill color to maroon.

Aaniteshterala2000
94% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as SVG paths with a light green fill and indigo stroke. The map uses an equirectangular projection via `d3.geoEquirectangular` and `d3.geoPath`, pulling geographic data from the world-atlas countries-110m.json dataset. Users can zoom and pan the map through a `d3.zoom` handler that applies transforms to the SVG. Hovering over a country changes its fill to maroon, providing simple visual feedback.

UUmarani Vemula
94% match
Loading thumbnail…

Activity 8 Map

This interactive world map visualizes country boundaries using light green landmasses against a sky blue ocean. The visualization employs an equirectangular projection, rendered via SVG paths generated with `d3.geoPath`. Users can zoom and pan the map using the `d3.zoom` and `d3.event` APIs. The geographic data originates from the `world-atlas` TopoJSON file, which is converted to GeoJSON features using the `topojson.feature` function. Countries highlight in maroon when hovered, based on CSS styling.

Hharipriyaa07
93% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using an equirectangular projection, with countries filled in light green and hover states highlighted in maroon. Built with D3 v5 and TopoJSON, it loads world-atlas country data from a CDN and renders the map as SVG paths. The visualization supports pan-and-zoom through d3.zoom, which applies transforms to the entire SVG group.

NNagateja99
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