Activity 8 Map

100%

Activity 8 Map

✓ Published0🌍 Public

Last edited Jul 23, 2023

Created on Jul 23, 2023

This map visualization displays the countries of the world using the geoEquirectangular projection to render a flat view of the Earth. The visualization allows users to zoom and pan across the geographic data. It employs D3 v5’s geoPath and geoEquirectangular functions to draw the countries, which are loaded from a world-atlas GeoJSON file made available via jsdelivr. The SVG map features interactive hover states that change the country fills to maroon, providing immediate visual feedback on the map. The code also integrates the topojson package to process the GeoJSON data into usable features.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

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

91% match

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

91% match

Loading thumbnail…

Activity 8 Map

This map renders a zoomable world map with country boundaries, using an equirectangular projection. Countries appear in black with red borders and turn maroon on hover. The visualization is built with D3 v5, using `d3.geoEquirectangular`, `d3.geoPath`, and `d3.zoom` for panning and scaling. Geographic data comes from the world-atlas TopoJSON file via the `jsdelivr` CDN, converted to GeoJSON features with the `topojson` library’s `feature` method and rendered as SVG paths.

Aakshayvenishetty1437

91% match

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

90% match

Loading thumbnail…

Activity 8 Map

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.

Ssuryavamsi00024

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

90% match