Activity8_Task5_Map

100%

Activity8_Task5_Map

✓ Published0🌍 Public

Last edited Jul 21, 2023

Created on Jul 11, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 8 Map

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.

HHarshiiiiiiiip

94% match

Loading thumbnail…

Activity8_Task5 Map

This interactive world map visualizes country boundaries using an equirectangular projection. Users can pan and zoom the SVG viewport via D3’s zoom behavior. The map is rendered with `d3.geoPath` and `d3.geoEquirectangular`, using TopoJSON data from the world-atlas package. Countries appear in light green with indigo borders and turn maroon on hover, while the ocean background is sky blue. The code imports D3 v5 modules and the TopoJSON `feature` method to convert the TopoJSON topology into GeoJSON features for rendering.

Ssrikkanth05

93% match

Loading thumbnail…

Activity 8_Task5_1

This example displays an interactive world map with countries rendered in light green against a skyblue ocean background. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from the world-atlas GeoJSON dataset. Hovering over individual countries changes their fill to maroon. The map supports zooming through D3’s `zoom` event and `event.transform`, updating the SVG’s transform attribute. The styling comes from an external CSS file, and the code imports `feature` from TopoJSON to convert the dataset.

AArun Pratap

93% match

Loading thumbnail…

Activity8_Task5_1

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke on a sky-blue sphere. It loads geographic data from the world-atlas countries-110m.json dataset and applies a d3.geoEquirectangular projection with d3.geoPath. Users can pan and zoom the map via d3.zoom, which applies SVG transforms. Countries highlight in maroon on hover, demonstrating basic choropleth-style interaction with projected geographic features.

Cchsaisriharsha@gmail.com

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

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

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

92% match

Loading thumbnail…

Activity 8_Task 5

This interactive world map visualization uses a D3.js geo projection to render countries from a TopoJSON dataset. The map is drawn as SVG paths using the `d3.geoEquirectangular` projection and `d3.geoPath`, with pan and zoom enabled through the `d3.zoom` API. Countries appear in light green with indigo borders, and hovering changes their fill to maroon. The background sphere is filled with sky blue, and the map loads geographic boundary data from the world-atlas package.

KKeerthiAnnem

92% match