Viewing a saved revision (read-only)
WcKOTsT_bbWG3p9GrupgP
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.