Scatter Plot with Menus

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select any two columns to map to the X and Y axes via dropdown menus, with the selected options driving d3.csv-loaded data through d3.scaleLinear, d3.axisBottom, and d3.axisLeft. The visualization renders as SVG circles that animate from the plot’s center to their positions using d3.transition with staggered delays. The reusable custom functions dropdownMenu and scatterPlot encapsulate the menu and chart logic, updating axes and labels dynamically.

Mmeihaoming

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users can dynamically select which columns map to the X and Y axes through dropdown menus created with d3. The visualization uses d3.scaleLinear, d3.extent, axisLeft, and axisBottom to render the axes, while circles animate into position using transition().delay() and transition().duration() as data is re-plotted with different variables.

KKevinw97

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while `transition().duration()` animates circle positions when the data mapping changes. The SVG rendering includes axis labels and semi-transparent red circles.

JJunyanL

Scatter Plot with Menus

This scatter plot explores the relationship between different attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus, built with custom D3 code that creates and updates `<select>` elements. The visualization itself uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a staggered `transition().delay()` animation that moves points from the center to their final positions over two seconds.

LLittledevil7

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which data columns map to the X and Y axes via two dropdown menus, triggering animated transitions of the circles to their new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and custom dropdown menu and scatter plot components. SVG rendering with d3 transitions animates the updates over two seconds.

NncjB

Scatter Plot with Menus

This scatter plot displays relationships between numerical attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns appear on the x- and y-axes, with each selection triggering a smooth 2-second transition animation that moves the red semi-transparent circles to their new positions. The visualization uses D3 v5 with SVG rendering, including `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration().delay()` to update axes and points dynamically.

KKarkG

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users select which columns map to the X and Y axes via dropdown menus, triggering animated transitions as circles reposition over two seconds. The visualization uses D3 v5 with scaleLinear for axes, axisBottom and axisLeft for ticks, and custom dropdownMenu and scatterPlot modules. Data loads from a CSV file, with SVG rendering featuring semi-transparent red circles and gridlines.

DD2552

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to explore relationships between numerical attributes. Two dropdown menus let the viewer select which columns from the dataset map to the X and Y axes, with selections triggering a re-render. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and animated circle transitions via `transition().duration()`. The plot updates smoothly, displaying data points as semi-transparent red circles over a clean SVG canvas.

Aandys648