Untitled

100%

✓ Published1🌍 Public

Last edited May 1, 2020

Created on May 1, 2020

This example uses a dual-axis line chart to compare the daily closing and opening prices of a financial dataset from April to May 2012. The SVG rendering is built with React and D3 v4, using scales such as `d3.scaleTime` and `d3.scaleLinear` along with `d3.line` and `d3.axisLeft`/`d3.axisRight`. Two paths are drawn: one steelblue line for `close` and a red line for `open`, each with its own y-axis scale. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This example shows a dual-line chart comparing the closing and opening prices of a dataset over time. Two lines are rendered on a time-scaled x-axis and a linear y-axis, with the closing price in steel blue and the opening price in red. The visualization uses D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to generate the SVG paths and axes. Data is loaded from a CSV file with d3.csv, and dates are parsed with `d3.timeParse`.

Ttayyabanisar

92% match

Loading thumbnail…

Untitled

A line chart compares the daily open and close prices of a financial asset, plotting both series over time with a steelblue line for close values and a red line for open values. The code uses `d3.csv` to load data from `data2.csv`, `d3.timeParse` to convert date strings, and `d3.scaleTime` and `d3.scaleLinear` to set up the axes. SVG paths are drawn with `d3.line`, and `d3.axisBottom` and `d3.axisLeft` render the time and price scales.

Yyinghao11

91% match

Loading thumbnail…

Untitled

This visualization displays two time series lines from a CSV file, showing the "close" and "open" values of a data column over dates in April and May 2012. The chart uses a time-scaled x-axis and a linear y-axis, with the blue line representing the "close" values and the red line representing the "open" values. Built with D3.js v4 in a React framework, it renders as an SVG, parsing dates via `d3.timeParse` and drawing paths using `d3.line` with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Rrichad97

90% match

Loading thumbnail…

Untitled

This example demonstrates a dual-line chart tracking a dataset's open and close values over time. Two separate line series, one steelblue and one red, are rendered using SVG paths within a shared time-scaled x-axis and linear y-axis. The code uses D3 version 7 with `d3.csv` to fetch remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` generators to map data points. Axes are added with `d3.axisBottom` and `d3.axisLeft`.

YYiHeng822

88% match

Loading thumbnail…

Untitled

Two time series line charts display closing values over date ranges from two CSV datasets. Each chart uses a separate SVG canvas, with the x-axis as a time scale and the y-axis as a linear scale, both with five ticks. The code employs d3.time.format for date parsing, d3.time.scale and d3.scale.linear for axis ranges, and d3.svg.axis for axis rendering. Each dataset’s path is drawn with d3.svg.line, styled with a steelblue stroke via CSS.

Aachintyatripathi

85% match

Loading thumbnail…

Untitled

A line chart displays time series data with dates parsed from a CSV file on the x-axis and numerical closing values on the y-axis. The single path renders with a steelblue stroke over a white background, accompanied by grey axis lines and tick labels. The visualization uses D3 v3 APIs including `d3.time.scale`, `d3.svg.line`, and `d3.svg.axis`, with the SVG canvas sized by margins and data loaded via `d3.csv` before domain scaling and path creation.

DDjPendej0

85% match

Loading thumbnail…

Untitled

A line chart tracks stock closing prices over a three-week period in April–May 2012, with each data point drawn as a red circle from the CSV data. Interactive tooltips appear on mouseover, displaying the formatted date and closing value. The visualization uses D3.js version 3.5.17 to build an SVG with a time-scaled x-axis, linear y-axis, and animated transitions for the tooltip opacity.

SSrishti2398

83% match

Loading thumbnail…

Untitled

A line chart displays stock closing prices over time for two datasets. An "Update" button triggers an animated transition between the datasets, smoothly interpolating both the line path and the x- and y-axes using D3.js transitions with a 750-millisecond duration. The visualization uses d3.svg.line, d3.time.scale for time-based x-axis formatting, and d3.svg.axis, with data loaded from CSV files via d3.csv. The SVG path and axes are updated in place, demonstrating dynamic data swapping.

CChase Hall

81% match