Skip to main content
SimilarExport ZIP
100%

Assignment 6: Line Chart with Color Legend

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

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.

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
84% 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…

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

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.

AArbie Hsu
82% 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
81% match
Loading thumbnail…

A7 Multi-Line Chart

This multi-line chart visualizes average annual flight delays across four airline categories using CSV data from a GitHub-hosted airlines dataset. The visualization employs D3.js v7 with SVG rendering, displaying four distinct colored lines with interactive circle markers. The chart uses d3.scaleLinear, d3.line, and d3.axisBottom, while implementing hover-based tooltips to reveal specific year and delay values. ColorBrewer provides the categorical color scheme for distinguishing between airline groups.

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

D3 Line Chart with Multiple Lines

This example displays temperature readings from multiple cities over time as smoothed, multi-hued lines, with a color legend identifying each city. It uses the D3 v5 library, building the chart with SVG and relying on `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map data. Data is loaded from a CSV file, and lines are generated using `line` with `curveBasis`, while axes use `axisBottom` and `axisLeft`. The visualization also employs a custom `colorLegend` function to render the categorical color key.

JJunilo Pagobo
75% match