Activity 8 Map

100%

Activity 8 Map

✓ Published0🌍 Public

Last edited Jul 9, 2023

Created on Jul 9, 2023

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.

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 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. 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 interactive world map visualizes country boundaries using an equirectangular projection, with countries rendered as light green SVG paths and a sky-blue sphere background. Viewers can zoom and pan the map using D3's zoom behavior. The visualization loads TopoJSON data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and renders paths with `d3.geoPath`. Hovering over a country triggers a CSS color change to maroon, providing basic interactivity. The implementation uses D3 v5 with ES6 module imports for `json`, `geoEquirectangular`, and `zoom`.

HHemanthh81

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

NNukaShravanKumar

93% match