Scatterplot with Menus

Scatterplot with Menus

This interactive scatterplot lets users explore relationships between variables in the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The menus trigger re-renders that update the axes, labels, and animated circle positions. The visualization uses D3 v5 with the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and the dropdown menu component is a custom reusable module. SVG circles transition smoothly over 2 seconds when data changes.

Ffbudwill

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, with dropdown menus allowing viewers to select which numerical columns appear on the x- and y-axes. Built with D3 v5, it uses scales, axes, and SVG circles to render the data, while a custom `dropdownMenu` module and D3’s `transition` animate points to new positions over two seconds when the axis selections change. The scatter plot code reuses `axisBottom`, `axisLeft`, and `scaleLinear` for the chart structure.

Ffahmijaafar

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns of the auto-mpg dataset by selecting them from two dropdown menus. The visualization updates smoothly, with circles animating from the center to their new positions using D3’s `transition()`. The code uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes, and implements the menus with a custom `dropdownMenu` function. The data is loaded via D3’s `csv` from a remote URL, and each point is rendered as an SVG circle.

JJacob van Lingen

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

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

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

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to explore relationships between attributes of the auto-mpg dataset. Selecting different columns from the menus updates the x- and y-axes via `d3.scaleLinear` and re-renders the circles through a general update pattern. The code leverages D3 v5’s `csv` for loading data, `dropDownMenu` for UI controls, and transitions with `delay` to animate points emanating from the center. Axes are drawn using `axisBottom` and `axisLeft` with gridlines, and menu selections trigger a full chart re-render.

AAziz Jaffrey

Scatter Plot with Menus

This interactive scatter plot lets users choose which columns of the auto-mpg dataset to display on the x- and y-axes via HTML dropdown menus. The `dropdownMenu` module creates the select elements, while the `scatterPlot` module uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the axes. Circles transition with d3.transition over 2 seconds, animating from the center to their new positions using `transition.attr` and `transition.delay`. SVG rendering and D3 v5 selections manage updates.

MMinwoo Pak