Skip to main content
SimilarExport ZIP
100%

Activity 8 Map

✓ Published0🌍 Public
UUVarshaReddy
Last edited Jul 9, 2023
Created on Jul 9, 2023
Forked from Hello VizHub

This example displays an interactive world map using D3 v5 and TopoJSON. It renders country boundaries from the world-atlas dataset (countries-110m.json) as SVG paths via d3.geoPath and d3.geoEquirectangular projection. Zoom and pan interactions are enabled through d3.zoom, which applies SVG transforms. The map colors landmasses light green with indigo strokes and turns them maroon on hover, demonstrating local ES6 module imports and D3’s data join pattern.

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

Activity 8 Map

This interactive world map uses D3.js to render country boundaries from the world-atlas TopoJSON data. The visualization displays continents in light green with indigo borders against a skyblue ocean sphere using an equirectangular projection. The map supports pan and zoom interactions through D3's zoom and event APIs, while hover states are implemented via CSS to change country colors to maroon. The code demonstrates importing D3 modules and a local ES6 module, and uses the topojson library's feature method to convert the data into GeoJSON.

LLakshmanRangisetti
94% match
Loading thumbnail…

Activity 8 Map

This example shows an interactive world map built with D3 v5 and TopoJSON, using an equirectangular projection to render countries as SVG paths. The map applies sky-blue ocean and light-green land colors, with hover highlighting in maroon. It supports zoom and pan through D3’s zoom behavior, and loads geographic data from the world-atlas countries-110m.json file. The code demonstrates local ES6 module imports, including a custom `myMessage` module, alongside UNPKG-hosted D3 and TopoJSON libraries.

Mmn0658
94% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using the D3.js library with a geoEquirectangular projection. Country boundaries are rendered as SVG paths using d3.geoPath, with light green fill and indigo strokes. The map supports zoom and pan through D3’s zoom behavior. Data comes from the world-atlas TopoJSON file, converted to GeoJSON via the topojson feature method, and countries change color to maroon on hover.

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