Skip to main content
SimilarExport ZIP
100%

MTCARS Scatter Plot with Menus

✓ Published1🌍 Public
BBizmundo
Last edited Oct 7, 2019
Created on Oct 5, 2019

This interactive scatter plot visualizes the mtcars dataset, letting users select which attribute (mpg, cyl, disp, hp) to plot on each axis. The chart displays circles for each car, with tooltips showing the x-axis value. Using React with D3 v5, the code implements a `Dropdown` component to update state and re-render the SVG. The `scaleLinear` function scales the data, while `AxisBottom`, `AxisLeft`, and `Marks` modules handle the visualization's rendering.

AI-generated description

An interactive scatter plot of mtcars Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

MTCARS Scatter Plot with Menus

An interactive scatter plot of the classic mtcars dataset lets viewers compare any two of four car attributes—mpg, cyl, disp, and hp—by selecting each axis from a dropdown menu. Built with React and D3 v5, it renders SVG circles whose positions are calculated with `scaleLinear` and `extent`, and axes are drawn using the custom `AxisBottom` and `AxisLeft` components. The plot displays values with a `siFormat` tick label and includes hover tooltips via SVG `<title>` elements.

BBizmundo
96% match
Loading thumbnail…

Exploratory Scatterplot of mtcars

This interactive scatterplot visualizes the R mtcars dataset, letting users explore relationships between numeric variables like weight and miles per gallon while coloring points by categorical variables such as cylinder count or transmission type. Built with React and D3 v6, it uses `scaleLinear` and `scaleOrdinal` for axes and color, with dropdown menus from `react-dropdown` to switch attributes. The SVG rendering includes custom axis components and a color legend, and hovering over legend items animates opacity to highlight or dim points by category.

WWaseem Medhat
88% 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
87% 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
86% 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
86% 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
85% 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
85% 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
85% match