Skip to main content
SimilarExport ZIP
100%

Fork of Assignment 6: Bar Chart with Color Legend

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Fork of Assignment 6: Diverging Bar Chart with Color Legend

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`.

Hhxu51@usfca.edu
93% 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
85% 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
84% match
Loading thumbnail…

A6: Sequential Bar Chart

This example shows the number of delayed flights for each US airport, with bars colored on a blue sequential scale to highlight the magnitude of delays. A vertical bar chart plots airport codes on the x-axis and delayed flight counts on the y-axis, with higher values rendered in darker blues. The visualization is built with D3 v6, using `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric range, and `d3.scaleSequential` with `d3.interpolateBlues` for color encoding. Data is loaded from a CSV file via `d3.csv`, and a color legend is added using the `d3-legend` library with threshold labels.

Rronnieferrufino4908@gmail.com
80% 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

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
79% match
Loading thumbnail…

Fork of Fork of Assignment 6: Line Chart with Color Legend

This visualization displays car fuel economy data as a horizontal bar chart, with each bar colored on a blue sequential scale according to its miles-per-gallon value. The visualization loads data from a CSV file and renders animated bars that grow from zero width, using d3.scaleBand and d3.scaleLinear for positioning and a d3.scaleSequential with d3.interpolateBlues for color encoding. It includes a color legend built with d3-legend and a linear gradient, plus interactive tooltips and value labels shown via d3 transitions.

NNita
77% match