Interactions

100%

✓ Published0🌍 Public

Last edited Feb 17, 2022

Created on Feb 17, 2022

This example shows an interactive scatter plot of automobile data from the auto-mpg.csv dataset. Two dropdown menus let viewers select which columns from the dataset to plot on the x- and y-axes, with the plot updating accordingly. D3 v5 is used to render the SVG visualization, with the `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs handling scaling and axes. Each point animates to its new position over 2 seconds when the selection changes, using a transition with a 10-millisecond per-point delay. The scatterPlot module is reused with different column mappings triggered by the dropdown menu callbacks.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Cars Scatter Plot with menus

This interactive scatter plot visualizes the relationship between two selected variables from the auto-mpg dataset, with dropdown menus for choosing the x and y axes. The d3.v5 code uses `scaleLinear` for axes, `extent` for domains, and `axisBottom`/`axisLeft` for rendering. Circles animate via `transition().duration()` when selections change, while the `dropdownMenu` module updates labels. Data is loaded as CSV and numeric fields are parsed before plotting.

NNkwachi Abel

89% match

Loading thumbnail…

Scatter Plot with Menus

This example shows an interactive scatter plot of the auto-mpg dataset, where dropdown menus let the user select which columns to display on the x- and y-axes. As the selection changes, the plot’s axes and data points animate to their new positions with a smooth transition. The visualization is built using the D3.js library (v5), leveraging its `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with circles rendered as SVG elements. The dropdown menus are created dynamically via a custom component that generates HTML `<select>` elements, and the plot updates instantly upon user input.

Iianleekq

89% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch

89% match

Loading thumbnail…

Scatter Plot with Menus

Aarths-glitch

89% match

Loading thumbnail…

Interactive Cars Scatter plot with menus

This interactive scatter plot lets users explore the relationships between different attributes of cars from the auto-mpg dataset. Two dropdown menus allow selection of the x and y variables, dynamically re-rendering the axes and data points. The visualization uses d3.v5 with SVG and animation, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Circles transition smoothly to new positions when the selected columns change, and a tooltip appears on hover to show each car's details.

Vvladvaculin

89% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the auto-mpg dataset, with dropdown menus allowing the user to select which columns appear on the x- and y-axes. The visualization updates smoothly with animated transitions, as circles grow from the center to their new positions when a menu selection changes. Built with D3 v5, the example uses reusable functions for the dropdown menus and scatter plot, leveraging d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render the SVG axes and data points.

YYedrup

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

89% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between vehicle attributes from the auto-mpg dataset, with dropdown menus allowing users to select which columns appear on each axis. The visualization uses D3 v5’s selection and data-join patterns, with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points animate from the chart center over two seconds using `transition().duration(2000)` with staggered delays. The `dropdownMenu` module implements a general update pattern for the select elements, updating the plot when users change either the x or y column.

Bbprokopowicz

88% match