Skip to main content
SimilarExport ZIP
100%

Stacked area chart

✓ Published2🌍 Public
YYashwanth0311
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from Fork of area chart

This stacked area chart shows monthly temperature variation in San Francisco across three years (2020, 2021, 2022), with each year’s series filled using a linear gradient. It is rendered on a canvas using Chart.js, with tooltips, a legend, and zoom/pan enabled via the chartjs-plugin-zoom. The chart includes labeled axes for month and temperature, and the datasets are defined as arrays in script.js, with fill enabled on line elements.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked area chart

This stacked area chart displays monthly temperature variations in Vancouver across three years (2020–2022), with each year represented as a distinct color-coded layer. The Chart.js library renders the visualization on a canvas, using linear gradients for area fills and enabling interactive zoom via the chartjs-plugin-zoom extension. Tooltips, a bottom legend, and labeled axes for month and temperature enhance readability of the multi-series comparison.

YYashwanth0311
87% match
Loading thumbnail…

Fork of Stacked area chart

This fork of a Chart.js line chart renders monthly temperature variations across three years as a stacked area chart, with the chart type set to `line` and line filling enabled. The code defines a custom `gradientColor` function using Canvas’ `createLinearGradient` to generate per-dataset area backgrounds. It includes interactive features via the `chartjs-plugin-zoom`, enabling wheel and pinch zooming in both x and y dimensions, plus tooltips and a bottom legend. The chart is drawn on a canvas inside an HTML container, with sample data hardcoded for San Francisco.

Ddale@benchmarking.com.au
82% match
Loading thumbnail…

Area Chart

This area chart displays daily temperature readings in San Francisco, filled with a maroon gradient beneath a smooth curved line. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values, with axes generated by d3.axisBottom and d3.axisLeft. d3.area with the curveBasis interpolation shapes the filled region. Data loads from a CSV file hosted on VizHub, and the SVG rendering includes labeled axes and a title.

Jjeelong
80% match
Loading thumbnail…

Area Chart

This area chart visualizes temperature in San Francisco over time, with a gradient-filled path showing the trend and labeled axes for date and temperature. The visualization is built with D3 v6, using `scaleTime` and `scaleLinear` for the scales, `area()` with `curveBasis` to generate the smooth area path, and `axisBottom` and `axisLeft` for the gridlines. Data is loaded from a CSV file via `csv()`, and the SVG rendering includes custom gradients defined in the markup.

SSharvariPhadke
79% match
Loading thumbnail…

Area Chart

This area chart depicts a week of temperature readings in San Francisco, showing how the y-axis maps temperature and the x-axis maps date and time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `area()` with `curveBasis` to generate the filled path, and `axisBottom`/`axisLeft` for gridlines. Data comes from a CSV file of San Francisco temperatures, loaded via `csv`, with circles overlaid on the area to highlight individual measurements.

MMunTatt Yap
79% match
Loading thumbnail…

Area Chart by Davide.js

This area chart visualizes temperature variations in San Francisco over one week, using data from DATA CANVAS: sense your City. The SVG rendering employs D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create a smooth filled path, with axes annotated via `axisLeft` and `axisBottom`. Data is loaded as CSV and parsed into timestamps and numeric temperatures.

DDavideSanto
79% match
Loading thumbnail…

Area Chart

This area chart displays a week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis, using a smoothed, filled path to convey the trend. The visualization, built with D3 v5 and rendered as SVG, applies a basis curve to the area generator for a fluid line and fills the shape in maroon with transparency. A CSV file provides the data, loaded asynchronously, while axis tick marks extend across the plot for grid-like reference, and both axes are labeled. The title appears at the top, with styling handled via an external stylesheet.

ZZ-Richard
79% match
Loading thumbnail…

Area Chart

This area chart visualizes temperature readings in San Francisco over time, using a smooth curved path filled with maroon to highlight the trend. The visualization relies on D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to generate the SVG path. Data is loaded from a CSV file via `csv()`, with timestamps parsed as dates and temperatures as numbers. Grid lines extend across the chart, and axis labels and a title are rendered as SVG text elements.

MMatthew Rubino
79% match