Multiple line graphs with labels

100%

Multiple line graphs with labels

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Jan 24, 2014

Two line graphs show the daily open and close prices of a stock over time, with each line labeled at its right endpoint. The blue line represents closing prices and the red line represents opening prices, plotted against a time-based x-axis and linear y-axis. The visualization uses D3.js version 3.5.17 with `d3.svg.line` to generate the paths, `d3.time.scale` for the x-axis, and `d3.scale.linear` for the y-axis, reading data from a CSV file. Labels are positioned using the final data point’s y-coordinate, as the CSV data is ordered newest-first.

AI-generated description

This is an example of a line graph with multiple lines and labels at the end of those lines.

Created in responce to a question on d3noob.org

A few points to note:

The csv file starts with the newest data point and ends with the oldest. If you needed to get the 'y' position of the last point in the array you will need to use data[data.length-1].open rather than data[0].open.
I've left some console.log calls in the code as small demos.
The script makes the adjustment for scale using the y function.

mit Licensed

Similar vizzes

Loading thumbnail…

Labels on multiple lines v5

Two time series lines show daily open and close stock prices from a CSV file, with each line labeled at its final value on the right edge of the chart. The graph uses d3.line to generate the paths, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render them. Text labels for “Open” and “Close” are placed manually via SVG text elements, positioned using the y-scale at the last data point. The example is built with D3 v5 and renders to SVG.

Dd3noob

87% match

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

86% 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

85% match

Loading thumbnail…

Labels on multiple lines v4

This example shows a multi-line chart with two time-series lines for stock open and close prices, with labels placed directly at the end of each line. The labels “Open” and “Close” are positioned manually using SVG text elements, colored to match their respective lines (red and steelblue), and anchored to the final data points. The visualization uses d3.csv to load the data, d3.timeParse to parse dates, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths in an SVG canvas.

Dd3noob

84% 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

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

82% match

Loading thumbnail…

Simple line graph in d3.js

This example shows a simple line graph plotting stock closing prices over time, with date values on the x-axis and price on the y-axis. The visualization uses D3.js version 3.5.17, employing `d3.time.scale` for the date range, `d3.scale.linear` for the value axis, and `d3.svg.line` to generate the path. Data is loaded from a local CSV file via `d3.csv`, with the axes created through `d3.svg.axis`. The SVG rendering includes styled axis lines and a steelblue line, providing a minimal teaching example for D3 chart construction.

Dd3noob

82% 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

82% match