Skip to main content
SimilarExport ZIP
100%

Scatter Plot for Climate Data - v2

✓ Published0🌍 Public
YYiyi Wu
Last edited Dec 4, 2024
Created on Dec 4, 2024

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.

AI-generated description

An Updated scatter plot using Climate Dataset.

The x and y scale are as labeled, the sizes of the circles are the crop yield. The color of the circles is the the soil health index, deeper the color, healther the soil. The dropdown is for year selection

TODO:

  • add another filter to select the region, which might make this viz more meaningful
MIT Licensed

Similar vizzes

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

D3 - Qualitative color scale Scatterplot

This example visualizes global agricultural productivity with a qualitative color scale, plotting wheat production against a pest control metric. Each circle represents a data point, with colors encoding the year (2015–2021) using an ordinal scale from d3.scaleOrdinal. The scatterplot uses d3.csv to load data and d3.axisBottom/axisLeft for axes, while a legend from d3.legendColor clarifies the year mapping. The SVG rendering applies linear scales for positioning and radius, though circle size remains fixed at 8 pixels despite the size scale being defined.

CChandana Srinivas
73% match
Loading thumbnail…

pseudo viz for climate & crop yield over time

This pseudo visualization displays trends in crop yield, temperature, and precipitation over time using three overlaid line series colored green, red, and blue. It uses D3’s `scaleLinear` for both axes, the `line` generator for each series, and `select` to manage the SVG container. Data comes from a static array of six annual records, with axis labels and a legend added via custom helper functions from the `@wyy-47/axislabels` package. The chart demonstrates how multiple quantitative variables can be compared on a shared time scale.

YYiyi Wu
73% match
Loading thumbnail…

Scatter Plot for Climate Data

This scatter plot visualizes the relationship between year and average temperature for China using the Climate Dataset, with each circle representing a data point. A dropdown menu lets users select a specific year, although the current rendering only displays China’s full time series. The visualization uses D3’s `scaleLinear` and `axisLeft` to construct axes, while custom label helpers from `@wyy-47/axislabels` add axis titles. The `viz` function draws a gray inner rectangle and semi-transparent circles with `selectAll` and `join`, updating the SVG directly.

YYiyi Wu
73% 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
72% 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
72% 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
72% match