Envelope

100%

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Aug 24, 2017

A financial candlestick chart overlays an envelope indicator, showing price data for a stock alongside upper and lower moving-average bands. The visualization uses d3fc components including `seriesSvgCandlestick`, `seriesSvgArea`, and `indicatorEnvelope` to compute and render the envelope, with a discontinuous time scale that skips weekends. The chart is built with `chartCartesian`, and data is loaded from a CSV file via `d3.csv`.

AI-generated description

A simple Envelope indicator example.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Candlestick

This candlestick chart visualizes stock price movements over time, with each candle representing a single trading day’s open, high, low, and close values. The chart uses d3fc’s `seriesSvgCandlestick` to render the candlesticks, and a discontinuous time scale to skip weekends, ensuring a continuous trading week. The x-axis domain is derived from the date extent, while the y-axis domain is calculated from the high and low price values. Data is loaded from a CSV file containing daily Apple stock prices from March to June 2014. The visualization employs the d3fc library's chartCartesian component for layout, with an SVG plot area and a left-oriented y-axis, providing a clean and functional representation of price movements over time.

CColinEberhardt

72% match

Loading thumbnail…

candleBars

A candlestick chart visualizes stock price movements over time, showing daily open, high, low, and close values using red and green bars. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for price values. Each candle consists of a thin line for the high-low range and a rectangle for the open-close spread, colored green for down days and red for up days. Data comes from a CSV file containing date, price, volume, and return columns.

深深度碎片

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

69% match

Loading thumbnail…

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.

CColinEberhardt

69% match

Loading thumbnail…

return-line & candleBars-background

A stock chart combines candlestick bars with a pink return line overlaid on the same time axis. The candlesticks show open, high, low, and close prices, colored red when price rises and green when it falls. The return line uses a distinct y-axis scale, while the candlestick bars use the price scale. Built with D3 v4, it uses `d3.csv` to load data, `d3.timeParse` for dates, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes `rect` elements for bodies and `line` elements for wicks.

深深度碎片

68% match

Loading thumbnail…

Candlestick

This example displays a candlestick chart, a financial visualization showing the open, high, low, and close prices for a series of dates. The code renders five candlesticks as SVG rectangles for the price range between open and close, with vertical lines for the high and low extremes. The chart uses d3.scaleTime and d3.scaleLinear to map dates and prices to the 600 by 400 pixel canvas, and d3.axisBottom and d3.axisLeft to draw the axes. Each candlestick is colored green or red via CSS classes based on whether the closing price is higher or lower than the opening price.

AAriel Fuggini

68% match

Loading thumbnail…

Custom Chart Layout

This example demonstrates a custom chart layout for displaying an interactive candlestick chart. It uses D3.js and the d3fc library, leveraging custom SVG elements and explicit measure and draw events to construct a responsive plot area with synchronized axes. The code creates a discontinuous time scale to skip weekends and renders a stock price series from a CSV file, allowing the chart to resize dynamically without reliance on the default chart component.

CColinEberhardt

68% match

Loading thumbnail…

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.

CColinEberhardt

67% match