Scatter Plot with Menus

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to select which columns map to the X and Y axes through dropdown menus. D3 v3 renders the visualization as SVG, with scales, axes, and circles positioned using d3.scale.linear and d3.svg.axis. The dropdownMenu module handles the menu interactions, while the scatterPlot function uses d3 transition methods to animate circle positions over 2 seconds when a selection changes.

Hhistidiine

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus allowing users to choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to render the plot, while a custom dropdownMenu module handles the select elements. Circles appear with a 2-second animated transition via transition().duration() and delay, and the SVG updates dynamically as users select different variables. The code also demonstrates reusable chart functions and modular ES6 imports.

SShashwat Priyadarshi

Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to explore relationships between numeric columns. Two dropdown menus let viewers dynamically select which columns map to the x and y axes. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while circles animate their positions over two seconds with a staggered delay when data changes. SVG rendering displays red, semi-transparent points, and the code demonstrates reusable modules for the scatter plot and dropdown menu logic.

Llubin-liu

Scatter Plot with Menus

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and a custom reusable scatter plot component. Data loading uses d3.csv, while transitions with duration and delay animate circles as the axes change. The menu implementation relies on a reusable dropdownMenu function that manages select elements and option updates. SVG rendering displays red semi-transparent circles with axis labels and tick marks.

SSuman Choudhary

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to plot on the X and Y axes via dropdown menus, which re-render the visualization’s axes and circles accordingly. Built with D3 v5, the code uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` module. Points animate into position over two seconds with staggered delays, and the SVG rendering includes axis labels, tick marks, and semi-transparent red circles.

Ssirmelpalot

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr

Scatter Plot with Menus

BBrandon Lehr

Scatter Plot with Menus

This interactive scatter plot lets users explore car data from the UCI Machine Learning Repository's Auto MPG dataset. Two dropdown menus allow selection of which data columns map to the X and Y axes. Built with D3 v5, the visualization uses dropdownMenu to handle menu interactions and scatterPlot with scaleLinear, axisBottom, axisLeft, and transition delays to animate circles into position. The SVG rendering includes gridlines and axis labels.

Ssourcebox-bug