Stochastic Oscillator

Bollinger Bands

This example uses d3fc to render a financial time series with Bollinger Bands. The chart combines a candlestick series with a line and an area series, showing the 20-day moving average and the upper/lower volatility bands. The d3 time scale is made discontinuous to skip weekends, and the x/y domains are padded to give the data breathing room. Data is loaded from a CSV, and the Bollinger indicator is computed on the open price.

69% match

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

69% match

Moving Average

This example shows a candlestick chart of stock price data with a moving average line overlaid. The chart uses d3fc components, including `fc.seriesSvgCandlestick` and `fc.seriesSvgLine`, combined via `fc.seriesSvgMulti` into a single plot area. A discontinuous time scale removes weekends from the x-axis, and the moving average is computed with `fc.indicatorMovingAverage`. Data is loaded from a CSV file and rendered using a Cartesian chart with padding applied to both scales.

OHLC

This chart shows a candlestick representation of stock price data from a CSV file, mapping date and open, high, low, and close values for each trading day. Built with d3 and d3fc, it uses a discontinuous time scale that skips weekends so the daily observations are evenly spaced, and the SVG OHLC series renders each day's high and low as a vertical line with open and close marks. The x-domain is computed from the dates and the y-domain from the high/low extents, producing a compact financial visualization ideal for spotting trends and volatility.

Percentage Change II

This visualization depicts daily stock price changes as a percentage relative to the initial value, using a logarithmic y-axis to emphasize proportional shifts. A black line traces the full time series, while the area beneath it is filled with two distinct colors—green for periods above the baseline and purple for those below—achieved through clipping rectangles defined in SVG `<defs>`. The chart uses D3 v3’s `d3.svg.axis`, `d3.svg.line`, and `d3.svg.area` APIs, with data loaded via `d3.tsv` from a tab-separated file. Tick labels format the change as percentages, and the axis includes a subtle highlight for the zero-change tick.

Mmbostock

RSI

An interactive RSI indicator chart for stock price data. The visualization renders a line series showing the Relative Strength Index percentage, with horizontal annotations at the 30, 50, and 70 thresholds. Built with d3fc, it uses `fc.seriesSvgMulti` to merge the `fc.seriesSvgLine` and `fc.annotationSvgLine` components, while `fc.indicatorRelativeStrengthIndex` computes the indicator from CSV data. The x-axis uses a time scale, and the y-axis is fixed to a 0-100 domain.

Untitled

This visualization displays multiple stock price trends over time as colored lines on a shared time-series chart. The code loads data from a CSV file, parses dates, and groups entries by symbol using `d3.group`. It renders SVG paths with a steelblue stroke overridden by a categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`), and adds axes via `d3.axisBottom` and `d3.axisLeft`.

YYujunliu95

67% match

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.