Skip to main content
SimilarExport ZIP
100%

Cars Scatter Plot With Interactive Filtering

✓ Published1🌍 Public
Jjons288
Last edited Sep 30, 2018
Created on Sep 30, 2018
Forked from Cars Scatter Plot

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.

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
96% 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
96% 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, with each circle’s color encoding the car’s origin. The visualization uses d3.csv to load the data, d3.scaleLinear for the axes, d3.scaleOrdinal with d3.schemeCategory10 for color mapping, and d3.axisLeft and d3.axisBottom to render gridlines and tick labels. Rendering is done as SVG elements, and the code explicitly converts parsed string values to numbers before drawing.

Vveagy
93% 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
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing horsepower against weight with points colored by production year. The visualization uses D3 v5 to implement linear scales, axes, and an ordinal color scale with a custom color legend that filters points when clicked. SVG rendering displays the scatterplot with axis labels and a title, while a YouTube video tutorial accompanies the example. The data is loaded via CSV and processed with number coercion before rendering.

Ssaatraju
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, showing the relationship between horsepower and weight for individual car models. Each circle represents a car, with position mapped by d3.scaleLinear scales for both axes. The SVG rendering uses D3 v5’s selection, axis, and data join methods to draw the plot, including grid lines, labeled axes, and a title. Circle opacity is reduced to show overlapping points, and the data is loaded asynchronously via d3.csv.

LLeora Wenger
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting each car based on its weight and horsepower. The chart uses red, semi-transparent circles to reveal overlapping points, with axes and labels styled via CSS. Built with D3 v5, the code employs `d3.csv` to load remote data, `d3.scaleLinear` for scaling, and `d3.axisLeft` and `d3.axisBottom` to render the axis ticks and labels in SVG.

LLonwabo11
93% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower (labeled “HE provider” on the x-axis) against weight (on the y-axis). Each red semi-transparent circle represents a vehicle, with axes rendered using d3.axisBottom and d3.axisLeft. The visualization uses d3.scaleLinear for both scales, d3.csv for data loading, and d3.extent to set domains. SVG rendering displays the data with styled tick labels, axis labels, and a title.

330343615
92% match