Activity 8_Task 5

100%

Activity 8_Task 5

✓ Published0🌍 Public

Last edited Jul 9, 2023

Created on Jul 9, 2023

This interactive world map visualization uses a D3.js geo projection to render countries from a TopoJSON dataset. The map is drawn as SVG paths using the `d3.geoEquirectangular` projection and `d3.geoPath`, with pan and zoom enabled through the `d3.zoom` API. Countries appear in light green with indigo borders, and hovering changes their fill to maroon. The background sphere is filled with sky blue, and the map loads geographic boundary data from the world-atlas package.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity8_Task5 Map

This interactive world map visualizes country boundaries using an equirectangular projection. Users can pan and zoom the SVG viewport via D3’s zoom behavior. The map is rendered with `d3.geoPath` and `d3.geoEquirectangular`, using TopoJSON data from the world-atlas package. Countries appear in light green with indigo borders and turn maroon on hover, while the ocean background is sky blue. The code imports D3 v5 modules and the TopoJSON `feature` method to convert the TopoJSON topology into GeoJSON features for rendering.

Ssrikkanth05

94% match

Loading thumbnail…

Activity 2_Task 6

This interactive map visualizes the countries of the world on an equirectangular projection, rendering landmasses in limegreen over an aqua ocean. Using D3 v5 and TopoJSON, the code loads country boundaries from the world-atlas dataset and draws them as SVG paths via `d3.geoPath`. The map supports zooming and panning through `d3.zoom`, and hovering over any country turns it crimson. The styling is defined in external CSS, while the map updates dynamically in response to user interaction.

KKeerthiAnnem

94% match

Loading thumbnail…

Activity8_Task5_1

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke on a sky-blue sphere. It loads geographic data from the world-atlas countries-110m.json dataset and applies a d3.geoEquirectangular projection with d3.geoPath. Users can pan and zoom the map via d3.zoom, which applies SVG transforms. Countries highlight in maroon on hover, demonstrating basic choropleth-style interaction with projected geographic features.

Cchsaisriharsha@gmail.com

93% match

Loading thumbnail…

Activity 8_Task5_1

This example displays an interactive world map with countries rendered in light green against a skyblue ocean background. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to draw geographic boundaries from the world-atlas GeoJSON dataset. Hovering over individual countries changes their fill to maroon. The map supports zooming through D3’s `zoom` event and `event.transform`, updating the SVG’s transform attribute. The styling comes from an external CSS file, and the code imports `feature` from TopoJSON to convert the dataset.

AArun Pratap

92% match

Loading thumbnail…

Activity 8 TASK 5 Map

This interactive choropleth displays a world map using light green countries against a sky-blue ocean, rendered as SVG paths with indigo borders. It highlights individual countries in maroon when hovered. Built with D3 v5, the visualization loads GeoJSON country boundaries from the world-atlas dataset, applies an equirectangular projection via `d3.geoPath` and `d3.geoEquirectangular`, and converts TopoJSON features using the `topojson.feature` API. Users can pan and zoom the map using the included D3 `zoom` module, which transforms the SVG group on zoom events.

Ssreekarthanda@gmail.com

92% match

Loading thumbnail…

Activity8_Task5_Map

This example displays an interactive world map using an equirectangular projection, with countries rendered as light green SVG paths with indigo borders against a skyblue ocean. The map loads GeoJSON county boundaries from the world-atlas TopoJSON dataset via `d3.json`. A `d3.zoom` behavior enables panning and zooming on the SVG, while `d3.geoPath` and the `topojson.feature` method generate the geographic shapes. Hovering over a country changes its fill to maroon through CSS.

HHarshithaAmbilpur

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

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

91% match