Skip to main content
SimilarExport ZIP
100%

Flight Widget

✓ Published0🌍 Public
AAlex-0277911
Last edited Oct 16, 2022
Created on Oct 16, 2022
Forked from HTML Starter

This widget displays a live departure board for an airport, showing flight times, destinations, flight numbers, gates, and remarks in a table. The code uses plain DOM manipulation to populate the table body, with no external visualization libraries. Styling relies on CSS, importing the Ubuntu Condensed font and applying a dark table theme against a peach background. The data appears to be static, as the JavaScript file updates the table without any visible data source or animation logic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Flight widget

A flight departure board displays scheduled flights with time, destination, flight number, gate, and remarks, updating every five seconds. The animation flips each character individually using a CSS keyframe rotation. The app uses vanilla JavaScript with `setInterval` and `setTimeout` to shuffle flight data, generating random letters and numbers for new entries. Rows are populated dynamically via `createElement` and appended to the table body, while the split-flap effect is achieved purely with CSS transforms.

AAlex-0277911
84% match
Loading thumbnail…

Departures board

This visualization simulates a split-flap departure board, displaying three rotating rows of city names with a yellow-on-black aesthetic. Each letter flips sequentially through the alphabet until it reaches its target, mimicking the mechanical clatter of a real airport display. The code uses D3 v4’s selection, data binding, queue, and timer APIs to manage letter transitions, while CSS 3D transforms and keyframe animations create the flip effect. An `animationiteration` event triggers the next letter change, and a shuffle process cycles through a hardcoded list of city names.

FFrissAnalytics
64% match
Loading thumbnail…

Interactive Dashboard showing various charts

This interactive dashboard presents a multifaceted analysis of flight delays using several D3.js charts. It includes a horizontal bar chart showing the top 15 destination airports by flight frequency, a stacked bar chart detailing average delay times and reasons for various airlines, and four donut charts that display the percentage of flights delayed (more or less than 15 minutes) by arrival, departure, airline, and origin airport. Built with D3 v5, the visualizations render as SVGs and incorporate interactive tooltips for detailed data inspection, with data sourced from a Flight Delay Analysis dataset.

JJosvin John
62% match
Loading thumbnail…

Fork of Interactive Dashboard showing various charts

This interactive dashboard visualizes flight delay data from a GitHub-hosted CSV, combining six charts into a single view. It shows the top 15 destination airports by flight count, a stacked bar chart of average departure delay times per airline colored by cancellation reason, and four donut charts breaking down departure and arrival delays by airline and airport. The donut charts use `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, with tooltips displaying percentage values. The bar charts rely on `d3.scaleBand` and `d3.scaleLinear`, while all visuals are rendered as SVG with D3 v5.

AAamir Hameed mir
61% match
Loading thumbnail…

Router

This visualization presents flight routing options between airports on an interactive map, with a side panel displaying a Gantt-style chart of the journey's timeline for each route. It highlights the two flight legs and layover durations for connections, such as from Atlanta to Cork. The map is rendered using the layered map component with WebGL, while the timeline uses the Column chart with time-based axes. The application dynamically loads airport data from a CSV file and uses the ESP connection API to fetch flight data, with a pre-canned demo fallback.

GGordonSmith
61% match
Loading thumbnail…

Departures board

A D3.js split-flap departure board cycles through city names on a black background, with each letter animating through an infinite CSS rotation via `animationiteration` events. The board advances through a shuffled list of cities, updating three rows of flaps per cycle using `d3.select` and `d3.queue`. Text and styling come from a Google Fonts "Roboto Condensed" typeface, while the flip effect relies on `@keyframes` `flipFront` and `flipBack` transforms, with timing accelerated by a "fast" class.

FFrissAnalytics
60% match
Loading thumbnail…

Weather data with Menu

The visualization displays daily temperature, precipitation, and flight departure delay data from a combined Logan Airport weather dataset. Temperature appears as colored circles, with precipitation intensity mapped through a blue color scale, while departure delays form a yellow line plotted against a secondary y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.axisRight to construct the chart, with d3.line generating the delay path. Data is loaded asynchronously via d3.csv from a GitHub gist, and all elements render as SVG within a D3 v5 framework.

Rrohame
60% match
Loading thumbnail…

Top 15 Airports w.r.t. Departures

This bar chart ranks the top 15 destination airports by number of departing flights, using IATA codes on the y-axis and flight counts on the x-axis. Each airport is color-coded, and a tooltip displays the exact airport code and flight count on hover. Built with Vega-Lite and D3 v5, it processes flight delay data from a CSV file, aggregating and filtering to isolate the top destinations. Custom axis styling, including tick color and font sizes, improves readability.

JJosvin John
60% match