Skip to main content
SimilarExport ZIP
100%

Menu-based automobile data summary

✓ Published0🌍 Public
BB Sundaresan
Last edited Jul 16, 2020
Created on Jul 16, 2020

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

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

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus to select which columns to plot on the x and y axes. The visualization uses D3 v5's scaleLinear and extent functions to compute axes and transitions to animate circles smoothly to their new positions when the user changes the menu selection. SVG rendering with CSS-styled ticks, grid lines, and axis labels supports the clean presentation.

PPabloReyesBetanzo
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus allowing users to choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft to render the plot, while a custom dropdownMenu module handles the select elements. Circles appear with a 2-second animated transition via transition().duration() and delay, and the SVG updates dynamically as users select different variables. The code also demonstrates reusable chart functions and modular ES6 imports.

SShashwat Priyadarshi
90% 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
90% match