Skip to main content
SimilarExport ZIP
100%

Project: Map Interaction Assignment Final

✓ Published1🌍 Public
MMukund Khandelwal
Last edited Oct 17, 2018
Created on Oct 14, 2018

This interactive world map displays each country with hover tooltips showing its name, continent, and economic classification. The visualization uses an equirectangular projection rendered as SVG paths via d3.geoPath, with topojson feature conversion for geographic data. Pan and zoom functionality is implemented through d3.zoom, applying transforms to the map group. Country boundaries come from the world-atlas TopoJSON dataset, while names and economic metadata are joined from TSV data using ISO country codes. Hover effects change country fill and stroke colors, with tooltips provided through SVG title elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map Interaction Assignment Final

This interactive world map visualizes countries colored in light green against a blue sphere, with hover effects that turn countries yellow and reveal a tooltip containing the country name, continent, and economic status. Built with D3 v5 and the topojson library, it uses `d3.geoPath` with an equirectangular projection to render geographic features from the World Atlas 50m dataset, while supporting zoom and pan interactions through `d3.zoom`. Country metadata, including economy and continent classifications, is loaded from the accompanying TSV file and linked to the geometric data by ISO country codes.

MMukund Khandelwal
94% match
Loading thumbnail…

Map Interaction Assignment

This interactive map displays world countries colored by economic status, with tooltips revealing the country name, continent, and broader economic position on hover. Users can click a country to select it, and a zoom interaction allows panning and scaling the projection. Built with D3.js, the visualization uses `d3.geoPath` and `d3.geoEquirectangular` to render geographic features from TopoJSON data, while loading country metadata from a TSV file. The map supports hover highlighting and a separate CSS class for selected countries.

MMukund Khandelwal
93% match
Loading thumbnail…

Map Interaction Assignment

This example displays a world map with countries colored light green, where hovering highlights a country in yellow and reveals a tooltip with its name, continent, and economic status. Users can pan and zoom the map through mouse interactions. The visualization uses D3 v5’s `geoEquirectangularRaw` projection, `geoPath`, and `zoom` behavior, with TopoJSON and TSV data from the world-atlas package to render SVG paths and join country metadata.

MMukund Khandelwal
90% match
Loading thumbnail…

Map Interaction Assignment

This map displays the countries of the world, color-coded by continent, and shows each country's name, continent, and broader economic position in a tooltip on hover. It uses a natural Earth projection via `geoNaturalEarth1` and renders geographic paths with `geoPath`, while `topojson.feature` converts the TopoJSON source into renderable features. Users can pan and zoom the map, with the interaction handled by the `zoom` API, which applies a transform to the entire group of country paths. Hovering highlights a country by filling it yellow.

MMukund Khandelwal
89% match
Loading thumbnail…

Map Interaction Assignment

This example displays a world map using an equirectangular projection, with countries colored in a uniform gray-blue tone. The visualization shows country names, continents, and economic classifications as tooltips when hovering over each nation. Built with D3 v5 and TopoJSON, it loads geographic data from the world-atlas package and renders countries as SVG paths using d3.geoPath. A d3.zoom behavior enables panning and zooming of the map, while the sphere background is drawn as a distinct path element.

MMukund Khandelwal
89% match
Loading thumbnail…

Map Interaction Assignment

This map displays global country boundaries over a blue sphere, with hover interactions highlighting each nation in red. Panning and zooming are enabled via d3.zoom, which applies transforms to the geographic group. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON with topojson.feature, and renders paths using d3.geoPath with a d3.geoNaturalEarth1 projection. Hover tooltips appear through appended SVG title elements, which draw country names from the accompanying TSV data file.

MMukund Khandelwal
89% match
Loading thumbnail…

Map Interaction Assignment

This example displays an interactive world map using an equirectangular projection rendered as SVG paths. Clicking a country highlights it, while hovering turns countries yellow. The visualization loads geographic data from the World Atlas TopoJSON and TSV datasets, using `d3.geoPath` with `geoEquirectangular` projection and the TopoJSON `feature` API to extract country boundaries. Styles for the sphere background and country fills are defined in a separate CSS file.

MMukund Khandelwal
88% match
Loading thumbnail…

Map Testing Assignment

This interactive map displays world countries with hover-highlighting, static labels, and click-to-zoom functionality. Using D3 v5 and TopoJSON, it renders GeoJSON features as SVG paths via `d3.geoPath` with an equirectangular projection. Users can pan and zoom via `d3.zoom`, while clicking a country triggers a custom `boxZoom` function that transitions to the country’s bounding box. Country names are positioned with `path.centroid` and styled with background rectangles. Zoom limits are dynamically set on resize, and the map employs minimal styling with CSS hover effects.

MMukund Khandelwal
87% match