Activity 8 Map

100%

Activity 8 Map

✓ Published0🌍 Public

Last edited Jul 23, 2023

Created on Jul 23, 2023

A world map rendered as an SVG using D3.js and TopoJSON. The map displays countries with light green fill and indigo borders, set against a sky-blue ocean background, with hover states turning countries maroon. The visualization uses the equirectangular projection and supports zooming via the D3 zoom event. Data comes from the world-atlas countries-110m GeoJSON source. The code uses D3's `select`, `json`, `geoPath`, `geoEquirectangular`, and `zoom` APIs, alongside TopoJSON's `feature` method to build country geometries.

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 visualization displays a zoomable world map with countries colored in light green and outlined in indigo, with a sky-blue sphere background. Countries turn maroon when hovered. The map uses D3’s `geoEquirectangular` projection and `geoPath` to render geographic features from a TopoJSON dataset (`world-atlas@2`), while `d3.zoom` enables panning and zooming. The SVG output is styled via CSS class selectors, and the map data is loaded asynchronously using `d3.json` and processed with `topojson.feature`.

Aaniteshterala2000

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

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

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

92% match

Loading thumbnail…

Activity 8 Map

This visualization displays an interactive world map using an equirectangular projection, with countries rendered as light green shapes with indigo borders on a skyblue sphere background. The map supports zooming and panning via d3.zoom, while hovering over a country turns it maroon. Built with D3 v5 and TopoJSON, the code uses d3.geoPath and d3.geoEquirectangular to project geographic data from the world-atlas countries-110m.json dataset, which is loaded and converted into GeoJSON features using the topojson feature method.

MManideeprenikindi

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

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

92% match