Skip to main content
SimilarExport ZIP
100%

Stacked area chart

✓ Published1🌍 Public
YYashwanth0311
Last edited Apr 14, 2024
Created on Apr 14, 2024
Forked from 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.

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 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.

YYashwanth0311
87% match
Loading thumbnail…

Temperature in Vancouver Line Chart

This line chart visualizes a month of hourly temperature data in Vancouver, sourced from climate.weather.gc.ca. The D3.js v5 code uses `scaleTime` and `scaleLinear` to map timestamps and temperatures, with `axisLeft` and `axisBottom` generating grid lines. A smooth `curveBasis` line, rendered via an SVG path, connects the data points, emphasizing the temperature trend over time. The chart includes labeled axes and a title, with the data parsed from a remote CSV file.

Ssriramvsharma
76% match
Loading thumbnail…

ICE 7 Area Chart

This visualization displays the average temperature of Vancouver from 2010 to 2020 as a smooth line chart with a gradient-filled area beneath the curve. The y-axis shows temperature in Kelvin with a truncated format, while the x-axis represents years. Built with D3.js v5, it uses `scaleTime`, `scaleLinear`, `line`, and `area` generators with a `curveBasis` interpolation. Data is loaded from a CSV via `d3.csv`, and the area is filled using an SVG linear gradient transitioning from solid purple to transparent.

YYashwanth0311
76% 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
76% match
Loading thumbnail…

Temperature in Vancouver Scatter Plot

This scatter plot displays a month of hourly temperature readings in Vancouver, with each circle representing a measurement over time on the x-axis and degrees Celsius on the y-axis. It uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load data from a remote GitHub-hosted file. Circles are appended as SVG elements with a hover tooltip showing the exact temperature. The chart includes axis labels and a title, with data sourced from the Canadian government’s climate weather site.

Ssriramvsharma
76% match
Loading thumbnail…

area chart

A temperature area chart visualizes monthly temperature variations with a single filled area. The chart uses D3 v6 to load a CSV dataset via d3.csv and renders an SVG path using the d3.area generator, with d3.scalePoint and d3.scaleLinear handling the axes. The x-axis labels are rotated for readability, and axis labels for “Month” and “Temperature (°C)” are added. The area is filled in steelblue, providing a clear view of the data’s overall trend.

Rreddyharshi08@gmail.com
75% match
Loading thumbnail…

Fork of Temperature in Vancouver Line Chart

This line chart displays hourly temperatures in Vancouver over a month, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render a smooth curved path through the data points. The chart includes axis labels, a title, and horizontal gridlines, with the temperature data sourced from a CSV file hosted online. The SVG rendering is styled with custom CSS for the line, ticks, and text elements.

MMohit
75% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of area chart

This example displays two side-by-side area charts showing temperature and pressure data for a selected city and year. A dropdown menu lets viewers choose between Bangalore, Vancouver, and San Francisco for the years 2020 through 2022. The charts are drawn on Canvas elements using the Chart.js library, with temperature plotted as a single red-tinted dataset per chart. The visualization relies on hardcoded JavaScript objects containing the monthly data values for each city and year combination.

YYashwanth0311
75% match