Skip to main content
SimilarExport ZIP
100%

Climate World Map Cities - Color Legend

✓ Published1🌍 Public
YYiyi Wu
Last edited Nov 7, 2024
Created on Nov 6, 2024

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.

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

Similar vizzes

Loading thumbnail…

Climate 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.

YYiyi Wu
91% match
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
90% 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
90% match
Loading thumbnail…

maps

This choropleth map visualizes agricultural land percentage by country for 2020, using a color-coded world atlas to compare values across nations. The visualization loads GeoJSON country boundaries via `d3.json` and `topojson.feature`, then applies a sequential color scale mapped to the `AgriculturalLandPercent` metric from a CSV dataset. Hovering highlights individual countries and displays a tooltip with detailed agricultural statistics. A legend on the right provides the color-to-value scale, while `d3.format` handles numeric display formatting.

Kkoppulasudhakar03@gmail.com
73% 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…

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
71% 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
71% match
Loading thumbnail…

visualizing map

This interactive network visualizes agricultural metrics across ten countries for 2020, showing relationships between a central hub and country nodes with satellite metric nodes for land percentage, crop yield, fertilizer use, and GDP contribution. Node size encodes agricultural land percentage while link width reflects agriculture GDP share. The visualization uses d3.forceSimulation with draggable SVG nodes, and data is embedded directly from a CSV file containing country-level farming statistics.

Kkoppulasudhakar03@gmail.com
69% match