Map Interaction Assignment

Map Interaction Assignment

This interactive map visualizes global country boundaries using a natural Earth projection, rendered as SVG paths within a zoomable viewport. The map shows the sphere as a blue background and individual countries in green, which turn red on hover, with country names displayed as tooltips. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and the `topojson` library’s `feature` function to process world atlas data loaded from TSV and JSON files. A zoom interaction, implemented via D3’s `zoom` event, transforms the map group, allowing users to explore the geographic data.

94% match

Map Interaction Assignment

This example shows an interactive world map where each country is rendered as a filled path, and hovering over a country turns it red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from TopoJSON data in the world-atlas package. Zoom and pan interactions are implemented using `d3.zoom`, which applies a transform to the map group. Country names are matched from ISO codes in a TSV file and displayed as tooltips using SVG `<title>` elements.

93% match

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.

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.

Map Interaction Assignment

This visualization displays a world map using a natural Earth projection, with countries shaded in light green and oceans in blue. Clicking a country triggers an interaction where the selected country turns red, highlighting the user’s choice. The map is rendered as SVG, with geographic data from the world-atlas TopoJSON dataset and country names loaded from a TSV file. The code utilizes d3.geoPath, d3.geoNaturalEarth1, and d3.zoom, along with topojson.feature to process the data.

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.

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.

90% match