sync candlebar and line, 2-y-axis

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.

深深度碎片

84% match

d3.js line graph with dual Y axes

This example shows two time-series lines—one for closing values and one for opening values—plotted against a shared time axis but with separate y scales on the left and right sides. The SVG graphic uses D3.js version 3.5.17 with `d3.time.scale`, `d3.scale.linear`, and `d3.svg.axis` to render the axes and lines, while `d3.csv` loads the date-stamped data from a local CSV file. The left axis and blue line correspond to the close column, and the right axis and red line correspond to the open column, making it easy to compare trends across different value ranges.

79% match

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

79% match

Multiple line graph in v4

This example displays two time-series lines—one for closing prices and one for opening prices—in a single SVG chart using D3 v4. The chart uses `d3.csv` to load data from a CSV file, `d3.timeParse` to convert dates, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Two `d3.line` generators create the paths, with the second line styled red via `.style("stroke", "red")`. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Three y-axes in v4

This example displays three lines on a single chart, each paired with its own color-coded y-axis. A steelblue line plots the `close` values against a left axis, a red line plots `open` values against a right axis, and a purple line plots the logarithm of `open` against a second left axis positioned over the chart. Built with d3.v4, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisLeft`, and `d3.axisRight` to render SVG paths and axes. The data comes from a local CSV file with date, close, and open columns.

LLucyI

Dual axes in v5

This chart displays two time-series lines from a CSV file, each with its own color-coded y-axis. The steel blue line represents closing values on the left axis, while the red line shows opening values on the right axis, allowing comparison of differently scaled data. Built with D3 v5, the code uses `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to render the SVG paths and axes. The axes and line colors are coordinated through CSS classes.

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

Dual axes in v7

This example displays two line charts sharing a common time axis, with each line assigned its own colored vertical scale: a steelblue line for the "close" values on the left axis and a red line for the "open" values on the right axis. It uses the d3.v7 library, specifically the `d3.line` generator, `d3.scaleTime`, and two `d3.scaleLinear` scales. Data is loaded from a local CSV file via `d3.csv`, with dates parsed using `d3.timeParse`. The SVG output renders the paths and axes with custom CSS classes for axis-label coloring.