Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jul 18, 2022

Created on Jul 15, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays material quantity on the x-axis against a selectable environmental indicator (PENRT, GWP, or AP) on the y-axis, with circle size encoding petal width and color encoding data point ID. The visualization uses React with SVG rendering, leveraging d3-scale for linear and ordinal scales, d3-scale-chromatic for the color scheme, and a custom Dropdown component to switch y-axis attributes. A button toggles between two hardcoded datasets with tooltips showing exact values.

MMatarTest

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

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

85% match

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

84% match

Loading thumbnail…

Scatter Plot With Menus

Three dropdown menus control the X and Y axes of a scatter plot, displaying Iris flower measurements from the classic dataset. Users select from attributes like sepal length or petal width, updating the plot dynamically. The React app uses `d3.scaleLinear`, `extent`, and `csv` for data loading and scaling. SVG circles render the points with tooltips, while axis components built with React generate ticks and labels.

NNick Pearson

83% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses the classic Iris Dataset, rendered as an SVG in React, to explore relationships between four numeric measurements. Menus built with React-Dropdown let users dynamically select which attributes map to the x and y axes, while d3.scaleLinear and d3.extent compute the scales for each new selection. Axis components and data marks are custom React components that use D3 for tick generation, and a `<title>` element provides a tooltip. The chart deliberately sets `height` shorter than the container to reserve space for the dropdown controls.

Ee-ines

83% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino

83% match