Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public
11joaorodrigues
Last edited May 26, 2021
Created on May 26, 2021

This interactive scatter plot visualizes the relationship between pairs of attributes in the auto-mpg dataset, allowing users to select which variables appear on the x- and y-axes via dropdown menus. Built with React and D3.js v5, the visualization renders points as SVG circles colored teal, with axis labels derived from the selected attributes. The data, loaded using d3.csv, includes numeric fields such as miles per gallon, horsepower, and weight, with axes scaled using d3.scaleLinear and tick formatting via d3.format. A title tooltip on each circle displays the formatted x-value.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot allows users to explore relationships between different car attributes from an auto-mpg dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes for comparison. Built with D3.v5 and React, the visualization uses SVG elements and a transition animation to smoothly reposition data points when the selection changes. The code leverages D3 APIs like `scaleLinear`, `axisBottom`, and `axisLeft` for the axes.

Jjeelong
93% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which numeric columns to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while a custom `dropdownMenu` component handles the select elements. Circles animate into position over two seconds with a staggered delay, and axis labels update to reflect the chosen variables.

Iianjwo
92% match
Loading thumbnail…

Fork of 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 columns map to the X and Y axes using D3.js dropdown menus, with circles animating to new positions via `transition().duration()` on axis changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, with the React framework managing the bubble chart component. Data loading is handled through `d3.csv`, and the animated transitions show each circle moving to its updated coordinates over two seconds.

Vvassil-one
92% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus -mpg

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes like miles per gallon, horsepower, and weight. Two dropdown menus let viewers select which attributes appear on the X and Y axes. A color legend on the right encodes car brand; hovering over a legend entry highlights only that brand's points and dims others. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` SVG components.

11joaorodrigues
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets viewers explore the relationship between different attributes of cars from the classic Auto MPG dataset by selecting which columns map to the X and Y axes via dropdown menus. The visualization uses D3.js (version 5) to render circles with animated transitions, scaling each axis with `d3.scaleLinear` and adding axes via `d3.axisBottom` and `d3.axisLeft`. The user can compare variables such as miles per gallon, horsepower, and weight.

HHaileabGH
91% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

PPenguin-jpg
91% match
Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays the relationship between any two columns of the auto-mpg dataset, with dropdown menus to select which variables appear on each axis. The visualization uses React to manage the menu state, D3 v5 for both the SVG rendering and the scatterplot layout, and includes animated transitions where circles grow and fade into their positions whenever a new variable is selected.

RRichard Wong
91% match
Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino
91% match