Skip to main content
100%

Gist 6310544

✓ Published0🌍 Public
Aalanmclean
Last edited Aug 22, 2013
Created on Aug 22, 2013

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 description

This 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.

Similar vizzes