Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
CCBoton
Last edited Apr 11, 2020
Created on Apr 11, 2020

This scatter plot visualizes a dataset of California census data, allowing users to choose which columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, with circles animated into place using `transition()` and `delay()`. The SVG rendering includes axis labels and grid ticks, with data loaded from a CSV file using `d3.csv`.

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

This interactive scatter plot visualizes demographic and economic data for California counties, with dropdown menus allowing the user to select which columns map to the X and Y axes. The visualization uses D3 v5’s `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to render the plot, and employs `transition().duration(2000).delay()` to animate circles as the selection changes. The X axis supports numeric fields like Income and Poverty, while the Y axis displays categorical county names. Data comes from the UCI Machine Learning Repository’s Auto MPG dataset.

CCBoton
90% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays crime statistics from a San Jose dataset, with dropdown menus letting users choose which numeric columns appear on the x- and y-axes. The visualization re-renders the chart with a smooth animated transition when a selection changes. Built with D3 v5, it uses the `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to map data, while custom dropdown menus and SVG circle transitions update positions dynamically.

Eest85
86% 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
86% match
Loading thumbnail…

Scatter Plot with Menus

A scatter plot displays data from the UCI Auto MPG Data Set, with dropdown menus letting users select which columns to map to the X and Y axes. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisLeft`, `axisBottom`, and a `transition` with duration and delay to animate circles into position. Data is loaded from a CSV file via `csv()`, and the dropdown menus are built with a custom `dropdownMenu` module that creates `<select>` and `<option>` elements.

Iibcs47
85% match
Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let the viewer choose which quantitative column from the dataset maps to the x- and y-axes of a scatter plot. Initially, the chart displays weight against mpg, but selecting a different column updates the corresponding axis and re-renders the circles with a staggered 2-second transition using D3 v5’s `transition().duration()` and `delay()`. The code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` in an SVG-based visualization.

AAziz Jaffrey
85% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from a CSV file, with two dropdown menus letting users choose which columns to plot on the x- and y-axes. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisBottom and d3.axisLeft for the axes. Changes trigger a transition with d3.transition, animating the circles’ positions over 1.2 seconds. Menus are built with a custom reusable dropdownMenu function, and the plot renders as SVG with 10-pixel-radius red semi-transparent circles.

HHasideluxe
85% 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
85% match
Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let viewers select which columns of a dataset appear on the x- and y-axes of a scatter plot. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to map numeric values, while a custom `dropdownMenu` module builds the `<select>` elements. Circles animate into position with `transition().duration(2000)` and a staggered delay, and the data comes from a CSV file containing movie attributes like budget, gross, and IMDb score.

LLiuXiangYuan
85% match