Skip to main content
100%

Climate World Map Cities - fixed tooltip

✓ Published0🌍 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 disselect and 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:

  • fixed tooltip is not disappearing if the mouse stays and zooming or dragging
  • fixed tooltip showing when not selected
  • fixed circles overlap with grid offset

TODO:

  • maybe combine same crop type in the same year in the same region
MIT Licensed

Similar vizzes