Fork of Stacked area chart

100%

Fork of Stacked area chart

✓ Published0🌍 Public

Ddale@benchmarking.com.au

Last edited Aug 15, 2025

Created on Aug 15, 2025

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.

AI-generated description

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

82% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays a time series of temperature data, rendered as a line chart that switches between a refined line and a filled area representation. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.scaleTime` to map data to SVG coordinates, with `d3.area` for the area chart. Users can brush horizontally to zoom into the data, which triggers a level-of-detail reduction that switches between raw data points and aggregated min/max ranges, with circles drawn at high zoom levels.

RRajat Dangat

80% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over time, mapping the data to a line drawn with a smooth natural curve using D3’s `line` and `curveNatural`. The React app uses `scaleLinear` for both axes and renders the visualization as SVG, with reusable `AxisBottom` and `AxisLeft` components generating gridlines and labels. The data comes from a CSV of weekly San Francisco temperatures, though the chart hardcodes a static list of numeric values for the y-axis and uses an index-based x-axis.

Llhikarul

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This chart displays the temperature over time in San Francisco, using data loaded from a CSV file of the Data Canvas Sense Your City dataset. A single black line traces the temperature’s changing values across a week, while an interactive circle—commented out in the code—would reveal the exact time on hover, though it is not rendered here. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the axes and a custom curve, `curveNatural`, to smooth the line path. The axes are drawn via the `AxisBottom` and `AxisLeft` components, which create tick marks and labels, and the styled line (`stroke: #137B80`, width 4) is embedded in an SVG. The chart is part of a fork of a stylized line chart example, with a clean, minimal design that prioritizes the data’s trend.

MMatt Lean

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature over time using data from the Data Canvas Sense Your City dataset, specifically weekly temperature readings for San Francisco. The SVG rendering employs React components and d3.scaleTime, d3.scaleLinear, and d3.extent to map timestamps and temperature values onto a Cartesian grid. A single black path, generated through d3.line, traces the temperature trend, while the axes are constructed from d3.scaleTime.ticks and d3.scaleLinear.ticks. The chart omits data point markers, focusing solely on the smoothed line, with Poppins typography and muted color styling.

Ssayedmhasan110@gmail.com

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature over time for a week in San Francisco, using a smooth natural curve rendered as a filled SVG area. The visualization relies on React for component structure and D3 v5 scales (scaleTime, scaleLinear) and shapes (area, curveNatural) to map data. Axes are built with custom React components using D3’s scale ticks. The dataset is loaded as CSV from a GitHub gist via d3.csv.

CCheng Tang

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This chart visualizes temperature fluctuations over a week in San Francisco, combining a stylized line graph with a translucent shaded area beneath the curve for emphasis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, while `area()` and `line()` from D3, paired with `curveNatural`, create the smooth path. The SVG rendering is populated from CSV data fetched via `csv` from a Gist.

MMohamed Nehad Shalabi

79% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature over time for a week in San Francisco, using the Data Canvas Sense Your City dataset. The React application, built with D3 v5, renders an SVG with a time-scaled x-axis and a linear y-axis, and draws a smooth, natural cubic curve through the data points via D3's line and curveNatural functions. The chart includes styled gridlines, axis labels, and a Poppins font, with circular data markers commented out in the code.

Jjmeeks29ig

79% match