Activity 8 Map

100%

Activity 8 Map

✓ Published0🌍 Public

Aaniteshterala2000

Last edited Jul 22, 2023

Created on Jul 22, 2023

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

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 8 Map

This interactive world map displays countries as light green regions with indigo borders on a sky-blue sphere, and highlights each country in maroon when hovered. The visualization uses D3.js v5 with the `geoEquirectangular` projection and `geoPath` to render geographic features, while the TopoJSON `feature` function converts country data from the world-atlas JSON source. Pan and zoom interactions are enabled through D3’s `zoom` event handler, which applies a transform to the SVG element.

VVinay Vemuri

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

94% match

Loading thumbnail…

Activity 8 Map

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.

Bbogasamudramvamsikrishnareddy

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

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 interactive world map displays country boundaries using a light green fill on a sky-blue sphere, with indigo strokes and a maroon hover effect. The visualization loads GeoJSON data from the world-atlas TopoJSON file via `d3.json`, converts it with `topojson.feature`, and renders paths using `d3.geoPath` with a `geoEquirectangular` projection. Users can pan and zoom through `d3.zoom`, which applies transforms to the SVG. The map is built with D3 v5 and styled through a linked CSS file.

Lleftymadi

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