Scatter Plots with Menus

100%

Scatter Plots with Menus

✓ Published1🌍 Public

Last edited May 11, 2021

Created on May 11, 2021

This interactive scatter plot displays automobile data from the auto-mpg dataset, plotting horsepower against a user-selected x-axis column via a dropdown menu. Built with D3 v6 and SVG, it uses scaleLinear, axisBottom, axisLeft, and d3.csv to render points. The dropDownMenu module triggers re-renders dynamically when the selection changes, updating the x-scale and axis accordingly. The visualization includes grid lines, axis labels, and a title, with styling applied through an external CSS file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization updates dynamically, showing relationships like horsepower versus weight with animated circle transitions. Built with D3 v5, the menus use the custom `dropDownMenu` component with select elements, while the scatter plot leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` for smooth updates. Data values are parsed as numbers before rendering with SVG circles.

Zzenoe

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

Ssteveaigbe

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

93% match

Loading thumbnail…

Scatter Plot with Menus

Aarths-glitch

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 v5 gallery displays car attributes from the UCI Auto MPG dataset, with dropdown menus controlling the x- and y-axis variables. Users select columns like horsepower or weight to update the axes, and points animate to their new positions over two seconds using chained transition and delay methods. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG circles with opacity, while custom dropdown menu functions bind change events to trigger re-renders.

YYF

93% match

Loading thumbnail…

Scatter plot with menus

This scatter plot displays the relationship between horsepower and selected attributes from the auto-mpg dataset. A dropdown menu lets users choose which column from the dataset to plot on the x-axis, while horsepower remains fixed on the y-axis. The visualization is built with d3.v5, using d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load data. The scatterPlot component renders SVG circles, with menus created by a separate dropdownMenu module.

Eevapavlinek

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus to select which columns to plot on the x and y axes. The visualization uses D3 v5's scaleLinear and extent functions to compute axes and transitions to animate circles smoothly to their new positions when the user changes the menu selection. SVG rendering with CSS-styled ticks, grid lines, and axis labels supports the clean presentation.

PPabloReyesBetanzo

93% match

Loading thumbnail…

D3 Cars Scatterplot with Menus

This interactive D3.js scatterplot displays automobile performance data from the auto-mpg dataset, plotting 392 vehicles across user-selected numeric attributes. Two dropdown menus let viewers independently choose which columns to map to the x- and y-axes, with options including mpg, horsepower, weight, and acceleration. Built with D3 v5, the visualization uses SVG for rendering and d3.axisBottom and d3.axisLeft for labeled axes. On menu changes, the scatterPlot function transitions each circle to its new position using a staggered d3 transition with duration and delay, creating an animated effect.

Rrdeichert

93% match