[A11] My Chart
This interactive line chart displays the Consumer Price Index (CPI) for corn, rice, rye, and wheat from 2000 to 2015, with each grain represented by a distinct colored line and gray circular data points. Hovering over a point reveals a tooltip with the specific year, CPI value, and grain type, while the chart includes labeled axes, a legend, and a title. The visualization uses d3.csv to load external data, d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft for scaling and axes, and appends SVG paths and circles for rendering. A d3.legendColor legend with custom triangle shapes identifies the grain series. The graph is built with D3 v7 inside a React framework, rendering to SVG based on window dimensions.
AI-generated descriptionA bare minimum HTML page demonstrating use of CSS and JavaScript.
See also React Starter.
![[A7] CPI of Various Grains from 2000 - 2015 (Multi-Line Chart with a Color Legend)](/viz/5397762c89a7414682bb3ce931f0453c/social-image.png?v=0b6b2775c40b4397b4b97927f0f105ab)
![[A7] (Heat Map for Time Series Data with a Color Legend)](/viz/fe4800804b6a4bb0ba108e4997d78874/social-image.png?v=6ffdf70aabc44585a03e00d22a1d4a77)
![[A7] (Small Multiples of Lines Chart with a Color Legend)](/viz/1fbc0f711a734d64b5a9dae1f8627907/social-image.png?v=cce62b98b6834e6c987d1033cd10b6b3)
![[A5] Beef CPI from 2000 - 2015 (Line Chart)](/viz/cf64b5d0f6074c83bf6d9c01a4ffb956/social-image.png?v=88c4f054e41c471a9478ec564192bc2c)

![[A4] CPI of Meats in 2015 (Bar Chart)](/viz/045c46a56d84480b895c57827c6855f2/social-image.png?v=36444b898abf4371a0518e5758053c0e)


Comments
Sign in to join the discussion.