Fork of Activity 8 Map

100%

Fork of Activity 8 Map

✓ Published0🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

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.

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

BBhavanaGIrni

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

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

90% 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 an equirectangular projection, with countries filled in light green and the ocean in sky blue. It shows the geographic boundaries of nations from the World Atlas TopoJSON dataset, rendered as SVG paths via `d3.geoPath` and `d3.geoEquirectangular`. The map supports zooming through `d3.zoom`, and hovered countries change to maroon using CSS `:hover` rules. The code uses D3 v5 and TopoJSON to convert country features into GeoJSON for visualization.

HHarshiiiiiiiip

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

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

89% match