S&P 500 Index

100%

✓ Published0🌍 Public

Last edited Dec 25, 2019

Created on Dec 25, 2019

This visualization charts the S&P 500 index from 1980 to 2004 using a red area chart overlaid with a black line and circular markers for each data point. The code imports data from a CSV file and uses d3.scaleTime and d3.scaleLinear to map years and prices, with d3.axisBottom and d3.axisLeft generating the axes. SVG paths are created using d3.area and d3.line, while circles are appended to indicate yearly values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

S&P 500 Index

A line chart shows the S&P 500 index’s annual closing prices from 1980 to 1998, rising from roughly 136 to 1,229. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveLinear to draw the path. Circles mark each data point, and both axes are rendered via d3.axisBottom and d3.axisLeft on an SVG canvas.

CChetan Hebsur

89% match

Loading thumbnail…

S&P 500 Index

A line chart displays the nominal closing price of the S&P 500 index from 1980 to 1998, rising from roughly 135 to over 1200. Data points are marked with circles along the path. Using D3 v5, the visualization builds SVG axes with `scaleTime` and `scaleLinear`, renders the polyline with the `line` generator and `curveLinear`, and appends circles for each yearly observation from `data.csv`.

Bbukbukbukka

88% match

Loading thumbnail…

S&P 500 Index

This example visualizes the closing price of the S&P 500 index from 1980 to 1998 using a simple line chart. The chart displays the index's upward trend with individual data points marked by circles. The visualization is built with d3 v5, using d3.csv to load data, d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line with curveLinear to draw the polyline. The graph is rendered into an SVG element with axes generated by d3.axisBottom and d3.axisLeft.

Ppratamamp

88% match

Loading thumbnail…

Reusable Line Chart

This reusable line chart visualizes the monthly S&P 500 stock price index from January 2000 to February 2014, highlighting long-term trends and fluctuations. Built with D3.js v3, it uses `d3.svg.line` and `d3.svg.area` to render the path, with `d3.time.scale` and `d3.scale.linear` for axes. The chart is configurable via accessor functions for x and y values, and the y-axis includes gridlines with a baseline accent. Data is loaded from a CSV file and rendered as SVG.

RRicCheng

81% match

Loading thumbnail…

Area Chart with Brushing

This area chart displays monthly S&P 500 price data from January 2000 through March 2010, rendered as a brushed time series. The visualization shows price fluctuations over time in steel blue, with an interactive brushX selection tool below the main chart that allows users to zoom into specific date ranges. The example uses d3.v5 with SVG rendering, employing scaleTime, scaleLinear, axisBottom, axisLeft, brushX, and area functions to construct the focus and context views, with data loaded from a CSV file.

Ffloresh

76% match

Loading thumbnail…

HTML Starter

This example renders a dual-axis time series chart of S&P 500 stock prices and long-term interest rates from monthly data in a CSV file. The SVG visualization uses D3 v5 scales and axes, with two line generators for each metric and a filled area between them, though the area is nearly transparent. The chart displays the data over time with inverted y-axes and employs `d3.csv` for data loading and `scaleTime` for temporal mapping.

Ppaularl

75% match

Loading thumbnail…

Gist 21cc0f29827dacf30a658ef7763c19e7

An interactive area chart displays monthly S&P 500 price data. The visualization uses a focus-and-context technique, combining a large main chart with a smaller overview panel. Users can brush a region in the context panel to zoom the focus area, or directly pan and zoom the focus chart itself. The example uses d3.brush and d3.zoom, with d3.area for the line, and d3.axisBottom and d3.axisLeft for the axes, rendering as SVG.

深深度碎片

74% match

Loading thumbnail…

Scatterplot Pills

This example shows the monthly price of the S&P 500 index from 2000 to 2010 as elongated, semi-transparent "pill" markers in a focus-plus-context scatter plot. Users can brush a time range in the lower context panel, which triggers a callback to zoom the upper focus panel into that selection. Built with d3.v4, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.brushX`, and `d3.axisBottom` to render both axes and the brush interaction. Data is loaded from a local `sp500.csv` file and drawn as SVG rectangles in the focus view and circles in the context view.

CCurran Kelleher

74% match