Skip to main content
100%

3 - Lline graph with dual Y axes

✓ Published0🌍 Public
Aadry34160
Last edited Nov 1, 2016
Created on Oct 30, 2016

Two line charts compare stock opening and closing prices over time, each with its own independent Y axis scaled to the respective value range. The left axis measures closing prices in blue, while the right axis measures opening prices in red. The visualization uses d3.v3 with SVG rendering, creating time-scaled x positions and linear y scales for each series. The code draws both lines via d3.svg.line, styles the opening-price line with a red dashed stroke, and labels the series directly. Data comes from a local CSV file with date, close, and open columns.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Multiple line graphs with labels

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.

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

2 - Multiple line graphs with labels

This example shows a dual line chart comparing close and open values over time, using data loaded from two CSV files. Two lines are drawn with D3 v3's SVG line generator: one solid steelblue line for the close values and one dashed red line for the open values. The chart includes a time-scaled x-axis, a linear y-axis, background grid lines, and labeled axes for Date and Value. A white shadow effect behind the title text improves readability, and the visualization demonstrates how to plot multiple series with distinct styles on the same axes.

Aadry34160
84% 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
82% 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
82% 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
81% match
Loading thumbnail…

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
81% match
Loading thumbnail…

multiline chart

Two overlapping line charts compare daily open and close prices from a small CSV dataset over a three-week period in spring 2012. One line is drawn in light gray for the open values, the other in sky blue for the close values, both against a shared time axis and linear price scale. The visualization uses D3 v4’s `d3.line` with `d3.scaleTime` and `d3.scaleLinear`, rendering SVG paths and axes via `d3.axisLeft` and `d3.axisBottom`, with data parsed using `d3.timeParse`.

Aallyraza
80% match