Skip to main content
SimilarExport ZIP
100%

Dynamic historical stock data with d3.js and YQL

✓ Published0🌍 Public
Dd3noob
Last edited Nov 30, 2019
Created on Mar 16, 2014

This interactive line chart displays daily stock prices for a user-selected ticker symbol over a specified date range. HTML input fields and an Update button control the query, which fetches historical data from Yahoo Finance’s YQL API. The visualization, built with d3.js (version 3.5.17), renders an SVG area with axes, a steelblue line for daily high prices, and a dynamically updated title. The code uses `d3.json` for the AJAX call, `d3.time.scale` and `d3.scale.linear` for plotting, and `d3.svg.line` for the path, with no input sanitization.

AI-generated description

This is a chart as used as an example to demonstrate the integration of a YQL query with d3.js and incorperating a degree of control over the query. It is described in the book D3 Tips and Tricks.

You can enter a stock in the form of a ticker symbol (YHOO = Yahoo!, MSFT = Microsoft, KO = Coca-Cola) along with a start and end date (in the format yyyy-mm-dd).

Fair Warning: There is no degree of sanitisation or validation on the inputs. The purpose is to demonstrate the YQL integration with d3.js.

Interesting note: The original version of this example used 'GOOG' as the ticker symbol, but for whatever reason it no longer appears to work.

mit Licensed

Similar vizzes

Loading thumbnail…

Yahoo Finance Chart

This example shows an interactive financial chart rendered with D3 and the d3fc library, displaying a line series that reflects external data. The visualization uses SVG for graphical output, incorporating a gradient fill beneath the chart area for visual emphasis. Its interactive features are built directly into the code, which leverages D3’s v5 API alongside d3fc’s components for charting functionality. The page also relies on babel-standalone to enable modern JavaScript syntax within the script tags, ensuring the custom chart elements and event handling execute properly in the browser.

CColinEberhardt
78% 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
78% match
Loading thumbnail…

Yahoo Finance Chart Step 3 - Styling

This example shows a styled financial time-series chart of Yahoo Finance stock data, plotting opening prices as both a line and an area chart over a single trading day. The SVG rendering uses the d3fc library’s `linearTimeSeries` chart, with `area`, `line`, and `gridline` series composed via `multi`. A custom CSS gradient fills the area, while axis labels are repositioned and bolded for readability. Data is loaded from a CSV and parsed into JavaScript `Date` objects using `d3.csv`.

CColinEberhardt
77% match
Loading thumbnail…

Simple d3.js graph with internal data

This example shows a line chart of stock closing prices over a three-week period in April and May 2012. The data is declared internally as a JavaScript array of date-value pairs. The visualization uses D3.js version 3.5.17, with `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line` to render the axes and the line path in SVG. The chart includes styled axes and a steelblue line, with the date parsed via `d3.time.format`.

Dd3noob
76% match
Loading thumbnail…

d3.js Graph with many features

This graph displays stock closing prices against dates, with a steel-blue value line and a lightsteelblue filled area beneath it. The chart includes labeled x and y axes, a title, and light grey grid lines for both axes. The d3.js code uses `d3.time.scale` and `d3.scale.linear` for the coordinate systems, along with d3.js APIs such as `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` for rendering. The data is loaded from a local CSV file, and the visualization is rendered as an SVG.

Dd3noob
75% match
Loading thumbnail…

Yahoo Finance Chart Step 2 - Gidlines and Area

This example shows a financial time series chart of Yahoo stock prices, plotting open values as both a filled area and an overlaid line against timestamps. The chart uses horizontal gridlines for scale reference, with five y-axis ticks and a cleaned domain for readability. Built with D3 and the d3fc library, the code constructs a `linearTimeSeries` chart, composes area, line, and gridline series via `fc.series.multi`, and renders the result as an SVG. Data is loaded from a CSV file.

CColinEberhardt
74% match
Loading thumbnail…

Yahoo Finance Chart Step 10 - Crosshair

An interactive Yahoo Finance chart rendered in SVG displays the open, high, low, close, and volume of stock data over time. Users can hover to reveal a crosshair overlay showing the exact date and price, with a legend updating to reflect the value under the cursor. The chart uses D3.js and the d3fc library, with a custom `fc.tool.crosshair()` component and `d3.scale.linear()`. Data is loaded from a CSV file with timestamp, price, and volume columns, and includes a 20-point exponential moving average.

CColinEberhardt
74% match
Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930
74% match