Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 5, 2024

Created on Sep 5, 2024

This scatter plot displays car data from the UCI Auto MPG dataset, letting users choose which columns map to the X and Y axes via two dropdown menus. Built with D3 v5, it renders SVG circles with animated transitions, scaling each axis using d3.scaleLinear and d3.extent. The dropdown menu component uses D3 selections to bind options and handle change events, while axis labels update dynamically as the user selects different attributes.

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…

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Wwzhang88

97% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to map to the x- and y-axes. The visualization uses d3.scaleLinear and d3.axisBottom/axisLeft to render axes, while circles animate into position via d3 transitions. The code implements a custom dropdownMenu component and a scatterPlot function that updates axes and data points when menu selections change, rendering as SVG.

NNYCUBK201

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car 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, d3.axisBottom, and d3.axisLeft to render the axes, while d3.transition animates circles moving to their new positions over two seconds. Data is loaded via d3.csv, and the interactive menus are built with native HTML select elements. The SVG rendering includes gridlines and axis labels that update dynamically.

RRikibens

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let users dynamically select which data columns map to the X and Y axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scaled axes, while circle positions transition over 2 seconds with staggered delays. The custom `dropdownMenu` utility manages the HTML select elements, and axis labels update to reflect the selected columns.

Jjt23346059@gmail.com

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Using dropdown menus, the user can select any two data columns to map to the X and Y axes, with the visualization updating through animated transitions. The code utilizes d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and a custom dropdownMenu module. Each data point is rendered as a semi-transparent red circle using SVG, with axis labels and gridlines visible.

IIsigned

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes by selecting any two columns for the X and Y axes through drop-down menus. The scatter plot is built with D3 v5, using scaleLinear for axes and axisBottom/axisLeft for ticks. Circles are animated into place with a transition.delay effect. The dropdownMenu module creates the HTML select elements, and the chart updates its axes and labels when new mappings are selected.

AAbdouEnsaj

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset, with dropdown menus above the chart allowing the user to select which columns map to the X and Y axes. The visualization uses D3 v5's `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.extent` to load the data and compute scales. SVG circles are animated with a staggered transition, moving from the chart's center to their positions over two seconds as the axes and labels update accordingly.

Ttiffycshsf

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the x and y axes using two dropdown menus, rendered with a custom `dropdownMenu` function built on D3 v5. The visualization uses D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG circles, with a `scatterPlot` function handling the rendering and axis labels.

Ccoheist

95% match