Assignment 10: histogram graph Black Hat

100%

Assignment 10: histogram graph Black Hat

✓ Published1🌍 Public

Last edited Apr 24, 2025

Created on Apr 24, 2025

Forked from Assignment 4: histogram graph with D3

A histogram visualizes the distribution of National Aviation System delays from a filtered airlines CSV dataset, revealing that delays cluster at low values with a few extreme outliers. Red bars represent bin counts, with hover tooltips showing exact ranges and frequencies. The chart uses D3.js v7 with `d3.histogram()`, `d3.scaleLinear()`, and `d3.axisBottom()`/`d3.axisLeft()`. Four d3-svg-annotation elements, including labels, callout circles, elbows, and rectangles, highlight peak delay zones and pose critical questions about systemic mismanagement.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 10: histogram graph White Hat

This histogram visualizes the distribution of National Aviation System delays using a steelblue bar chart with 20 uniform bins. The chart includes four black annotations that explain design choices, such as the zero-based y-axis, equal bin widths, neutral color palette, and interactive tooltip functionality. Built with D3 v7 and d3-svg-annotation, it renders SVG bars with hover tooltips displaying exact range values and counts. The visualization uses CSV data loaded from a GitHub repository, featuring enlarged margins and clear axis labels to ensure readability.

Hhxu51@usfca.edu

92% match

Loading thumbnail…

Assignment 4: histogram graph with D3

This histogram visualizes the distribution of National Aviation System delays, using a neutral steelblue color palette to present the data objectively. It plots the number of flights across delay ranges for a filtered airlines dataset, with the y-axis starting at zero to avoid exaggerating differences. The visualization is built with D3 v7, using d3.csv to load the data, d3.histogram to bin values, and d3.scaleLinear for both axes. D3 annotations add callout labels explaining design choices like consistent bar widths, while a hover tooltip provides interactive detail.

Hhxu51@usfca.edu

89% match

Loading thumbnail…

Assignment 4: Bar Chart with D3

This bar chart visualizes the top 10 airports ranked by total carrier delay minutes, using a logarithmic y-scale to accommodate wide value ranges. The visualization loads CSV data via `d3.csv`, aggregates values with `d3.rollup`, and renders SVG bars using `d3.scaleLog` and `d3.scaleBand`. Interactive tooltips appear on hover, displaying the airport code and delay count, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Hhxu51@usfca.edu

79% match

Loading thumbnail…

Assignment 10: Fixed A3 box plot

This example presents a horizontal box plot of National Aviation System delay counts, drawn with D3.js v7 and rendered as SVG. It visualizes the distribution of delays through a box spanning the interquartile range, whiskers, median line, and steel-blue outlier circles. The chart starts its x-axis at zero for accurate proportional comparison, as noted in an annotation. Using `d3.csv`, `d3.quantile`, and `d3.axisBottom`, the code computes summary statistics and plots them. English annotations, created with the `d3-svg-annotation` library, label the origin, IQR, median, and outliers, while the data comes from a remote CSV file.

Hhxu51@usfca.edu

79% match

Loading thumbnail…

Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay data, mapping the number of late aircraft delays on the x-axis, national aviation system delays on the y-axis, carrier delays as bubble size, and month as color. Built with D3 v7, the chart uses SVG and includes interactive tooltips that display airport details on hover. The code loads data from a CSV file, filters out zero values, and applies scales including `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with a categorical color scheme. Axis labels and a legend are rendered using standard D3 components, with a `d3.legend` library for the color key.

Hhxu51@usfca.edu

78% match

Loading thumbnail…

Assignment 5: line chart with D3

This line chart visualizes monthly airline delay counts from June 2003 to July 2016, comparing three delay types: Carrier, Late Aircraft, and National Aviation System delays. The chart uses a time scale for the x-axis spanning over 13 years, with data points horizontally offset within each month to reduce overlap. Built with D3 v7, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders SVG paths using `d3.line` with monotone curve interpolation. Interactive tooltips appear on mouseover, and axes use `d3.axisBottom` with custom month formatting.

Hhxu51@usfca.edu

77% match

Loading thumbnail…

A3 histogram gragh

This p5.js visualization displays a histogram of airline carrier delay counts, loaded from a remote CSV file hosted on GitHub. The sketch uses `loadTable()` to fetch the data before drawing, then computes 10 bins from the delay values and renders them as blue rectangles on a canvas with grid lines and labeled axes. Tooltips reveal exact counts when the mouse hovers over each bar. The x-axis labels carrier delays while the y-axis shows the number of delays, with axis titles rotated via `translate()` and `rotate()`.

Hhxu51@usfca.edu

76% match

Loading thumbnail…

Assignment 4: scatter plot with D3

This scatter plot visualizes the relationship between carrier delays and late aircraft delays using flight data loaded from a remote CSV file. Red circles represent individual data points, with axes labeled for each delay type and interactive tooltips appearing on hover to show exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and mouse event handlers for tooltip interactions.

Hhxu51@usfca.edu

76% match