Skip to main content
SimilarExport ZIP
100%

scatterplot with menues

✓ Published1🌍 Public
SSchmittYannic
Last edited Aug 17, 2020
Created on Aug 17, 2020
Forked from scatterplot

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
95% 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
93% match
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…

Scatterplot with Menus

This interactive scatterplot lets users explore relationships between variables in the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The menus trigger re-renders that update the axes, labels, and animated circle positions. The visualization uses D3 v5 with the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and the dropdown menu component is a custom reusable module. SVG circles transition smoothly over 2 seconds when data changes.

Ffbudwill
93% match
Loading thumbnail…

Scatterplot with Menus

An interactive scatterplot displaying the auto-mpg dataset, with dropdown menus that let the user select which data columns to plot on the x and y axes. The visualization updates smoothly with a staggered transition, animating each circle from the center to its new position. The code uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions, along with a custom `dropdownMenu` component that binds options to menu elements. SVG rendering handles the plot, with axis labels and gridlines styled via CSS.

Ccornshoots
92% match
Loading thumbnail…

scatterplot with menues

This interactive scatterplot allows users to explore the relationships between different attributes of cars, such as fuel efficiency, horsepower, and weight. Dynamic dropdown menus in the interface let users select which columns from the dataset to plot on the x and y axes. The visualization also includes a slider to adjust the transparency of the points and a number input to change the point size. Built with React and D3, the scatterplot uses D3's `scaleLinear` for axes and `transition().duration(1000).delay()` for smooth animated transitions of the data points.

SSchmittYannic
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses D3 v5 to visualize the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus allow users to select which numeric columns map to the X and Y axes, with the plot updating through D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. SVG circles represent individual cars, animating to their new positions over two seconds via `transition().duration(2000)` and staggered delays. The code demonstrates reusable functions for the dropdown menu and the scatter plot, with axis labels dynamically reflecting the selected columns.

MMyCode
92% match
Loading thumbnail…

Scatter Plot with menues

This interactive scatter plot displays the relationship between pairs of numeric variables from the auto-mpg dataset, with dropdown menus allowing users to select which columns are plotted on the x- and y-axes. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while the `dropdownMenu` function (built with D3’s `select` and `option` elements) handles menu interactions. Points appear with a staggered, animated transition (via `.transition().duration(1000).delay()`) as the axes update. The SVG rendering applies custom styling from the linked stylesheet, including semi-transparent red circles and large axis labels.

NNikki-gea
92% match