Fork of D3 Area Chart - 11641166

100%

Fork of D3 Area Chart - 11641166

✓ Published0🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

This visualization presents Apple Inc.'s average stock price from 2000 to 2023 using a combined line and area chart. The SVG rendering uses D3 v7 to load CSV data, which is parsed and scaled with `scaleTime` for the X-axis and `scaleLinear` for the Y-axis. Grid lines are generated via `axisBottom` and `axisLeft`, while the data is drawn using `d3.line()` and `d3.area()` generators. The area chart is filled with a light blue color, and the line appears as a thick dark stroke, with axis labels and rotated Y-axis text enhancing readability.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Area Chart - 11641166

This area chart displays Apple Inc.'s average stock price from 2000 to 2023, with a line overlaid on a light blue filled area to emphasize the trend over time. The visualization is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` and `d3.line` for the shapes, and `d3.csv` to load historical stock data from a GitHub gist. Grid lines and axis labels enhance readability, while the SVG rendering shows a bold black line and a horizontal bottom line.

SSuresh John Wesly

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

92% match

Loading thumbnail…

D3 Line Chart - 11641166

This visualization displays the average stock price of Apple Inc. from 2000 to 2023. The line chart plots the yearly average stock price, with the x-axis representing time and the y-axis showing the price value. The chart uses D3 v7’s `scaleTime` and `scaleLinear` for axes, and `line` to generate the path. Data is loaded from a remote CSV file via `csv` and rendered as an SVG.

SSuresh John Wesly

86% match

Loading thumbnail…

Fork of Apple stock price display

This fork of the Apple stock price display visualizes historical stock values over time using an SVG line chart. A green-to-red linear gradient colors the line based on price range, and a hover interaction reveals a labeled circle showing the exact price at the cursor position. The visualization uses d3.v4 with d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.bisector for mouse tracking. Data is loaded from a CSV file hosted on GitHub, and the chart updates dynamically via d3’s event handlers.

AAndrej38995

83% match

Loading thumbnail…

Fork area

This fork-area chart displays the number of Apple users over time, with a purple filled area beneath a smooth curve. The visualization uses D3 v6 with SVG rendering, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path. Data is loaded via `csv` from a remote dataset, with dates parsed using `timeParse`. Axes are customized with tick formatting and labels, and the chart includes a titled layout with margins, gridlines, and rotated axis text.

SSnigdha6698

80% match

Loading thumbnail…

Fork of Fork of Stock price display

This interactive line chart displays Apple stock prices over time, spanning from 1977 through 1982. The visualization uses a green-to-red vertical gradient to encode price levels, with higher values appearing greener and lower values redder. Users can hover over the chart to see a tooltip with the exact price at any date, indicated by a black circular marker that tracks the cursor along the line. The chart is built with D3.js v4 and React, reading data from a remote CSV file, and renders as an SVG with a bisector-based search to find the closest data point to the mouse position.

Ssitaramchallapalli

80% match

Loading thumbnail…

Area Chart

This area chart displays the closing price of AAPL stock from 2007 to 2008, with the area beneath the line filled in steelblue to emphasize the price trend over time. The visualization is rendered as an SVG element and uses D3 v4 modules including d3-dsv to parse tab-separated data, d3-time-format for date parsing, d3-scale for time and linear scales, d3-array for data extent calculations, d3-axis for the bottom and left axes, and d3-shape’s d3.area to generate the filled path. The y-axis is labeled “Price ($)”.

Mmbostock

80% match

Loading thumbnail…

Fork of Area Chart

This chart displays electronic sales from 2013 to 2021, combining a smooth line and a filled area to emphasize the sales trend over time. The visualization uses a time-scaled x-axis for sales dates and a linear y-axis for year values. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` generators with a basis curve. The SVG rendering includes styled grid ticks and axis labels, with data loaded from a remote CSV file.

RRahulSai05

78% match