Skip to main content
SimilarExport ZIP
100%

S&P 500 Index

✓ Published1🌍 Public
Ppratamamp
Last edited Dec 25, 2019
Created on Dec 4, 2019
Forked from 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.

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

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

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

[Vega-Lite] 3.2 Line Chart

This example shows a simple line chart of the S&P 500 index over time, plotting price against date. The visualization uses a Vega-Lite specification (version 5) loaded from an external JSON file, with data sourced from a GitHub-hosted CSV (sp500.csv). The chart is rendered in an HTML page via the Vega-Embed JavaScript library, which pulls in Vega and Vega-Lite at runtime. The code defines the mark as a line and encodes the x-axis as temporal (date) and the y-axis as quantitative (price), with a fixed width of 360 pixels.

JJaneChyau
70% match