S&P 500 Index

100%

✓ Published0🌍 Public

Last edited Dec 6, 2019

Created on Dec 6, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% 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

94% match

Loading thumbnail…

S&P 500 Index

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.

AAlireza Mousavi

89% match

Loading thumbnail…

Fork of [Vega-Lite] 3.2 Line Chart

This line chart shows the daily closing price of the S&P 500 index over time, using a single temporal x-axis and quantitative y-axis. The visualization is built with Vega-Lite 5 and rendered via Vega-Embed, loading a CSV dataset from a GitHub gist. The chart is specified declaratively in a JSON file, with a fixed width of 360 pixels and a simple line mark. The code relies on Vega-Lite’s encoding system to map the date and price fields.

AAhmad Nadeem

72% 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

71% match

Loading thumbnail…

Fork of [Vega-Lite] 3.2 Line Chart

This example shows the daily closing price of the S&P 500 index as a simple line chart, with time on the horizontal axis and price on the vertical axis. It uses the Vega-Lite specification language, loaded via the Vega-Embed API, to parse a JSON configuration and render the chart. The data is fetched from a CSV file hosted externally, and the chart is drawn into an HTML div element using the Vega runtime library.

Aamycaroline11

70% match

Loading thumbnail…

S&P 500 Stocks Data

This example loads daily S&P 500 stock data from a CSV file and displays it as raw JSON in a preformatted text block. The visualization fetches a Kaggle-derived dataset, parses it with `d3.csvParse`, and converts numeric fields such as Open, High, Low, Close, and Volume to numbers. The code uses D3 v7’s `select` and `join` to manage the display, with a state object tracking whether data is loading or available. The dataset includes date, price, adjusted close, and trading volume columns for 2022.

Kkratikashetty1102@gmail.com

70% match

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This line chart visualizes the daily closing price of the S&P 500 index over time, using a temporal x-axis and quantitative y-axis. The visualization is built with Vega-Lite, whose specification defines the data URL, a simple line mark, and the field mappings. The chart is embedded into an HTML page via vega-embed, which loads both Vega and Vega-Lite from CDN. The underlying data is fetched directly from a hosted CSV file containing date and price columns.

KKariChung

70% match