Scatter plot with menus

100%

Scatter plot with menus

✓ Published1🌍 Public

Last edited Oct 12, 2019

Created on Oct 2, 2019

This interactive scatter plot explores correlations between attributes in a WHO global urban air pollution dataset containing PM2.5 and PM10 measurements. Three dropdown menus let users select which columns appear on the x-axis, y-axis, and as the categorical color encoding. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for colors, and renders animated SVG circles that transition to new positions when menu selections change. A color legend displays the distinct categories, while axis labels update dynamically.

AI-generated description

This dataset is about the outdoor air condition in different cities around the world. It originally comes from WHO Global Urban Ambient Air Pollution Database (See Gits).The measurement of pollution includes PM2.5 and PM10.

According to the plot we can find the correlations between different attributes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores correlations among attributes in a WHO air pollution dataset, using dropdown menus to select x-axis, y-axis, and color-encoding variables for each city. The visualization updates with animated transitions as users change selections, employing D3 scales, axes, and transitions. Color legends and axis labels adapt dynamically, with rendering via SVG. The underlying data comes from the WHO Global Urban Ambient Air Pollution Database, measuring PM2.5 and PM10 levels across global cities.

MMoooYang

95% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores correlations among attributes in the WHO Global Urban Ambient Air Pollution Database. Users select x-axis, y-axis, and color dimensions from dropdown menus, with points colored by a categorical scale. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, updating smoothly via transition.attr. Points animate from the center to their positions over one second. SVG rendering with opacity 0.3 dots displays city-level PM2.5 and PM10 measurements and other air quality indicators.

Mmkt-ds

95% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays air quality measurements, with dropdown menus allowing users to select which pollutant attribute (pollutant, PM10, ozone, or PM2.5) drives the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear`, `extent`, and `max` from d3 to map data to SVG coordinates. Axes are rendered by custom React components, and circles include native SVG `<title>` tooltips. Data loads asynchronously from a CSV using d3's `csv` method.

CChase Hall

86% match

Loading thumbnail…

Scatter plot with Menus - by Year

This interactive scatter plot displays London’s monthly average air quality readings for PM2.5 and PM10 particulates, with each point colored by year. The visualization uses two dropdown menus implemented via the `dropdownMenu` function to let users switch the x- and y-axis variables among eight roadside and background pollutant metrics. Built with D3 v5, the chart renders SVG circles, uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for the year-based color scale, and supports a clickable color legend that highlights data points from a selected year.

KKCachel

83% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays relationships between pairs of attributes from the auto-mpg dataset, with dropdown menus letting users choose which columns to plot on the x and y axes. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.transition to animate circles from the center to their positions over two seconds. Data is loaded via d3.csv, and the custom dropdownMenu module handles the menu selection logic. The SVG rendering includes grid lines via tickSize and axis labels that update dynamically with each selection.

Pprincit

82% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the relationship between pairs of attributes from the auto-mpg dataset. Two dropdown menus let users select which columns to plot on the x- and y-axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes, while circles transition to their new positions with a delay using d3.transition. The SVG updates dynamically as menu selections change, with the dropdownMenu component handling the user interaction.

MMauradion

82% match

Loading thumbnail…

scatter plot w/ menu

This interactive scatter plot displays relationships between pairs of variables from the auto-mpg dataset, with dropdown menus allowing users to select which columns appear on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick marks, and SVG circles with a staggered transition.animation when selections change, delaying each circle's update by 10 milliseconds for a cascading effect. Custom dropdown menu components manage the column selection, and the data values are parsed to numeric types before rendering.

MMert Gürkan

81% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users select which variables from the auto-mpg dataset appear on the x- and y-axes. The visualization renders circles in SVG with d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, while the custom dropdownMenu component triggers re-renders via onOptionClicked. Points animate from the center outward using transition().duration(2000), and axis labels update dynamically. The menus are built with plain HTML select elements, and the data is loaded via d3.csv.

Bbencestubnya

81% match