Skip to main content
SimilarExport ZIP
100%

S&P 500 Index

✓ Published2🌍 Public
Bbukbukbukka
Last edited Dec 11, 2019
Created on Dec 2, 2019
Forked from Hello VizHub

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

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
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
88% 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
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…

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
71% 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…

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