Skip to main content
SimilarExport ZIP
100%

Activity 8 Map

✓ Published0🌍 Public
VVinay Vemuri
Last edited Jul 23, 2023
Created on Jul 23, 2023
Forked from Hello VizHub

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.

AI-generated description

A demonstration of how to start using D3 version 6.

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
95% 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 interactive world map visualizes country boundaries using light green landmasses against a sky blue ocean. The visualization employs an equirectangular projection, rendered via SVG paths generated with `d3.geoPath`. Users can zoom and pan the map using the `d3.zoom` and `d3.event` APIs. The geographic data originates from the `world-atlas` TopoJSON file, which is converted to GeoJSON features using the `topojson.feature` function. Countries highlight in maroon when hovered, based on CSS styling.

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

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