Skip to main content
SimilarExport ZIP
100%

Cars Scatter Plot with Interactive Filtering

✓ Published1🌍 Public
Ffloresh
Last edited Feb 5, 2019
Created on Oct 3, 2018
Forked from Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point colored by the number of cylinders. Users click the interactive color legend to filter which cylinder groups remain visible. The visualization uses D3 v5 with SVG rendering, employing `scaleOrdinal` and `schemeSpectral` for color encoding, alongside `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. A black background and opacity adjustments highlight the spectral color range across cylinder categories.

AI-generated description

This is a fork of Curran's"Cars Scatter Plot", modified to add the number of cylinders each car has using color. The legend on the right is interactive. I found that a white background made the middle color spectrum hard to see with the opacity, so I opted for a black background.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Scatter Plot with Interactive Filtering

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each point colored by the number of cylinders. Users click the interactive color legend to filter which cylinder groups remain visible. The visualization uses D3 v5 with SVG rendering, employing `scaleOrdinal` and `schemeSpectral` for color encoding, alongside `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes. A black background and opacity adjustments highlight the spectral color range across cylinder categories.

Ffloresh
100% match
Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes the relationship between horsepower and weight for cars, with each point colored by the car's origin and rendered as an SVG circle. The visualization enables interactive filtering through a color legend: clicking a region on the legend highlights cars from that origin at full opacity while dimming all others. Built with D3 v5, the code uses `scaleOrdinal`, `schemeSpectral`, `scaleLinear`, `axisLeft`, `axisBottom`, and custom `colorLegend` and `scatterPlot` functions to render axes, grid lines, and the plot. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via `d3.csv`.

Jjons288
94% match
Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes the relationship between horsepower and weight for cars, with each point colored by the car's origin and rendered as an SVG circle. The visualization enables interactive filtering through a color legend: clicking a region on the legend highlights cars from that origin at full opacity while dimming all others. Built with D3 v5, the code uses `scaleOrdinal`, `schemeSpectral`, `scaleLinear`, `axisLeft`, `axisBottom`, and custom `colorLegend` and `scatterPlot` functions to render axes, grid lines, and the plot. Data is loaded from the UCI Machine Learning Repository's Auto MPG dataset via `d3.csv`.

Jjons288
94% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point colored by the number of cylinders. Users can click the color legend to filter the display, highlighting cars with a specific cylinder count while dimming others. The visualization uses d3.scaleOrdinal with the schemeSpectral color palette for categorical encoding, and renders axes with d3.axisBottom and d3.axisLeft. Data is loaded from an auto-mpg.csv file, with all numeric fields parsed as numbers, and the chart is drawn as SVG.

Ssrrajendran
93% match
Loading thumbnail…

Cars Scatter Plot With Interactive Filtering

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing horsepower versus weight for individual car models. Each point is colored by the car’s origin using d3.scaleOrdinal with the schemeSpectral palette. The visualization includes an interactive color legend that filters the displayed data points; clicking a legend category dims non-matching points. The implementation uses d3.scaleLinear axes, d3.axisBottom and d3.axisLeft for gridlines and labels, and d3.select to manage SVG elements and event handling.

Jjons288
92% match
Loading thumbnail…

Cars Scatter Plot with horsepower and weight against cylinders

This scatter plot visualizes the relationship between horsepower and weight for various car models, with each point colored by the number of cylinders using a viridis color scale. A legend allows users to click on cylinder values to filter the displayed data, dimming non-matching points. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleOrdinal` for color mapping, `d3.scaleLinear` for axes, and custom modules for the scatter plot, color legend, and dropdown menu. Data is loaded from a local CSV file.

Ssrrajendran
91% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `extent` to set the domain. Circles represent individual data points, colored red with partial opacity, while grid lines are generated via `axisBottom` and `axisLeft` with custom tick sizing. Axis labels and a title are appended as SVG text elements, and the data is loaded asynchronously using `csv` and parsed with numeric coercion.

Rruubi0807@gmail.com
90% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, sourced from the auto-mpg.csv file. The visualization uses D3 v5’s `scaleLinear` to map data values to pixel coordinates, with axes generated via `axisBottom` and `axisLeft` and rendered as SVG elements. A dropdown menu allows selection among options A, B, and C, though its interaction is not shown. Red, semi-transparent circles encode individual car data points.

Vveagy
89% match