Fork of Dual Y-Axes

100%

Fork of Dual Y-Axes

✓ Published0🌍 Public

Last edited May 30, 2021

Created on May 30, 2021

This visualization plots the S&P 500 index and the long-term interest rate over time as two separate lines, each with its own y-axis scale, on a shared time-based x-axis. A faint gray area fills the space between the two lines, suggesting a comparison of their relative movements. The chart is built using D3 v5 within a React framework, relying on `d3.line`, `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG elements, with data loaded from a CSV file.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example renders a dual-axis time series chart of S&P 500 stock prices and long-term interest rates from monthly data in a CSV file. The SVG visualization uses D3 v5 scales and axes, with two line generators for each metric and a filled area between them, though the area is nearly transparent. The chart displays the data over time with inverted y-axes and employs `d3.csv` for data loading and `scaleTime` for temporal mapping.

Ppaularl

77% match

Loading thumbnail…

S&P 500 Index

This visualization charts the S&P 500 index from 1980 to 2004 using a red area chart overlaid with a black line and circular markers for each data point. The code imports data from a CSV file and uses d3.scaleTime and d3.scaleLinear to map years and prices, with d3.axisBottom and d3.axisLeft generating the axes. SVG paths are created using d3.area and d3.line, while circles are appended to indicate yearly values.

AAlireza Mousavi

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

71% match

Loading thumbnail…

Axis Component

This interactive example showcases D3’s axis component, which simplifies adding reference lines and labels to custom visualizations. It plots S&P 500 monthly price data from 2000 to 2010 as a line with an area fill, using `d3.svg.axis` for both x- and y-axes. Clicking the chart triggers a random zoom on the x-axis, causing the ticks to smoothly transition via `svg.transition().duration(750)`. The visualization is rendered as SVG, with axes styled for crisp edges and clipped paths for the data series.

Mmbostock

71% match

Loading thumbnail…

Fork of Fork of four

This area chart displays a synthetic time series from a CSV file, plotting daily values that rise and fall in a peak pattern. The visualization uses a steelblue line and semi-transparent fill to show the trend. Built with D3.js v7, it parses CSV data and uses `d3.scaleLinear` for axes, `d3.area` and `d3.line` for shapes, and renders to SVG. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Mmsahithipatel@gmail.com

71% match

Loading thumbnail…

Fork of Line Chart

This example displays a line chart of two ordered numerical variables, plotting date against value. It uses D3.js v4 to load CSV data and render an SVG path with a steelblue stroke. The code explicitly configures time-scaled x-axis and linear y-axis, with axis labels for “Numbers” and “Amount.” The visualization is built within a React-style HTML page, embedding d3.csv for data loading and d3.timeParse for date formatting.

Bbugfree55

71% match

Loading thumbnail…

Fork of Line Chart- Data Visualization

This line chart displays Amazon stock prices over time, using year on the x-axis and price on the y-axis with gridlines. It loads CSV data and parses dates with `d3.timeParse`. The visualization uses D3 v5 scales (`scaleTime`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and a `line` generator to draw the path in an SVG. Formatting includes rotated axis labels and styled tick marks.

Yyaswanthsen

71% match

Loading thumbnail…

Fork of Area Chart

This example displays an area chart of two ordered numeric variables over time, using a gradient-filled path to show the amount across dates. It loads data from a CSV via `d3.csv`, parses dates with `d3.timeParse`, and maps values using `d3.scaleTime` and `d3.scaleLinear`. The SVG is built with `d3.area` and `d3.axisBottom`/`d3.axisLeft`, while the React-based page styles the title via CSS. The chart renders in a fixed-size SVG with margins and labels for both axes.

Bbugfree55

70% match