Assignment 2.5:Reusable Scatter plot
This example demonstrates a reusable scatter plot that visualizes the nutritional properties of cereals, with the x-axis cycling through cups, sugars, sodium, and carbohydrates over time. The plot encodes three variables simultaneously using both the position of the circles and their horizontal and vertical radii, while color indicates the cereal's rating (red for low, orange for average, green for good). The visualization leverages D3 v6.7.0 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().join()` for rendering, and it smoothly animates between different x-axis variables using `setInterval`. The code loads data from a CSV file and renders the interactive chart as SVG within a full-window canvas.
AI-generated descriptionAn example showing the capabilities of VizHub:
- Loads D3 via UNPKG.
- Demonstrates use of
importfrom"d3". - Demonstrates use of
importfrom local ES6 modules.