Fork of Activity 8 Map

100%

Fork of Activity 8 Map

✓ Published0🌍 Public

Last edited Jul 19, 2023

Created on Jul 19, 2023

This interactive world map visualizes country boundaries using a geographic projection, with zoom functionality and hover effects that change country colors. Built with D3 version 5 and the TopoJSON package, it loads GeoJSON data from the world-atlas library and renders countries as SVG paths. The code uses `d3.geoEquirectangular` for the projection, `d3.geoPath` to generate the map paths, and a zoom control that applies transform attributes on zoom events. The styling in CSS fills the earth with skyblue, countries with lightgreen, and maroon on hover.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 8 Map

This visualization displays a world map using an equirectangular projection, with countries rendered in light green and an indigo stroke atop a sky-blue sphere. It shows geographic boundaries from the World Atlas TopoJSON dataset, rendered as SVG paths via d3.geoPath. The map supports interactive pan and zoom, implemented with d3.zoom, and country paths change to maroon on hover through CSS styling. The code uses d3.json to load the data and topojson.feature to convert it to GeoJSON.

Rrushithareddyy

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

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

90% match

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON. It loads country boundaries from the world-atlas dataset and renders them as SVG paths using `d3.geoPath` with a `d3.geoEquirectangular` projection. The map applies a blue sphere background and green country polygons with an indigo stroke, while a `d3.zoom` handler enables pan and zoom transformations. Hovering over a country changes its fill color to maroon via CSS.

BBhavyaMammai

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

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

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

88% match

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON. It renders country boundaries from the world-atlas dataset (countries-110m.json) as SVG paths via d3.geoPath and d3.geoEquirectangular projection. Zoom and pan interactions are enabled through d3.zoom, which applies SVG transforms. The map colors landmasses light green with indigo strokes and turns them maroon on hover, demonstrating local ES6 module imports and D3’s data join pattern.

UUVarshaReddy

88% match