d3fc dual axes example

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.

82% match

Dual axes in v6

This example shows two time-series lines from a CSV file with date, close, and open values, each with its own colored y-axis: steelblue for the close values on the left and red for the open values on the right. The chart uses D3 v6’s `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` to generate the SVG path data, and `d3.axisLeft` and `d3.axisRight` to render the separate scales. The data is loaded via `d3.csv` and parsed with `d3.timeParse` before being drawn as SVG paths within a single group element.

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

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.

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.

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

79% match

Dual axes in v5

A dual-axis line chart plots two time series from a CSV file, with one line in steel blue and another in red, each paired to its own y-axis. The example uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` to render an SVG. The steel-blue axis appears on the left, the red axis on the right, and both lines share a common time-based x-axis. The styling is driven by CSS classes for axis text colors, as shown in the index.html file.

79% match