Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public
Iianjwo
Last edited Sep 25, 2022
Created on Sep 25, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plots with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The chart renders as an SVG with axes and gridlines, and circles animate into position using D3 transitions with staggered delays. The implementation uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, with a custom dropDownMenu component managing the select elements.

MMajaha21
94% match
Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

SSchmittYannic
93% 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
93% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, with dropdown menus letting users choose which numeric columns map to the X and Y axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loader to render SVG circles with a staggered 2-second transition when axes change. The component-based code separates menu creation (`dropdownMenu`) from the chart drawing (`scatterPlot`), with axis labels updating alongside the data.

YYue Ma
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, with dropdown menus allowing viewers to select which numerical columns appear on the x- and y-axes. Built with D3 v5, it uses scales, axes, and SVG circles to render the data, while a custom `dropdownMenu` module and D3’s `transition` animate points to new positions over two seconds when the axis selections change. The scatter plot code reuses `axisBottom`, `axisLeft`, and `scaleLinear` for the chart structure.

Ffahmijaafar
93% 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
93% match
Loading thumbnail…

Fork of Fork of Scatter Plots with Menus

A scatter plot of the auto-mpg dataset uses dropdown menus to select which columns appear on the x and y axes, with animated transitions as points move to their new positions. The visualization is built with D3 v6, using the `dropDownMenu` component and the `scatterPlot` module to bind data to SVG circles, scales via `scaleLinear` and `extent`, axes with `axisBottom` and `axisLeft`, and menus driven by `select` and `option` elements.

MMajaha21
92% match
Loading thumbnail…

Fork of Scatter Plot with Menus

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.

11joaorodrigues
92% match