Skip to main content
SimilarExport ZIP
100%

Scatterplot with menus

✓ Published0🌍 Public
MMatan
Last edited Nov 15, 2020
Created on Nov 14, 2020
Forked from Scatterplot

This interactive scatterplot displays automobile data from the auto-mpg dataset, plotting miles per gallon against a variable selected via a dropdown menu. Users can switch the x-axis attribute among columns like horsepower, weight, and acceleration. The visualization is built with React, D3 v6, and SVG rendering, using d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv for data loading. The dropdown menu is implemented as a reusable component with D3 selections, updating the chart dynamically on user interaction.

AI-generated description

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

See also React Starter.

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…

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

Menu-based automobile data summary

This interactive visualization displays a scatter plot of the classic auto-mpg dataset, with dropdown menus for selecting which numeric columns appear on the x- and y-axes. The chart uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.extent to compute domains. Selecting a new menu option triggers a re-render, where circles transition smoothly to new positions via the d3 transition method. Built with React and d3.v5, the visualization renders as SVG and includes formatted tick labels using d3.format.

BB Sundaresan
92% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization updates dynamically, showing relationships like horsepower versus weight with animated circle transitions. Built with D3 v5, the menus use the custom `dropDownMenu` component with select elements, while the scatter plot leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` for smooth updates. Data values are parsed as numbers before rendering with SVG circles.

Zzenoe
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
Loading thumbnail…

Scatter Plots with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, plotting horsepower against a user-selected x-axis column via a dropdown menu. Built with D3 v6 and SVG, it uses scaleLinear, axisBottom, axisLeft, and d3.csv to render points. The dropDownMenu module triggers re-renders dynamically when the selection changes, updating the x-scale and axis accordingly. The visualization includes grid lines, axis labels, and a title, with styling applied through an external CSS file.

MMajaha21
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
91% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
91% match