Skip to main content
SimilarExport ZIP
100%

Multiple line graph in v6

✓ Published0🌍 Public
Dd3noob
Last edited Sep 12, 2020
Created on Sep 12, 2020

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.

AI-generated description

This is a simple graph demonstrating the display of multiple lines.

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

mit Licensed

Similar vizzes

Loading thumbnail…

Multiple line graph in v5

This example shows two time-series lines, one for closing prices and one for opening prices, plotted against dates from a CSV file. The visualization uses d3.scaleTime and d3.scaleLinear to map data to x and y axes, with d3.line generating the two path elements. A steelblue line represents the close values, while a red line, styled via a second `.line` class, represents the open values. The axes are rendered with d3.axisBottom and d3.axisLeft in an SVG container sized at 960 by 500 pixels.

Dd3noob
90% 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
90% match
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
88% match
Loading thumbnail…

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`.

Dd3noob
88% match
Loading thumbnail…

Simple Line Graph v6

A simple line graph plots daily closing values over time, with the y-axis scaled from zero to the data maximum and dates parsed using `d3.timeParse`. Rendered as an SVG, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` generates the steelblue path. The code loads a CSV file via `d3.csv` and displays the result with `d3.axisBottom` and `d3.axisLeft`, serving as a minimal D3 v6 template.

Dd3noob
87% match
Loading thumbnail…

Labels on multiple lines v6

This example shows two time-series lines of stock data, one for "Close" and one for "Open," plotted over dates in April and May 2012. Each line is labeled directly at its right endpoint, with the "Open" label in red and the "Close" label in steelblue, matching the line colors. The visualization uses d3.version 6, along with d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft, to render an SVG chart. Data is loaded from a CSV file with d3.csv, and the paths are drawn using the d3.line generator with separate `valueline` and `valueline2` functions.

Dd3noob
85% 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
84% match
Loading thumbnail…

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

Dd3noob
84% match