Scatter plot with menus

100%

Scatter plot with menus

✓ Published0🌍 Public

Last edited Oct 7, 2020

Created on Oct 7, 2020

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.

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

96% match

Loading thumbnail…

Scatter plot with menus

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.

RReinaFeng

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

84% 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

81% match

Loading thumbnail…

Scatter plot with Menus -by Month

This interactive scatter plot visualizes London air quality data from January 2010 through August 2018, showing monthly measurements of various pollutants. Users can choose which two air quality variables to compare using dropdown menus, while data points are color-coded by month using D3's `scaleOrdinal` with the `interpolateViridis` palette. A clickable color legend filters the displayed data, and D3 transitions animate the scatter plot when the selected axes change. The visualization uses D3 v5 with SVG rendering, scaled axes, and custom axis labels to present the Kings College London Air Quality Dataset.

KKCachel

81% 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

80% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, with dropdown menus above the chart letting users select which columns to plot on the x and y axes. As selections change, the axes and data points update with a smooth 2-second animated transition, where circles grow from the center and slide to their new positions. The visualization uses D3 v5 with reusable functions for the dropdown menu and scatter plot, employing d3.scaleLinear, d3.extent, d3.axisBottom and d3.axisLeft for scales and axes, plus SVG rendering with a transition delay based on data index for the staggered animation effect.

RRoger Yu-Hsiang Lo

80% 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

80% match