Assignment3

Assignment3

This visualization displays a world map using geographic data from the Natural Earth dataset, showing country boundaries as green shapes on a blue background. The code loads TopoJSON data from the world-atlas package and renders it as SVG paths using D3's geoPath and geoMercator projection. The topojson.feature function extracts state features for rendering, while CSS styles define the sphere and country fills.

Qqwazx111

87% match

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh

85% match

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.

85% match

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.

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp

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.

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716

Project: Map Interaction Assignment Final

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.