Skip to main content
SimilarExport ZIP
100%

Scatter plot with menus

✓ Published0🌍 Public
MMatthiasVanCampen
Last edited Feb 14, 2020
Created on Feb 13, 2020
Forked from Cars Scatter plot

A scatter plot with dropdown menus allows users to explore relationships between different columns of an automotive dataset. The plot visualizes the auto-mpg dataset loaded from a CSV file, with selectable X and Y axes. D3's `scaleLinear` and `extent` functions compute the axis scales, while `dropdownMenu` components built with D3's selection API manage axis column choices. The scatter plot uses SVG circles animated with a 2-second staggered transition, and axes are rendered using `axisBottom` and `axisLeft` with tick lines and labels.

AI-generated description

export const dropdownMenu = (selection, props) =>{ const { options } = props; }

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus

This example presents an interactive scatter plot of automotive data from the auto-mpg dataset, where users select which columns to display on the x- and y-axes via dropdown menus. Two menus are rendered using the custom `dropdownMenu` module, and the scatter plot is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. Each data point is an SVG circle that animates into place with a 2-second transition, using `transition.attrTween`-like behavior through `transition().duration()`, with opacity set via CSS.

NNaveenaS12
93% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot lets users explore the relationship between pairs of numeric variables from the auto-mpg dataset. Dropdown menus, built with a reusable `dropdownMenu` component, dynamically switch which columns are mapped to the x- and y-axes. The visualization, rendered as an SVG, uses D3 v5 APIs such as `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to compute scales and axes. When a new column is selected, the circles animate to their new positions over two seconds using a staged `.transition().duration(2000).delay(...)` chain.

Ggilbster
93% 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
93% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot explores relationships between numeric attributes of cars from the auto-mpg dataset. Two dropdown menus let users select which columns to plot on the x and y axes using d3.csv, scaleLinear, extent, axisLeft, and axisBottom. The reusable scatterPlot and dropdownMenu functions render an SVG with red semi-transparent circles, axis labels, and gridlines, updating the visualization dynamically via D3’s selection and merge patterns.

JJuyeonee
93% match
Loading thumbnail…

Scatterplot with menus

This interactive scatterplot lets users explore the relationships between different numeric attributes of cars from the auto-mpg dataset. Two dropdown menus, built with a reusable `dropdownMenu` function, allow selection of the variables plotted on the x and y axes. The chart itself is rendered by a custom `scatterplot` module using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for the axes. Data updates trigger a smooth `transition` animation as circles move to their new positions over 500 milliseconds.

RRiccardo Pressiani
93% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between pairs of variables from the auto-mpg dataset. Users select which columns to compare on the x and y axes via HTML dropdown menus, which trigger the plot's update. The visualization uses d3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes, with a 2-second animated transition on each circle via D3's transition system. Dropdown menus are built using D3 selection and DOM manipulation, re-rendering the SVG on each change.

SSagar Malviya
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two columns of the automotive dataset by selecting axes from dropdown menus. Built with D3 v5, it renders SVG circles that animate from the center to their positions using `transition()`. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded from a CSV file. The dropdown menus are generated using a reusable `dropdownMenu` component that binds options to a native `<select>` element.

Aannadehtiarova
92% match
Loading thumbnail…

scatter plot with menus

This interactive scatter plot lets users explore the relationship between any two numeric columns of the auto-mpg dataset, which is loaded via `d3.csv`. Two dropdown menus, built with the custom `dropdownmenu` function and D3’s `select` data join, control which columns appear on the x- and y-axes. The chart itself is rendered as SVG using D3 scales and axes, with circles that transition smoothly to new positions over 2 seconds when a menu selection changes. Axis labels update dynamically, and the visualization uses the margin convention with gridlines from `d3.axisBottom` and `d3.axisLeft`.

Ssingularity6033
92% match