interactive scatter plot

100%

interactive scatter plot

✓ Published1🌍 Public

Last edited Feb 3, 2020

Created on Jan 8, 2020

This interactive scatter plot lets users explore air quality data from CSV files for the years 2016 through 2019. Users can select which columns (e.g., Raw.Conc., pressure, air_temp) map to the X and Y axes, as well as the year, via dropdown menus built with a custom `dropdownMenu` module. The visualization uses Chart.js to render the scatter plot on a Canvas element, while D3.js handles the dropdown interface and CSV data loading via `fetch`.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Interactive fluctuation plot

This interactive fluctuation plot compares air quality measurements across different years and weather variables. Users select a year and two variables via dropdown menus, and Chart.js renders a line chart showing the relationship between the chosen x-axis and y-axis columns. The visualization imports PM2.5 concentration and meteorological data from yearly CSV files (2016–2019) using the Fetch API. The chart displays tooltips that identify the corresponding date and variable values, with both canvas and SVG elements present in the underlying D3.js and p5.js structure.

JJunyanL

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

79% match

Loading thumbnail…

Scatter plot with menus

This example presents a scatter plot of automobile data, where users actively select which numerical columns to display on the x- and y-axes via two interactive dropdown menus. The visualization updates dynamically, smoothly animating the repositioning of data points over a 1.5-second transition with a staggered delay, making comparisons between different attribute pairings intuitive. The implementation leverages D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart, and it uses custom `dropdownMenu` and `scatterPlot` modules to manage the SVG interface. Data is loaded from a remote CSV file using `d3.csv`.

PPeter S

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

77% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 example gallery uses two dropdown menus to let the viewer choose which data columns from the auto-mpg CSV dataset appear on the x- and y-axes. The visualization is rendered as an SVG, with circles animating into place over two seconds via D3's `.transition()` method. The code leverages the `d3.scaleLinear` and `d3.extent` functions to compute scales, and `d3.axisBottom` and `d3.axisLeft` to draw the axes with tick marks.

TToooooooT

76% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from a dataset of car characteristics by selecting columns from dropdown menus for the x- and y-axes. The visualization renders 398 data points as semi-transparent red circles, which animate from the center of the chart to their positions upon selection change. The example uses D3 v5’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to build the plot, with custom reusable functions `dropdownMenu` and `scatterPlot` managing menu interactions and chart updates. Data is loaded from a CSV file via `d3.csv`.

KKazushige Okuma

76% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33

76% match