Assignment2_Task6

100%

Assignment2_Task6

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 17, 2023

This visualization displays an interactive world map using a spherical representation with geographic country boundaries. The map is rendered as SVG with an equirectangular projection, allowing users to zoom the entire globe. Countries are colored pale green with black borders and turn white when hovered. The code uses `d3.geoPath` and `d3.geoEquirectangular` for map rendering, `d3.zoom` for pan-and-zoom interactions, and the `topojson` `feature` method to convert TopoJSON data from the world-atlas dataset into GeoJSON for drawing country paths.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignemnt2_Question6

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and filled in light green. Users can zoom and pan the map via D3’s zoom behavior, while hovering over a country changes its fill color. The visualization uses `d3.geoPath` with `d3.geoEquirectangular` and `topojson.feature` to parse country boundaries from the world-atlas TopoJSON dataset. Hover interactions are styled with CSS, and the map’s ocean background is a sky-blue sphere path.

Vvineelaramulapalli32

91% match

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

90% match

Loading thumbnail…

Assignment2_Worldmap

This example displays an interactive world map using geographic data from the world-atlas TopoJSON file. The map presents continents and countries with distinct fill colors and stroke outlines, rendered as SVG paths via d3.geoPath and the geoEquirectangular projection. Users can pan and zoom through d3.zoom, which applies transformations to the SVG group. Hovering over a country changes its fill color to maroon through CSS :hover styling. The visualization demonstrates D3 version 5 with topojson.feature to convert TopoJSON to GeoJSON for rendering.

Bbogasamudramvamsikrishnareddy

89% match

Loading thumbnail…

Activity 8_Task 5

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.

KKeerthiAnnem

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

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

88% match

Loading thumbnail…

Activity8_Task5_WorldMap

This world map visualization displays countries as light green polygons with indigo borders on a skyblue spherical backdrop, using an equirectangular projection. It renders topojson country boundaries from the world-atlas dataset via d3.geoPath and d3.geoEquirectangular. The map supports zooming through d3.zoom, while CSS hover styling changes country fill colors to maroon. All shapes are drawn as SVG paths in a single svg element.

Rrikhitakoganti12

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

87% match