Force Index

100%

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Sep 6, 2017

This example shows a Force Index indicator overlaid on stock price data from a CSV file, with a horizontal zero baseline. The Force Index line is computed from close price and volume, then plotted against date using D3 scales and d3fc’s `seriesSvgLine` and `annotationSvgLine` components. The chart uses `chartCartesian` with a time x-axis and linear y-axis, while `extentLinear` pads the y-domain symmetrically about zero. Data is parsed from CSV format using `d3.timeParse` and `d3.csv`.

AI-generated description

A Force Index indicator example.

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3fc extent example

This example shows a line chart of stock closing prices over time, with the chart’s x and y domains computed using the d3fc extent components (`fc.extentLinear` and `fc.extentDate`). The y-extent pads the upper range by 10% and includes zero, while the x-extent pads by one day in both directions using domain units. Data comes from a CSV file, rendered as an SVG line with circles for each point, axes via `d3.axisBottom` and `d3.axisLeft`.

CColinEberhardt

70% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a dual-line chart comparing stock close and open prices over time, with two colored axes (steel blue for close, red for open) to distinguish the scales. It uses D3 v5’s `d3.csv` to load the data, `d3.timeParse` to format dates, and `d3.scaleTime`/`d3.scaleLinear` for the x and y ranges. The lines are drawn with `d3.line` and appended as SVG paths, with axes rendered via `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`. Data comes from `data4.csv`.

CCameron

69% match

Loading thumbnail…

line chart - hover

This example shows a simple line chart of stock closing prices over time, with the data loaded from a CSV file. The visualization uses a time-scaled x-axis and a linear y-axis for price, rendered as a single steelblue line. The code relies on D3 v4’s `d3.line` generator and `d3.scaleTime` to map dates and values, while axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The chart is built with SVG, with margins applied via a transform on a group element, and the data is parsed using `d3.timeParse`.

CConorAspell

68% match

Loading thumbnail…

A8 Force Directed Node Link Diagram

This example shows a static force-directed node-link diagram of firm-hi-tech data sourced from a CSV file. It uses the D3.js library (v7) to load the data and compute a 500-tick simulation via `d3.forceSimulation`, applying `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces. The SVG rendering uses circles for nodes and lines for edges, with tooltips showing each node's ID. The layout is determined by the simulation's final state, and the chart includes a title set with D3 methods.

NNoah C.

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

67% match

Loading thumbnail…

d3fc dual axes example

This example demonstrates how d3fc can be used to create a chart with dual y-axes, plotting both the opening and closing stock prices from a CSV file as two separate line series. The close price line is rendered in red and paired with a left axis, while the open price line uses a right axis, with each series having its own independent linear scale. The chart layout is built from HTML elements and flexbox, with d3fc-svg components handling the plot area and axes, and d3fc-group managing responsive redraws. The code uses d3.scaleTime for the x-axis and d3fc's axisBottom, axisRight, and axisLeft for the axes, along with seriesSvgLine for the line series.

CColinEberhardt

67% match

Loading thumbnail…

Untitled

This visualization combines a line chart with a filled area to display stock prices over time. The chart uses a time-series x-axis and a linear y-axis, with the area under the curve highlighted in green to emphasize the cumulative trend. Data is loaded from a CSV file using `d3.csv`, while scales and axes are constructed with `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The line and area paths are generated using `d3.line` and `d3.area` with a basis curve, rendered as SVG within a styled HTML page.

Ssri7harsha

67% match

Loading thumbnail…

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.

CColinEberhardt

67% match