Flight count on Origins

100%

Flight count on Origins

✓ Published2🌍 Public

Last edited Sep 18, 2019

Created on Sep 8, 2019

This interactive scatterplot visualizes the number of flights aggregated by origin airport, with each point representing a single origin and its count on the y-axis. The code uses Vega-Lite API to define the markCircle encoding, while the underlying data is loaded via d3.csv from a GitHub-hosted itinerary dataset. The visualization is rendered in an SVG canvas using vega and vega-lite, with tooltip support provided by vega-tooltip. Axes are customized through a config object that removes domains and adjusts label and title font sizes for readability.

AI-generated description

Visualize my number of flights in this decade aggregated by origin. Dataseet is here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Flight count by year

This line chart displays the number of flights per year from a personal itinerary dataset. Styled with a bold orange stroke, the visualization aggregates flight counts by year, with tooltips showing the total. Built using Vega-Lite and rendered through the vega-lite-api, the chart loads data from a remote CSV via `d3.csv`, applies a custom configuration for axis and label styling, and fits its dimensions to the window.

Rrohame

77% match

Loading thumbnail…

Top 15 Airports w.r.t. Origin using React+D3

This visualization displays the top 15 airports by origin, ranked by flight count in descending order, with each airport color-coded and labeled by IATA code. The chart aggregates flight delay data from a CSV source using D3’s `csv` loader, then applies Vega-Lite transforms for filtering, grouping, counting, and ranking before rendering with React. Customized D3 axes are visible, and the visualization updates dynamically to fit the window size. The code integrates React, D3 v5, Vega-Lite, and Vega-Tooltip for interactive hover details.

JJosvin John

74% match

Loading thumbnail…

Name,Gender, Total Flights

This example visualizes airline passenger data by country, gender, and total flights. A scatterplot encodes country on the x-axis, total flights on the y-axis, and uses circle size to represent flight counts, with gender distinguishing color and tooltips revealing passenger names. The visualization uses vega-lite-api to construct the specification, with vega and vega-lite rendering the chart, while d3.csv loads the dataset from a GitHub repository. The config module customizes axis and label styling for improved readability.

Mm1k3yp

72% match

Loading thumbnail…

Vega-Lite FLights by Country

This visualization shows the number of flights per country as a bar chart, with each bar colored by country and sized proportionally to the flight count. It uses the Vega-Lite API to encode the data, with country on the x-axis and an aggregated count of flights on the y-axis, displayed as bars with a fixed size and full opacity. The data is loaded asynchronously via d3.csv from a raw GitHub dataset, and the chart is rendered to SVG using the Vega-Lite runtime with a custom config for axis styling and tooltip support.

Mm1k3yp

71% match

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each origin airport

This interactive donut chart visualizes the percentage of flights delayed relative to departure for each origin airport, with color saturation indicating the proportion of total delays. Hovering over a slice reveals the exact percentage of delay attributed to that airport in a tooltip. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate the donut slices and `scaleOrdinal` for color mapping. Data comes from a Flight Delay Analysis dataset, loaded via `d3.csv` and aggregated using `d3.nest`.

JJosvin John

69% 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

69% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

YYodae Lim

67% match

Loading thumbnail…

Top 15 Destination Airports

This bar chart displays the top 15 destination airports by flight count, using IATA codes on the y-axis and a linear scale for the number of departures on the x-axis. It highlights the most popular destination (ORD with 897 flights) and the least popular in the top 15 (BOS with 46 flights). Built with D3 v5, the visualization uses `d3.csv`, `d3.nest`, `scaleLinear`, `scaleBand`, and `axisBottom`/`axisLeft` to generate an SVG, with interactive tooltips shown on hover. Data comes from a Flight Delay Analysis Dataset hosted in a GitHub gist.

JJosvin John

67% match