Canvas Line

100%

✓ Published0🌍 Public

Last edited Feb 25, 2018

Created on Dec 30, 2015

This example shows a step-shaped line chart of Apple’s daily closing stock prices from April 2007 to June 2008. The chart is rendered entirely to a Canvas element using the 2D context API, with scales from d3-scale and the line generator from d3-shape. Axes are drawn manually with Canvas path and text methods rather than SVG. Data is loaded from a TSV file using d3-fetch, and the curve is defined with `d3.curveStep`.

AI-generated description

A line chart rendered to Canvas using d3-shape.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

line

This line chart displays Apple’s stock price trend over time, using data from Plotly’s finance-charts-apple.csv. The visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear to map dates and closing prices, and d3.line to generate the SVG path. The chart includes labeled axes and a green stroke line, rendered with d3.axisBottom and d3.axisLeft.

Hharshithamiriyam@gmail.com

80% match

Loading thumbnail…

Line Chart

A line chart displays the daily closing price of Apple (AAPL) stock from 2007 to 2008, with time on the x-axis and price in dollars on the y-axis. The SVG visualization uses D3 v4 to parse TSV data, with `d3.scaleTime` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to render the data. A steelblue stroke, 1.5 pixels wide, traces the price trend over the two-year period.

Mmbostock

78% match

Loading thumbnail…

Fork of D3 Line Chart - 11641166

This example visualizes Apple Inc.’s average annual stock price from 2000 to 2023 as a single line chart. It uses d3.line, d3.scaleTime, and d3.scaleLinear to map years and prices, with axes generated via d3.axisBottom and d3.axisLeft. The SVG renders gridlines, labeled axes, and a purple stroke path. Data is loaded from a CSV using d3.csv, and styled with custom CSS classes.

JJasvitha Allamsetty

77% match

Loading thumbnail…

Gist 6285682

This simple line chart shows the daily closing price of Apple (AAPL) stock from late 2011 to mid-2012, with each trading day plotted in chronological order. The visualization uses a conventional margin layout with axes rendered via SVG, leveraging D3's time scale for the x-axis and a linear scale for price on the y-axis. The line is drawn using d3.svg.line, with the data loaded from a TSV file and parsed using d3.tsv and d3.time.format. The chart uses d3.extent to automatically compute the domain from the date and price values, and displays axes with d3.svg.axis for clear temporal and price reference. The result is a clean, minimal line chart showing the stock's trajectory over the period, demonstrating D3's data-joining and scalable vector graphics capabilities in a straightforward time-series context.

11wheel

76% match

Loading thumbnail…

d3.js Graph with many features

This example presents a line chart of stock closing prices over time, with a filled area beneath the curve to emphasize the trend. It uses d3.svg.axis, d3.svg.line, and d3.svg.area to render the axes, value line, and shaded region, while d3.csv loads the date and price data from a local CSV file. The chart includes custom grid lines, axis labels, and a white-shadowed y-axis label, all drawn as SVG within the D3 v3 framework.

MMattDionis

76% match

Loading thumbnail…

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

Dd3noob

76% match

Loading thumbnail…

D3.chart Boilerplate Example

A multi-panel financial chart displays Apple stock price trends from 2010, with closing prices, a moving average line, and trade volume bars in the main view. A separate brushable context area below enables zooming and panning across the full date range. Built with D3 v4, the visualization uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.brushX` to render the SVG elements from the included aapl.csv dataset. Styling is defined in separate CSS and Stylus files.

深深度碎片

76% match

Loading thumbnail…

Gist 5865021

This example shows the closing price of Apple (AAPL) stock over several months in 2011 and 2012 as a simple SVG line chart. The time-series data is loaded from a TSV file using `d3.tsv`, with dates parsed through `d3.time.format`. The chart uses a `d3.time.scale` for the x-axis, a linear `d3.scale.linear` for the y-axis, and `d3.extent` to compute the domains. Axes are rendered with `d3.svg.axis`, and the line itself is drawn using `d3.svg.line` with steelblue strokes on a white background.

11wheel

76% match