Skip to main content
SimilarExport ZIP
100%

Fork of Assignment 6: Diverging Bar Chart with Color Legend

✓ Published1🌍 Public
Hhxu51@usfca.edu
Last edited Mar 4, 2025
Created on Mar 3, 2025

This visualization shows a diverging bar chart of carrier delays for various airports, with each bar colored by its deviation from the average delay. The chart uses a D3 v7 SVG rendering with a ColorBrewer RdBu diverging color scale applied through `d3.scaleDiverging`. A color legend is generated using the `d3.legend` library, displaying the deviation values. Data comes from a remote CSV file, where delays are parsed and deviations computed via `d3.mean`. Horizontal bars extend left or right from a zero baseline, and both axes are rendered with D3’s `d3.axisLeft` and `d3.axisBottom`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Assignment 6: Bar Chart with Color Legend

This example shows carrier delay counts for various airports in a bar chart, with each bar colored on a blue sequential scale to encode delay severity. The visualization loads data from a remote CSV file using `d3.csv`, then renders an SVG with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It uses ColorBrewer’s Blues palette via `d3.interpolateRgbBasis` to create the color mapping, and the `d3-legend` library’s `d3.legendColor` to display a matching color legend. Axis labels are rotated with SVG attributes, and bars use `d3.axisBottom` for x-axis ticks.

Hhxu51@usfca.edu
93% match
Loading thumbnail…

Assignment 6: Bar Chart with Color Legend

This example presents a bar chart of carrier delays by airport, with bars colored on a sequential blue scale and a corresponding color legend. The chart loads data from a remote CSV file using `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders rectangles in SVG. The color encoding uses `d3.scaleSequential` with `d3.interpolateBlues`, while the legend is generated via the `d3-legend` plugin’s `d3.legendColor`.

Hhxu51@usfca.edu
87% match
Loading thumbnail…

Assignment 6: Scatterplot with Color Legend

This D3.js v7 SVG scatterplot displays the relationship between the number of carrier delays and late aircraft delays at various airports, with each point colored by airport name using a ColorBrewer Set3 qualitative scale. The visualization encodes two quantitative variables along the axes and a categorical variable through color, with a manually constructed legend listing the 12 unique airports. The code loads CSV data from a remote GitHub repository, applies linear scales for both axes, and uses d3.axisBottom and d3.axisLeft for tick marks, while the d3-legend library is included but the legend items are appended manually as colored rectangles.

Hhxu51@usfca.edu
84% match
Loading thumbnail…

A6: Diverging Bar Chart

This example shows the number of delayed flights for 29 major U.S. airports, sorted from most to least delays, with each bar colored on a diverging purple-orange scale centered on the median value. The visualization uses d3.csv to load the data and d3.scaleBand, d3.scaleLinear, and d3.scaleSequential with the interpolatePuOr interpolator to map delays to bar height and color. Bars are rendered as SVG rect elements, and a color legend is generated via the d3-legend library’s legendColor function, with axes and labels added using d3.axisBottom and d3.axisLeft.

Rronnieferrufino4908@gmail.com
81% match
Loading thumbnail…

Assignment 6: Line Chart with Color Legend

This visualization displays average carrier values per airport category across years as a multi-line chart, with each of four categories drawn as a distinct colored line. The chart uses D3.js v7, loading data from a remote CSV file and aggregating it by year and category. It leverages D3’s `scaleLinear` for axes, `scaleOrdinal` with a ColorBrewer `Set2` palette for the categorical color scheme, and `d3.line` for path generation. An HTML/SVG legend, built via the d3-legend library, accompanies the plot, with axes and lines styled via CSS.

Hhxu51@usfca.edu
81% 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
80% match
Loading thumbnail…

A6 - Diverging Bar Chart in D3

This diverging bar chart compares average temperatures across cities, using a diverging color scale (blue to red) to show deviations from the mean baseline. The visualization renders as SVG via D3 v7, with bars extending left or right from the baseline depending on whether temperatures fall above or below average. It uses `d3.scaleDiverging` with `d3.interpolateRdBu` for coloring, `d3.scaleBand` for city categories, and a `d3.legendColor` legend. Data comes from a CSV file containing weather records, loaded with `d3.csv`, and the chart includes labeled axes and a title.

RRiya Mathur
78% match
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.

Ddale@benchmarking.com.au
77% match