Logan Weather data with Interactive Color Legend

100%

Logan Weather data with Interactive Color Legend

✓ Published1🌍 Public

Last edited Oct 21, 2019

Created on Oct 9, 2019

A scatter plot of weather and flight-delay data for Logan Airport from 2016-2018 visualizes the relationship between date, maximum temperature (TMAX), and average flight departure delay (DEP_DELAY). Interactive color legend circles for each year filter and highlight corresponding points when hovered, while unselected points fade to 20% opacity. The visualization uses React with D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) for axes, color encoding, and point sizing, rendering SVG circles with `circle` elements and tooltips via SVG `<title>` elements. Data is loaded as CSV from a GitHub gist.

AI-generated description

A scatter plot of Logan Airport Weather 2016-2018.

The size of point indicate the average delay of flights on this date.

Issues:

It looks kind of messy because of too many points.
When the legend is hovered, the points are highlighted, but meanwhile I cannot hover the points to check to tooltips.
Points of 2018 are always most clear because they are on the top.

MIT Licensed

Similar vizzes

Loading thumbnail…

Logan Weather data with Interactive Color Legend

This visualization presents daily weather delay data from Logan Airport in 2016 as an interactive ring chart. Each arc segment represents a day, with the radius encoding delay duration and color distinguishing weather severity levels using a categorical scale. An interactive color legend allows users to hover over severity categories, fading non-matching arcs. Built with React and D3 v5, the visualization uses `scaleTime` for angular positioning, `scaleLinear` for radial encoding, and `d3.arc()` for path generation.

Rrohame

89% match

Loading thumbnail…

Logan Airport Weather vs Delay

This visualization compares daily weather conditions at Logan Airport with flight departure delays in 2016. A scatter plot maps date against maximum temperature, with circle size representing delay magnitude and color indicating precipitation. A ring chart displays the same delay data as a radial bar chart over the full year. The visualization uses D3 v5 with `d3.csv` for the combined weather and flight data, `d3.scaleLinear` and `d3.scaleTime` for axes, and `d3.arc` for the circular bars, rendered as SVG elements.

Rrohame

86% match

Loading thumbnail…

Logan Airport Weather vs Delay

This visualization combines a scatter plot and a radial ring chart to compare daily weather conditions and flight delays at Logan Airport in 2016. The scatter plot uses circle size and color to represent delay duration and precipitation levels, while the radial bars show wind speed and encode weather severity through blue-to-red coloring. Built with D3.js v5, the views are linked so hovering over a data point highlights its counterpart in the other chart, with tooltips displaying the date and delay length. The data is loaded from a CSV file containing daily weather measurements and delay statistics.

Rrohame

85% match

Loading thumbnail…

Logan weather 2016-2018

This visualization plots daily maximum temperatures at Logan International Airport from 2016 to 2018 as a scatterplot, using month and day as the x-axis and temperature on the y-axis. Each point’s color encodes the max temperature value, while point size reflects daily precipitation amount, with tooltips revealing exact precipitation totals. The chart is built with Vega-Lite via the `vega-lite-api`, using `markCircle`, `fieldT`/`fieldQ` encodings, and a custom `config` for axis styling. Data is loaded asynchronously from a CSV using `d3.csv`.

Rrohame

85% match

Loading thumbnail…

Logan Airport Weather vs Delay

This scatter plot shows daily weather conditions at Logan Airport versus flight delay duration, with each circle representing a day. Temperature appears on the y-axis, date on the x-axis, circle radius encodes departure delay, and color indicates precipitation, using a blue interpolated scale. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, while loading CSV data via `d3.csv`. Precipitation values below 0.1 appear as pale gray circles, and hover tooltips display the delay value.

Rrohame

84% match

Loading thumbnail…

Logan Airport Weather vs Delay

A linked visualization explores daily weather conditions and flight delays at Logan Airport in 2016. A scatter plot maps wind speed against date, with circle size encoding departure delay and color indicating precipitation. A radial ring chart displays the same delay data as arcs, colored red for adverse weather or blue for normal conditions, with month labels positioned along the ring. Hovering over a scatter plot point highlights the corresponding arc in the ring chart, using D3 v5 with SVG rendering and data from a CSV file.

Ss-janibekova

84% match

Loading thumbnail…

Fork of Logan Airport Weather vs Delay

A linked-view dashboard explores the relationship between weather conditions and flight delays at Logan Airport in 2016. A scatter plot positions daily wind speed and precipitation against time, with circle size encoding delay magnitude and color indicating rainfall. A radial ring chart displays the same daily delays as arcs around a clock face, colored red for bad weather and blue for normal conditions. Hovering over a scatter plot circle highlights the matching radial bar and shows a tooltip with the date and delay value. The visualization uses D3 v5, including `d3.scaleTime`, `d3.arc`, `d3.lineRadial`, and a linear color interpolator to map weather severity.

CChengwei Ye

84% match

Loading thumbnail…

Logan Airport Weather vs Delay

This example correlates daily weather conditions at Logan Airport with flight departure delays. A scatter plot displays maximum temperature on the y-axis, date on the x-axis, and encodes precipitation through color and delay magnitude through circle radius. A separate ring chart shows the same delay data as a circular line and bar plot. The visualization uses d3.csv for data loading, d3.lineRadial for the ring line, and d3.arc for radial bars, all rendered as SVG with D3 v5.

Rrohame

83% match