Skip to main content
SimilarExport ZIP
100%

Market Profile Chart

✓ Published0🌍 Public
CColinEberhardt
Last edited Aug 2, 2017
Created on Aug 2, 2017

This example shows a Market Profile chart, a financial visualization that groups price levels into horizontal bars to reveal trading activity distribution. The chart renders randomly generated financial time-series data as a series of colored horizontal bars, each bar representing a price bucket and its volume profile across time. Built with D3 v4 and d3fc, it uses `d3.scaleLinear` for price bucketing, `fc.seriesSvgBar` for the horizontal bar rendering, and `fc.seriesSvgMulti` to overlay the series with per-index coloring and letter labels via the `decorate` function.

AI-generated description

A quick example of how to render a Market Profile chart using D3 and d3fc

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Market Profile Chart

A market profile chart visualizes financial trading data as a time series of distribution profiles, where each profile shows trading volume across price buckets for a time interval. The chart uses a horizontal bar series for the profiles and an error bar series to highlight the point of control (price with the highest volume). Built with d3 and d3fc, it uses `d3.scaleLinear` to generate price buckets, `d3.sum` for volume calculations, and `fc.seriesSvgRepeat` with `fc.autoBandwidth` to render the repeating bars. The data comes from `fc.randomFinancial` to generate synthetic minute-level OHLCV data.

CColinEberhardt
94% match
Loading thumbnail…

Market Profile Chart

This market profile chart visualizes the distribution of trading volume across price levels over a 40-period time series, with each colored horizontal segment representing a different time interval. The chart uses d3fc’s cartesian chart, SVG bar series, and repeat series to render the profile, while d3.scaleLinear and d3.scaleBand handle price and volume axes. Color is applied via d3.scaleSequential with the interpolateSpectral scheme to distinguish time periods. The data is randomly generated using d3fc’s randomFinancial generator, and volume is apportioned across price buckets based on each bar’s high-low range.

CColinEberhardt
91% match
Loading thumbnail…

Market Values based on the question

This visualization displays market values associated with various questions, rendered as an animated bar chart using D3 v5. The chart reads CSV data from a GitHub gist and encodes job titles along the y-axis and questions along the x-axis, with bars transitioning over one second. Users can sort the bars in ascending or descending order by market value using buttons. The implementation leverages D3's scaleBand, scaleLinear, axisLeft, axisBottom, and transitions, with SVG output and a tooltip that appears on mouseover.

UUmarani Vemula
69% match
Loading thumbnail…

A classic comparison

This example demonstrates a four-panel comparison of market data, using the IEX API as its data source. Each quadrant of the visualization applies a different classic chart type to the same dataset—a bar chart, pie chart, treemap, and circle packing—all driven by D3.js v3 and rendered in SVG. A dropdown menu lets you switch the metric being compared (volume, market percent, tapeA/B/C), and all four views update simultaneously to reflect the selected value. The design uses a categorical color palette and crisp, minimal styling, with tooltips provided by d3-tip. The layout places the four charts symmetrically around a central point, creating a clean, dashboard-like comparison.

663anp3ca
66% match
Loading thumbnail…

Stock Price

This interactive visualization shows stock prices for various companies over time, using horizontal bar charts grouped by company symbol. Each panel displays the price distribution for a specific stock, with bars representing individual price points and a prominent zero line for reference. The chart is built with React and D3 v6, using D3's `scaleBand` for the categorical date axis and `scaleLinear` for the price axis. Data is loaded from a remote CSV file, and bar heights and positions are computed dynamically using these scales.

Ttrucntx007
66% match
Loading thumbnail…

6a. Stylized Vertical Bar Chart

This example presents two stylized vertical bar charts that visualize financial data about open speculations. The first chart displays "weight" values, while the second shows "gain" (relative gain), with bars colored to distinguish positive (green) and negative (red) outcomes. Built with React and D3.v5, the charts use SVG rendering and scaleBand/scaleLinear for axes, with rotated labels and custom tick formatting enabling compact display. The data is loaded dynamically from a JSON URL using D3's `json` utility.

DDenis Zjukow
66% match
Loading thumbnail…

Bar Chart

This example presents a bar chart of option prices, displaying each financial instrument’s code on the y-axis and its price on the x-axis. The visualization uses React with D3 v5, parsing data from a CSV file and rendering SVG rectangles. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` to generate tick labels, all within a custom `render` function. The data source is `data.csv`, containing option codes and prices, which are multiplied by 100 during preprocessing.

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