Skip to main content
SimilarExport ZIP
100%

HW Colored Scatter Plot With Interactive Filtering

✓ Published1🌍 Public
YYF
Last edited Nov 8, 2018
Created on Oct 1, 2018
Forked from Cars Scatter Plot

This scatter plot visualizes the correlation between car horsepower and weight, with points colored by country of origin using the D3 ordinal color scale `d3.scaleOrdinal` and `d3.schemeDark2`. Users can click a legend item to filter the displayed points, dimming all other categories. The visualization is rendered as an SVG using D3 v5, with axes and scales built via `d3.axisBottom` and `d3.axisLeft`, and data loaded from the UCI Auto MPG dataset.

AI-generated description

This scatter plot shows the correlation between car horsepower and car weight, categorized by car origin, 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
90% 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
90% 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
88% 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 point colored by the car’s country of origin (USA, Japan, or Germany). Clicking a country in the color legend filters the points by toggling their opacity, highlighting cars from that origin. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render SVG axes and circles, while the legend relies on `d3.legendColor` for a horizontal color scale.

RRyan Fleming
88% 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
87% match
Loading thumbnail…

Scatterplot D3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes and `axisBottom`/`axisLeft` for tick marks. Circles represent individual car models, with red semi-transparent fills. The visualization includes labeled axes and a title, generated through D3’s selection and data-join methods, with data parsed and converted to numeric values before rendering.

SSophia Cofone
86% 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
86% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with circles colored by country of origin (USA, Japan, or Germany). The visualization loads data from the UCI Machine Learning Repository’s auto-mpg dataset using D3’s `csv` method. It uses `scaleLinear` for both axes and circle radius (representing acceleration), plus `axisBottom` and `axisLeft` for labeled axes. SVG circles are rendered with stroke colors mapped from the `origin` column, and the chart includes a title and axis labels.

Aantoniojl@gmail.com
85% match