Skip to main content
SimilarExport ZIP
100%

MPG Scatter Plot, Color & Interactive Legend

✓ Published0🌍 Public
AAndre J Denais
Last edited Aug 25, 2021
Created on Jul 31, 2021

This scatter plot displays vehicle MPG highway ratings against a selected attribute, with each point colored by car make. Users can change the y-axis attribute via a dropdown menu. The interactive color legend highlights points of a specific make on mouse hover while fading others. Built with React and D3 v6, it uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and SVG circles with tooltips for data inspection.

AI-generated description

Playing with a scatter plot! Currently having trouble formatting my tooltips and the excessively long legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus -mpg

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to explore relationships between vehicle attributes like miles per gallon, horsepower, and weight. Two dropdown menus let viewers select which attributes appear on the X and Y axes. A color legend on the right encodes car brand; hovering over a legend entry highlights only that brand's points and dims others. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for colors, and custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` SVG components.

11joaorodrigues
86% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot, built with D3 v4, Redux, and d3-component, visualizes the classic Auto MPG dataset from the UCI Machine Learning Repository. Users can select which attributes to plot on the X and Y axes, as well as which attribute determines the color of the points, via dropdown menus. The visualization animates transitions smoothly when the selection changes, demonstrating how Redux can manage state changes that drive D3 updates without a React layer.

HHawkinsJM
82% match
Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset, letting users explore relationships between numeric vehicle attributes. Two dropdown menus, built with a custom D3 module, select which columns are plotted on the x- and y-axes. The chart uses D3 v5 scales, axes, and SVG circles that animate from the center to their positions with a staggered delay, while gridlines and axis labels update dynamically. The code is structured as reusable ES6 modules for the menu and plot.

SShashwat Priyadarshi
82% match
Loading thumbnail…

MPG Scatter Plot with Menus

This interactive scatter plot visualizes the MPG dataset, allowing users to explore relationships between quantitative and categorical variables through dropdown menus that select the X and Y axes. Built with D3 v6, it uses a reusable chart pattern with `selection.join` for smooth enter, update, and exit transitions, animating circle positions and radii over 1000ms. The visualization leverages `scaleLinear` and `scalePoint` for axis scaling, with SVG rendering and custom menu components dispatching change events to update the plot dynamically.

AAndre J Denais
82% match
Loading thumbnail…

Trabalho Final D3

This interactive scatterplot, built with D3 v5 and React, visualizes the auto-mpg dataset, plotting five car attributes (e.g., miles per gallon, horsepower) against each other on selectable X and Y axes. Each point represents a vehicle, colored by its brand according to a categorical color scale shown in the legend. Users can hover over legend entries to highlight points from that brand, and dropdown menus allow them to switch the attributes on each axis. The SVG rendering uses modular React components for the axes, marks, and color legend, with D3’s `scaleLinear`, `scaleOrdinal`, and CSV parsing.

11joaorodrigues
82% 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
82% 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
82% match
Loading thumbnail…

Cars Scatter PLot

This interactive scatter plot visualizes the relationship between car horsepower and weight using the classic MPG dataset. Users can switch the x-axis attribute via a dropdown menu to explore different variables. The visualization is built with React and D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with animated SVG circles transitioning over one second. Data is loaded from a CSV file and displayed with axis labels and a title in an SVG canvas.

Iinroadings
82% match