area chart

100%

✓ Published0🌍 Public

Last edited Nov 26, 2017

Created on Nov 26, 2017

This area chart displays the monthly closing price of a single financial symbol over time. The visualization uses an SVG rendered through D3 v4, loading data from a TSV file. The chart employs `d3.area()` to generate the filled path, with `d3.scaleTime()` for the x-axis and `d3.scaleLinear()` for the y-axis. Axes are added using `d3.axisBottom()` and `d3.axisLeft()`, with the y-axis labeled "Price ($)". The data appears to be sourced from a gist.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

first_area

The visualization shows time-series stock data as filled area charts, with each symbol rendered as a separate SVG area plot. It displays price trends over time, using a light gray fill for the area beneath each line. The code loads comma-separated data from a CSV file, parses dates with `d3.timeParse`, and nests the data by symbol using `d3.nest`. It constructs the areas with `d3.area` and applies a basis curve via `d3.curveBasis` for smooth lines. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`. A legend is added using `d3.scaleOrdinal` with the `schemeCategory10` palette.

EEssohanamKouyou

79% match

Loading thumbnail…

Area Chart

This area chart visualizes Google's monthly closing stock prices. The D3.js v7 code loads data from a CSV file via UNPKG and uses the `csv()` function to parse it. The visualization employs `scaleTime` and `scaleLinear` for the axes, and the `area()` generator with a `curveBasis` curve to create the smooth, filled area path. The SVG rendering includes styled tick marks, axis labels, and a title, all formatted with `timeFormat` and CSS.

SSanchay

79% match

Loading thumbnail…

DataVizTP3_AreaChart

An area chart displays monthly closing stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010. Three semi-transparent filled regions, one per company, use color to distinguish the symbols, with a legend identifying each. Built with D3 v4 and rendered as SVG, the code uses `d3.area` and `d3.line` with basis curves, `d3.nest` to group the CSV data by symbol, and `d3.timeParse` for date handling. The y-axis is scaled to the maximum price across all series.

KKylaste

78% match

Loading thumbnail…

area chart

This area chart displays yearly sales data loaded from an external CSV file, with the x-axis representing years and the y-axis representing sales figures. Using D3 v7, the visualization generates an SVG area path filled in steel blue, with axes and labels for both dimensions. The code employs `d3.area()` to create the filled region, `d3.scaleLinear()` for both scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes, all appended to a single SVG element sized at 800 by 400 pixels.

Rr79162810@gmail.com

77% match

Loading thumbnail…

Fork of Area Chart

This fork of an area chart visualizes the opening prices of houses over time, with months on the x-axis and price on the y-axis. The visualization combines a smooth line and a semi-transparent red filled area beneath it, using D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with `curveBasis`. Rendered as an SVG within a React app, it loads CSV data from a remote gist. Axis labels and tick formatting are customized via `axisBottom` and `axisLeft`, with distinct styling for ticks and labels.

Nneeharika2023@gmail.com

77% match

Loading thumbnail…

Fork of Area Chart - ICE_7

This area chart visualizes dollar rate changes over a 12-month period, using a smooth curve to depict the trend and a green, semi-transparent fill beneath the line to emphasize the area. It demonstrates a D3 v5 implementation with an SVG rendering, drawing axes with orange ticks and blue labels, and uses `d3.scaleTime` and `d3.scaleLinear` for positioning, plus `d3.line` and `d3.area` with `curveBasis` for the shapes. The chart loads monthly data from a CSV file hosted on GitHub, showing the opening dollar price (DR) across time.

NNandini Maddula

77% match

Loading thumbnail…

area chart

This area chart displays yearly values loaded from a remote CSV file, using a steelblue filled path to visualize trends over time. Built with D3 v7, the code uses `d3.csv` to fetch data, `d3.scaleLinear` for both axes, `d3.area` to generate the area path, and `d3.axisBottom`/`d3.axisLeft` for the labeled axes. The SVG output includes custom margins, axis titles, and tick formatting.

Vvishnupriya eupuri

77% match

Loading thumbnail…

title

This visualization, built with D3.js and rendered as an SVG, shows a time-series area chart of bid data across multiple financial exchanges. The chart displays overlapping filled regions, with the x-axis representing time and the y-axis representing price or value, while a light gray rect at the top-right suggests a hover or selection area. The data, sourced from a gist by FergusDevelopmentLLC, is drawn using smooth path curves for each exchange, creating a dense, layered comparison of exchange activity over time.

WWill Carter

77% match