Arbie Hsu

@arbie333·4 public vizzes

line chart

This line chart displays monthly airline passenger load factors for six major airports, with each airport represented by a distinct colored line and a matching legend. The data, loaded from a CSV file, is parsed and grouped by airport using D3 v7’s data join and scales. The visualization uses `d3.scaleLinear` for axes, `d3.line` to generate SVG paths, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes. The SVG rendering approach is used throughout.

Feb 22, 2024

Loading thumbnail…

histogram by p5.js

This example visualizes the distribution of monthly airline delay totals across seven U.S. airports using a histogram. The p5.js script loads the `airline.csv` dataset, extracts the `Total` column, and groups values into ten bins to display the frequency of delay magnitudes. Bars are drawn as blue rectangles using p5.js `rect()` and `map()` functions onto an 800×600 canvas. The rendering is static, with the data loaded via `loadTable()` in the `preload()` lifecycle and drawn once in `setup()`.

Feb 7, 2024

Loading thumbnail…

bar chart

A grouped bar chart visualizes airline delay totals across six airports for each month of the year, with each airport’s monthly value rendered as a distinct bar. The chart uses D3 v7’s `d3.scaleBand` for the month categories on the x-axis and `d3.scaleLinear` for the delay magnitude on the y-axis, both fed by an external CSV file. SVG `rect` elements represent the bars, while `d3.axisBottom` and `d3.axisLeft` generate the corresponding axes. The data originates from the `airline.csv` file, containing airport, month, and total delay values.

Feb 4, 2024

Loading thumbnail…

Fork of Ama Charts.js

This example shows a weekly sales bar chart rendered with Chart.js. The visualization displays seven labeled days of the week with values from 18 down to 3, each bar distinguished by a unique color from the dataset's background and border arrays. The code loads the Chart.js UMD bundle from a CDN and creates a bar chart via the `Chart` constructor on a canvas element. It also configures a legend, title, and responsive sizing, while dynamically inserting the library's version into the page header.

Feb 1, 2024