Dual axes in v7

100%

Dual axes in v7

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

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.

AI-generated description

This is a multiple line graph demonstrating the display of seperate colour coded y axes for each line.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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.

Dd3noob

92% match

Loading thumbnail…

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.

Dd3noob

90% match

Loading thumbnail…

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.

Dd3noob

89% match

Loading thumbnail…

Multiple line graph in v7

This example displays two line graphs on a shared time-based x-axis, comparing the open and close prices from a small CSV dataset over a three-month period. The close price is shown as a steelblue line, while the open price appears in red, with both axes scaled to fit the data. The visualization uses d3.line and d3.scaleTime to map data points, d3.axisBottom and d3.axisLeft to render the axes, and d3.csv to load the data. The SVG output includes two separate path elements styled with CSS classes.

Dd3noob

87% match

Loading thumbnail…

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.

Dd3noob

86% match

Loading thumbnail…

Labels on multiple lines v7

This example shows two time series lines—one for “close” and one for “open” values—plotted against a date axis, with each line labeled directly at its right‑end point using SVG `<text>` elements. The data is loaded from a local CSV via `d3.csv` and parsed with `d3.timeParse`. The chart is built with D3 v7 primitives: `d3.line` generates the path geometry, `d3.scaleTime` and `d3.scaleLinear` map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` render the axes. Red and steel‑blue strokes distinguish the two lines, and their labels are positioned using the scaled y‑values of the first data point.

Dd3noob

85% match

Loading thumbnail…

Axis Labels in v7

This example shows a line chart of stock closing prices over time, with clearly labeled x and y axes. The chart uses d3.line to generate the path, d3.scaleTime and d3.scaleLinear for the scales, and d3.axisBottom and d3.axisLeft to render the ticks. Axis labels are added as SVG text elements, with the y-axis label rotated using an SVG transform. Data is loaded from a CSV file and parsed with d3.timeParse, with the visualization rendered as SVG inside a single group element.

Dd3noob

83% match

Loading thumbnail…

Multiple line graph in v6

This example displays two time-series lines on a single chart, comparing the daily close and open values from a CSV file. The visualization uses a time-scaled x-axis and a linear y-axis, with the close line rendered in steel blue and the open line in red. Built with D3 v6, the code employs `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to load, parse, draw, and label the data within an SVG. The graph comes from the D3 Tips and Tricks book repository.

Dd3noob

83% match