{"version":"1.0","type":"rich","title":"Gist 6310544","description":"This visualization displays the S&P 500 monthly closing price from January 2000 through December 2004 as an area chart with an overlaid line. The area is filled with a light gray, while the line is a darker gray. The x-axis is a time scale using monthly date ticks, and the y-axis shows price. The chart is annotated with the symbol \"S&P 500\" in the lower-right corner. The visualization uses D3.js to render the chart as SVG, with monotone interpolation for smooth curves. While the code includes a commented-out click handler that would have zoomed the x-axis to a random date range, the primary display presents the complete series without interaction.This example shows the S&P 500 index from January 2000 to December 2004 as a smooth area chart with a line overlay. It uses D3 with SVG and animation, plotting monthly closing prices. The chart features a white grid on the x-axis, a right-oriented y-axis, and a clipped monotone-interpolated area and line. A label marks the series, and the code includes a commented-out click handler for interactive zooming.\n\n---\n\n**Description (concise, for gallery):**\n\nA clean area chart of the S&P 500 from 2000 to 2004, rendered in D3 with SVG. Monthly closing prices are drawn as a dark line over a light gray filled area, with a clipped monotone interpolation for smooth curves. The x-axis shows time with minor tick subdivisions, and the y-axis is on the right. Although the data includes a single series, the visualization uses an animated zoom interaction (currently commented out) that rescales the x-axis on click. This example demonstrates how to build an area chart with D3's scales, axes, and path generators.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-6310544?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}