Cars Scatter plot with drop down

100%

Cars Scatter plot with drop down

✓ Published0🌍 Public

Last edited Oct 7, 2020

Created on Oct 6, 2020

Forked from Polished Scatter Plot with Menus

This scatter plot visualizes fuel consumption data from a Kaggle dataset, showing relationships between continuous variables such as fuel consumption, CO2 emissions, and engine cylinders. The visualization uses drop-down menus to let users select which attributes appear on the x and y axes, updating the scatter plot dynamically. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` from D3 to process the data, while custom SVG components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and circles. The plot uses a `ReactDropdown` component for interactive axis selection, with tooltips displaying formatted tick values on hover.

AI-generated description

A scatter plot of the fuel consumption I have added drop down menu for the x axis and y axis where the x axis and y axis represent continuous variables. The original data comes from here.

My next step in this would be to implement ordinal and categorical variables as well that will accomodate other types of plots.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter plot with menus

This interactive scatter plot displays fuel economy data from the auto-mpg dataset, with dropdown menus that let users select which numeric columns to plot on the X and Y axes. The code uses D3.js v5 scales, axes, and transitions, along with a reusable dropdown menu component. Each car is represented by a semi-transparent green circle that animates to its new position when the menu selection changes, using `transition().duration(2000).delay()` for staggered motion. The visualization updates axes labels and tick marks dynamically based on the selected columns.

JJoel Schwartz

86% match

Loading thumbnail…

Cars Scatter Plot with menus with D3.js!

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing viewers to explore relationships between car attributes like weight, horsepower, and acceleration. Two dropdown menus let users select which columns to plot on the x and y axes. Built with React and D3.js version 5, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and animated transitions for circles that move to their new positions when the selected variables change.

Fforcox43

85% match

Loading thumbnail…

Cars Scatter with Menu

This interactive scatter plot visualizes relationships between numeric attributes of cars from the auto-mpg dataset, with dropdown menus allowing users to select which columns appear on the X and Y axes. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for grid lines, and animated circle transitions via `transition().duration(1000)`. The menus are built with a custom `dropdownMenu` module, and the scatter plot updates dynamically when the user changes the selected attributes.

MMunTatt Yap

84% match

Loading thumbnail…

Cars Scatter Plot With Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes via dropdown menus. Built with D3 v5, it renders animated SVG circles that transition smoothly when the X or Y axis column is changed. The visualization uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with `dropdownMenu` handling user selection. A color legend with clickable swatches filters data points. Data loads from a CSV via `csv()` and is processed in `loadAndProcessData`.

Jjons288

84% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays fuel economy data from a car dataset, allowing users to explore relationships between variables like horsepower, weight, and acceleration. The visualization features two dropdown menus that dynamically change which column is plotted on the x and y axes. The chart is rendered as an SVG using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with red semi-transparent circles for data points. A custom `dropdownMenu` module handles the menu interactions, triggering re-renders when selections change.

Ssanjaymirdha

84% match

Loading thumbnail…

Scatterplot with menus

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.

MMatan

84% match

Loading thumbnail…

Cars Scatter Plot with menus

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to select which columns appear on the x- and y-axes via dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, where circles expand from the center to their positions over two seconds. The code imports reusable modules for the dropdown menu and scatter plot, utilizing D3 scales (scaleLinear, scalePoint), axes (axisLeft, axisBottom), and the extent function to determine data domains.

SSophia Murage

83% match

Loading thumbnail…

cars Scatter Plot with menu

This interactive scatter plot visualizes automotive data from the 1970s and 1980s, showing the relationship between various car attributes and vehicle weight (in pounds). A dropdown menu allows users to select which attribute appears on the x-axis, including fuel economy (mpg), displacement, horsepower, and acceleration. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` with tick marks. The scatter plot is implemented as a reusable custom component (`scatterPlot`) that accepts configuration props, while a separate `dropdownMenu` module handles the user interface interaction.

YYanxxx447

83% match