dale@benchmarking.com.au

@benchmarkingdale·3 public vizzes

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.

Aug 15, 2025

Loading thumbnail…

Fork of A7: Line Chart

This multi-line chart shows the average horsepower of cars from Audi, BMW, Toyota, and Ford between 2010 and the latest available year in the dataset. It uses d3.csv to load car data from a GitHub gist, d3.rollup to group and average values by year and manufacturer, and d3.scaleLinear with d3.line to draw the series. A legend is rendered using the d3-legend plugin, while d3.axisBottom and d3.axisLeft display the time and horsepower scales on an SVG canvas.

Aug 15, 2025

Loading thumbnail…

Fork of A7-Multi-Line Chart in D3

This multi-line chart displays monthly flight delay counts for four delay categories—carrier, late aircraft, national aviation system, and weather—across airports. It loads CSV data from a GitHub gist using `d3.csv`, then renders paths via `d3.line` with a `d3.scaleBand` x-axis and `d3.scaleLinear` y-axis. Color-coded lines and a manual legend distinguish categories, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The SVG output uses D3 v6 with the d3-legend library.

Aug 15, 2025