Reusable Line Chart

100%

Reusable Line Chart

✓ Published0🌍 Public

Last edited Sep 18, 2016

Created on Sep 18, 2016

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.

AI-generated description

forked from <a href='http://bl.ocks.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/9727398'>Reusable Line Chart</a>

mit Licensed

Similar vizzes

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

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

79% match

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

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

77% match

Loading thumbnail…

Reusable Chart Example

This example demonstrates small multiples by rendering six separate time-series charts for stock price data from a TSV file, with each chart showing a different symbol (such as S&P 500 and MSFT) sharing a common x-axis extent. Built with D3 v4, the reusable chart component `timeSeriesChart()` uses SVG rendering, with `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.axisBottom()` to create the axes. The code employs `d3.nest()` to group data by symbol and accessors like `values` and `title` to populate each mini chart with its own line, area fill, and title.

CCurran Kelleher

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

76% match

Loading thumbnail…

Reusable Bar Chart

This example demonstrates a reusable bar chart built with D3 v5, rendering a monthly price series (January 2000 through December 2010) as an SVG. The chart uses a band scale for the categorical date axis and a linear scale for the price values, with axes formatted using compact number notation. The `barChart` function returns a configurable closure that exposes chainable methods—width, height, x, y, padding, and title—allowing the chart to be customized and reused. While the data includes 132 monthly data points, the visible bars appear relatively few, suggesting the chart is intended to be resizable and may currently render a subset or need responsive adjustment.

AAlexDaGr8

76% 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.

深深度碎片

76% match