exercise

100%

✓ Published0🌍 Public

Last edited May 12, 2022

Created on May 12, 2022

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, depicting relationships between various car attributes. Users select which columns map to the X and Y axes via dropdown menus, with animated transitions updating circle positions as selections change. The visualization uses D3 v5, specifically the `scaleLinear` and `axisLeft`/`axisBottom` functions for coordinate mapping and axes. Data is loaded via the `csv` function, with circles rendered as SVG elements, each positioned according to the selected column values.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes through dropdown menus. The menus let viewers dynamically select which columns map to the x- and y-axes, updating the visualization with an animated transition. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the axes, while `transition().duration()` and `delay()` animate the circles to their new positions. The SVG rendering includes axis labels and grid lines, with data parsed as numeric values for accurate scaling.

Llizziechoi121

90% match

Loading thumbnail…

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

90% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car weight on the y-axis while allowing users to select different x-axis attributes via a dropdown menu. The visualization uses D3 v5 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` with `d3.extent` for scaling, and `d3.axisBottom` and `d3.axisLeft` for axes. A custom dropdown menu component updates the x-axis column through `d3.select` and event handlers, while the scatter plot's circles are appended dynamically with data-bound attributes.

JJun Yi | Dylan

90% match

Loading thumbnail…

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

90% match

Loading thumbnail…

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 map to the X and Y axes via dropdown menus built with a reusable `dropdownMenu` function. The visualization uses D3 v5 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG transitions that animate circles into position over two seconds. Axis labels update dynamically, and the dataset includes numeric columns like mpg, cylinders, displacement, horsepower, weight, acceleration, and year.

Nnreddystudent

90% match

Loading thumbnail…

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

89% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, viewers can select which numeric columns map to the X and Y axes, with the axis labels updating accordingly. The visualization is built with D3 v5, using `scaleLinear` for coordinate mapping, `axisBottom` and `axisLeft` for tick rendering, and `transition().duration(2000).delay()` for animated circle movement. The SVG scene includes gridlines with custom styling, and all data values are explicitly converted to numbers before plotting.

Ggcappadaniel

89% match

Loading thumbnail…

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

89% match