Skip to main content
SimilarExport ZIP
100%

Activity 8 Map

✓ Published0🌍 Public
Ssuryavamsi00024
Last edited Jul 5, 2023
Created on Jul 5, 2023
Forked from Hello VizHub

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.

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 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…

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

Activity 8 Map

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.

UUVarshaReddy
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
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
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 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
93% match