Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Climate World Map Cities - fixed tooltip

Public visualization

Viewing a saved revision (read-only)

7457c293603946bb867c70dfc1fb6b62

Climate World Map Cities - fixed tooltip

0 stars0🌍 Public
YYiyi Wu
Last edited Nov 20, 2024
Created on Nov 12, 2024

This interactive globe visualizes agricultural crop yields across key cities worldwide, using data from the Climate Change Impact on Agriculture dataset. Users can filter by crop type using the color legend and select a year via a dropdown menu. The visualization uses `d3.geoOrthographic` projection and `d3.geoPath` to render the globe, with city circles positioned by latitude and longitude. Tooltips display city details, and interactions include panning, zooming, and clicking legend items. The tooltip is implemented with custom `EventTarget` events to hide during map interactions.

AI-generated description

A globe with panning and zooming showing modified data from Climate change and Agriculture Dataset, and the Original Dataset can be found here.

One click with a certain crop types color-legend will show only the selected crop type, click on it again will show all scrop type.

The dataset was modified to have a key city with each distinct country-region pair that are known for their agriculture within the region.

The cities were determined by ChatGPT, and then the Latitude and Longitude were found based on the cities.

UPDATE:

  • Added interactive color legend
  • Modified such that the selection of crop type stays for better viewing

TODO:

  • tooltip is not disappearing if the mouse stays and zooming or dragging
  • maybe combine same crop type in the same year in the same region
MIT Licensed