Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Apr 30, 2019

Created on Apr 30, 2019

This interactive scatter plot uses dropdown menus to let viewers select which data columns to display on the x- and y-axes. The visualization reads from a CSV file containing movie attributes like budget, gross, and IMDb score. The scatterPlot function creates linear scales, axes, and animated circles using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. A dropdownMenu module builds the select elements with d3 data joins. The circles transition over 2 seconds with staggered delays, showing how axis labels and data points update dynamically when menu options change.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot visualizes movie data from the UCI Machine Learning Repository, displaying budget, gross revenue, and IMDb scores. Two dropdown menus allow the user to select which columns map to the X and Y axes. Built with D3.js v5, the visualization uses SVG rendering with animated transitions as circles move between positions. The code implements custom dropdownMenu and scatterPlot modules, using d3.scaleLinear for axes and d3.extent for domain calculations.

Aaalejandroq

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

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users choose which columns of the auto-mpg dataset appear on the x- and y-axes. The code employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with a custom dropdownMenu component that updates the chart on selection changes. Circles transition with a staggered delay of 2 seconds each time the axes change, rendered as SVG elements with a red, semi-transparent fill.

Ssakhabutdinov

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

90% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users select which variables from the auto-mpg dataset appear on the x- and y-axes. The visualization renders circles in SVG with d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, while the custom dropdownMenu component triggers re-renders via onOptionClicked. Points animate from the center outward using transition().duration(2000), and axis labels update dynamically. The menus are built with plain HTML select elements, and the data is loaded via d3.csv.

Bbencestubnya

90% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between variables in an auto-mpg dataset by selecting which columns appear on each axis via dropdown menus. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration().delay()` to animate circles from the plot’s center to their new positions whenever a menu selection changes. The scatterPlot module builds SVG axes with tick lines and labeled text, while the dropdownMenu module generates the HTML select elements.

Aabcz1234

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