Climate World Map Cities

100%

Climate World Map Cities

✓ Published1🌍 Public

Last edited Nov 6, 2024

Created on Oct 24, 2024

Forked from Pan and Zoom World Map Cities

This interactive globe visualizes how climate change affects agricultural crop yields across global cities from 1990 to 2024. A dropdown menu filters the data by year, while drag-and-zoom controls enable panning and scaling of the orthographic projection. Circle radii encode crop yield values, with spiral offsets separating overlapping cities. Built with D3.js, it uses `d3.geoOrthographic`, `geoPath`, and `geoGraticule` to render the map, and `d3.drag` and `d3.zoom` for interaction. The data comes from a modified Kaggle dataset of climate change impacts on agriculture.

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.

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.

TODO: tooltip is not disappearing if the mouse stays and zooming

MIT Licensed

Similar vizzes

Loading thumbnail…

Climate World Map Cities - fixing tooltip

An interactive 3D globe visualizes agricultural crop yields across cities worldwide, with each city represented by colored, size-scaled circles that spiral outward from their geographic coordinates. A dropdown menu filters the data by year, while tooltips display detailed information about the selected city, region, crop type, and yield. The visualization uses d3-geoOrthographic and d3-geoPath to render the globe and projection, with d3-zoom and d3-drag enabling panning and zooming. Data comes from the modified Climate Change and Agriculture dataset.

YYiyi Wu

91% match

Loading thumbnail…

Climate World Map Cities - fixed tooltip

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.

YYiyi Wu

91% match

Loading thumbnail…

Climate World Map Cities - Color Legend

This interactive globe visualizes agricultural crop yields across key cities worldwide, with color-coded circles representing crop types and size indicating yield per hectare. Users can pan and zoom the orthographic projection using d3.drag and d3.zoom, while a dropdown filters data by year. An interactive color legend toggles visibility of specific crops, and hovering reveals detailed tooltips with year, region, and yield data. The visualization uses d3.geoPath with GeoJSON country outlines from the world-atlas TopoJSON source, with data derived from the Climate Change Impact on Agriculture dataset, including ChatGPT-determined agricultural cities.

YYiyi Wu

91% match

Loading thumbnail…

Scatter Plot for Climate Data - v2

This interactive scatter plot visualizes climate change impacts on agriculture, showing pesticide use against fertilizer use for a selected year. Circle size encodes soil health index, while color depth represents crop yield, with hover tooltips revealing exact values. The visualization uses D3.js scales, including `scaleLinear`, `scaleSqrt`, and `scaleSequential`, alongside an SVG-based rendering with a dropdown for year selection. Data comes from a preloaded Climate Dataset, and each circle maps to a data point filtered by the selected year.

YYiyi Wu

72% match

Loading thumbnail…

Climate Change

This visualization presents an interactive climate change dashboard blending a world map with a scatterplot of global average temperatures since 2000. The map uses data from a GeoJSON file, while temperature records come from an Our World in Data dataset. The plot encodes each year as a circle, with its horizontal position scaled by year and vertical position by temperature, colored by value. An input panel offers a mock linear prediction of future temperatures. The implementation relies on D3 v7 projections like `d3.geoNaturalEarth1` and `d3.geoPath`, alongside `d3.select`, `d3.json`, and `d3.csv`.

SSai Sandhya Nannapaneni

70% match

Loading thumbnail…

Scatter Plot for Climate Data - v1

This scatter plot visualizes climate impacts on agriculture for a selected year, showing pesticide usage on the x-axis and fertilizer usage on the y-axis. Circle radius encodes soil health index, while color depth represents crop yield, with a dropdown menu filtering data by year. The visualization uses D3 scales like `scaleLinear`, `scaleSqrt`, and `scaleSequential` with an `interpolateBlues` color scheme, plus interactive tooltips. Data comes from the Climate Change Impact on Agriculture dataset, rendered using D3’s `select`, `join`, and axis label utilities.

YYiyi Wu

70% match

Loading thumbnail…

Scatter Plot for Climate Data - v3

This interactive scatter plot visualizes the impact of climate on agriculture, plotting pesticide usage against fertilizer usage. Circle size encodes soil health, while color depth represents crop yield, using `d3.scaleSqrt` and `d3.scaleSequential` with `interpolateBlues`. Hovering reveals detailed metrics via a tooltip. Dropdown menus, built with `d3.select`, filter the displayed data by year and region, allowing exploration of the Climate Change Impact on Agriculture dataset.

YYiyi Wu

69% match

Loading thumbnail…

World Map with Cities

A world map displays the Earth's landmasses in green with a blue ocean, overlaid with circles representing cities from a CSV file, sized by population using a square-root scale. The visualization uses React and D3's `geoNaturalEarth1` and `geoPath` APIs to render the map, graticule, and city markers as SVG circles. City data is loaded via `d3.csv` from a remote URL.

AAmir

67% match