Skip to main content
SimilarExport ZIP
100%

Assignment 6: Scatterplot with Color Legend

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

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.

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

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

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Hhxu51@usfca.edu
79% match
Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Hhxu51@usfca.edu
79% match
Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the relationship between carrier delays and late aircraft delays using a scatter plot of flight data from a CSV file. Each red circle represents a data point, with tooltips displaying the exact delay values on hover. The visualization is built with D3.js (v7), using `d3.csv` for data loading, `d3.scaleLinear` for axes scaling, and `d3.axisBottom`/`d3.axisLeft` for rendering the chart axes.

Hhxu51@usfca.edu
79% match