Skip to main content
SimilarExport ZIP
100%

Gist e13df2ee55aa6c1117d5d6b6371e9b69

✓ Published0🌍 Public
RRobinL
Last edited Mar 15, 2018
Created on Mar 15, 2018

This example uses Yahoo Finance’s quote API to visualize live foreign-exchange data for the GBP/USD pair through D3.js. The JSON response is processed to display key metrics such as the current price, day’s high and low, and 52-week range, using D3’s scales and SVG paths to render a candlestick-style chart. Only the most recent quote is shown, with no time-series animation or historical data. The rendering logic draws on D3’s `forceSimulation` for layout and `geoPath` for styling, though the visual itself is a simple static chart of the currency pair’s market range.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl
70% match
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
70% match
Loading thumbnail…

Dynamic historical stock data with d3.js and YQL

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.

Dd3noob
69% match
Loading thumbnail…

Gist 33580f9f359cea2b2586

This visualization uses a force-directed network layout to display a portfolio of major stocks, with each node representing a company and links suggesting relationships. The code relies on the D3.js library’s force simulation and animation capabilities to position and update the nodes. Data is pulled live from Yahoo Finance’s CSV quote API, which supplies the ticker symbols and their associated metrics, though only the symbols are rendered as labels in the graph. The visualization appears to be a proof-of-concept for showing financial instruments as an interactive, physics-based cluster.

LLayne Smith
68% 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
67% match
Loading thumbnail…

Streaming Financial Chart

This example streams live financial data by updating a candlestick chart every 200 milliseconds using d3fc’s random financial data generator. It renders Bollinger Bands as shaded areas and lines over the candlesticks, with the chart’s x- and y-domains recomputed each frame from the sliding window of 110 data points. The visualization uses d3fc’s `chartSvgCartesian`, `seriesSvgCandlestick`, `seriesSvgMulti`, and the `indicatorBollingerBands` algorithm, while d3 scales and extents handle the dynamic ranges.

CColinEberhardt
66% match
Loading thumbnail…

Gist 49a089ddc690b3bd9ca6d899ce5b7bae

This example visualizes stock and option quote data for AIG and IBM, displaying underlying prices, option chains, and Greeks like delta, gamma, and implied volatility. It uses D3.js to render the data tables and price levels, with the source data from CSV files containing detailed market quotes. The visualization presents the full option chain for each stock, showing calls and puts across various strike prices, with metrics such as open interest, volume, and probability metrics. The implementation relies on D3’s selection and data-binding methods to structure the tabular layout.

AAjayyy
66% 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
65% match