Open-high-low-close chart

100%

Open-high-low-close chart

✓ Published0🌍 Public

Last edited Aug 5, 2017

Created on Aug 5, 2017

This visualization shows stock price data for Twitter (NYSE: TWTR) using an open-high-low-close chart, with red vertical lines indicating days when the closing price was lower than the opening price and green lines for the opposite. A semi-transparent black line overlays the chart to display a five-day moving average of the closing price. The code uses D3 v4, pulling data from a CSV file, and constructs the chart with SVG paths generated by the `d3.line` function, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

An example of a stock price or open-high-low-close chart. Red lines indicate the closing price is lower than the opening price - greens indicate the opposite. The grey line is a five day moving average of the closing price.

This is part of a series of visualisations called My Visual Vocabulary which aims to recreate every visualisation in the FT's Visual Vocabulary from scratch using D3.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/7143c56b26d0d07e3db79322e71aa7b1'>Open-high-low-close chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Radial Line Chart

A radial line chart visualizes Twitter's stock price fluctuations from August 2016 to July 2017, with months arranged around a circular time axis and closing prices plotted as radial distances from the center. The chart uses d3.scaleTime for the angular axis, d3.scaleRadial for the radial price scale, and d3.lineRadial to draw the line. Data comes from a CSV file containing daily OHLC prices. The visualization includes circular gridlines with dollar labels and month tick marks, with a title reading "Twitter" centered in the plot.

TThanaporn-sk

71% match

Loading thumbnail…

Multiple line graphs with labels

Two line graphs show the daily open and close prices of a stock over time, with each line labeled at its right endpoint. The blue line represents closing prices and the red line represents opening prices, plotted against a time-based x-axis and linear y-axis. The visualization uses D3.js version 3.5.17 with `d3.svg.line` to generate the paths, `d3.time.scale` for the x-axis, and `d3.scale.linear` for the y-axis, reading data from a CSV file. Labels are positioned using the final data point’s y-coordinate, as the CSV data is ordered newest-first.

Dd3noob

70% match

Loading thumbnail…

Graph and table with tricks

A line chart of stock closing prices over time is displayed alongside an HTML table listing each date’s close, open, and computed difference. The SVG chart uses d3.time.scale and d3.svg.line to render the path, while d3.csv loads the data. The table is built with d3.select and append, then sorted by closing price in descending order, with column headers capitalized.

Dd3noob

69% match

Loading thumbnail…

Twitter - Line Chart ICE-7

This line chart displays Twitter stock prices over the last week, plotting timestamps on the x-axis and share values on the y-axis. The visualization uses D3 v5 with React, rendering to an SVG via the `line` generator with `curveBasis` smoothing. Axes are constructed using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with grid lines and labels styled via CSS. Data is loaded from a CSV file hosted on GitHub, parsed with `csv`, and converted to numeric and date formats before rendering.

Mmanojgne

69% match

Loading thumbnail…

Yahoo Finance Chart

This example visualizes intraday stock price data from Yahoo Finance using a combination of D3 and d3fc components. The chart displays high, low, open, and close prices, along with trading volume and a moving average, over a discontinuous time scale that skips non-trading hours. A crosshair tooltip shows detailed values for the hovered data point, while callout annotations highlight the most recent high and moving-average values. Trading hours are marked with vertical annotations and shaded bands, and the chart includes a legend summarizing the OHLC and volume data. The visualization uses an SVG renderer and is built with d3.v5, demonstrating how to compose multiple series and annotations using the d3fc library.

CColinEberhardt

69% match

Loading thumbnail…

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

Dd3noob

68% match

Loading thumbnail…

Close

This visualization displays the closing price of a financial asset over time, using a single line chart to trace daily closing values. The example builds on a TechanJS architecture, leveraging D3 v5 and d3fc components, including `fc.chartCartesian`, `fc.seriesSvgLine`, and extent functions to set the scales. Data is loaded from a CSV file, with dates parsed via `d3.timeParse` and close prices mapped as the main value. The chart renders a clean, axis-aligned line plot, highlighting price trends across the trading period.

CColinEberhardt

68% match

Loading thumbnail…

Graph and table with tricks in v4

This example pairs a line chart of stock closing prices with an interactive HTML table, both rendered as SVG and DOM elements using D3.js v4. The graph uses `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to plot date and close values from a CSV file, while the table displays date, close, open, and computed difference columns. The table is sorted by descending close values using `d3.descending`, and headers are capitalized via text manipulation. Data parsing relies on `d3.timeParse`, and all styling is applied through CSS and inline attributes.

TThanaporn-sk

68% match