Viewing a saved revision (read-only)
8f1cff0735fa40ff904dbcbb9dd665d5
Week 5 Responsive Axes
This scatter plot visualizes the 80 Cereals dataset, plotting calories per serving against average rating. Each point is colored on a green-to-red interpolated scale based on sodium content, with greener points indicating less sodium and redder points indicating more. Hovering over any point reveals the cereal’s name in a tooltip. The chart uses D3 scales and axes to map the data, with responsive sizing handled through a ResizeObserver.
AI-generated descriptionA simple scatter plot with D3 showing the 80 Cereals dataset.
This iterates on the previous version of the visualization in two ways.
First, a color channel is introduced, interpolated between green and red. Greener data points have less sodium, while redder points had more. I was expecting to see a more linear correlation between calories and sodium, however oddly it seemed that the highest concentration of high-sodium cereals had an "average" calorie value.
Second, the user is now able to mouse over individual points on the graph to see the name of the cereal in question.