Gist 6310544
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. --- **Description (concise, for gallery):** A 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.
AI-generated descriptionThis example demonstrates D3's new d3.svg.axis component, which makes it easy to add reference lines and labels to a custom visualization. The axis component even supports automatic transitions! Click on the area to change the scale and watch as new ticks smoothly replace the old ones. Built with D3.js.