Skip to main content
SimilarExport ZIP
100%

Cars Scatter Plot With Interactive Filtering

✓ Published1🌍 Public
Jjons288
Last edited Oct 1, 2018
Created on Sep 30, 2018

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`.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

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
100% 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
96% match
Loading thumbnail…

Cars Scatter Plots

This interactive scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses D3.js v5 with SVG rendering, mapping each car to a semi-transparent red circle positioned via `d3.scaleLinear` and `d3.extent`. The axes are generated with `d3.axisLeft` and `d3.axisBottom`, featuring custom tick sizes and labels. Data is loaded as CSV and parsed for numeric fields before rendering.

EecoBela
94% match
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
94% match
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
94% match
Loading thumbnail…

Cars Scatter Plot 2

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. A color-coded legend allows users to filter points by origin (USA, Japan, Germany), with non-selected origins dimmed to 20% opacity. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeSpectral` for colors, and SVG rendering for circles, axes, and interactive legend.

RRobert Curtis
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. A color legend using `scaleOrdinal` illustrates car origins. The chart includes axis labels, gridlines, and a title, with circles positioned via `xScale` and `yScale` based on the mapped data values.

Nnicfavfar
93% match
Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Red semi-transparent circles represent individual car models, with a title and labeled axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the chart. Data is loaded as CSV via the `csv` function, and the SVG output is styled with custom CSS for tick marks, labels, and title typography.

Mmamaycotte
93% match