Fork of Cars Scatter Plot
This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a car, positioned along the x-axis by horsepower and the y-axis by weight. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, along with `csv` to load the data and SVG circles for rendering. The chart includes labeled axes and a title to clarify the dimensions shown.
Cars Scatter Plot
A D3.js scatter plot of horsepower vs. weight for the classic Auto MPG dataset.
Fix applied
The original code produced an "Unhandled Promise Rejection - TypeError: Failed to fetch" error because the request for the CSV dataset could fail (CORS/network restrictions) and there was no error handling. Now:
- The data is fetched with
fetchand a fallback CORS proxy is used if the direct request fails. - Errors are caught with
.catch(...), which logs the error and shows a friendly message in the SVG instead of leaving an unhandled promise rejection.
References
- Visualization 8ff1d59fc6ba423e87d7d92eeab6a7cd
— inspired the use of
fetch+awaitandcsvParse-style data loading with proper error handling.
Comments
Sign in to join the discussion.