Loading Data Airline Loyalty

100%

Loading Data Airline Loyalty

✓ Published0🌍 Public

Last edited Aug 31, 2025

Created on Aug 31, 2025

This example demonstrates asynchronous data loading with D3 v7 by fetching an airline loyalty program CSV from Kaggle and displaying the parsed data as JSON. The visualization initially shows a loading state before `fetch()` retrieves the file and `csvParse` converts it into an array of objects. Numeric fields like Salary, CLV, and enrollment dates are coerced using unary plus operators. The `viz` function manages the render cycle through a state object, updating the displayed data once the loading completes.

AI-generated description

Airline Loyalty Program History: contains information about customer activity and demographics related to an airline's loyalty program, including a promotional campaign aimed at enhancing program enrollment.

The airline implemented a promotional campaign (2018 Promotion) aimed at enhancing program enrollment. The dataset encompasses information regarding:

Customer flight activity and loyalty points
Program signups and enrollment details
Cancellations within the loyalty program
Comprehensive customer demographics

Contains geospatial, temporal, numeric and categorical information about each customer.

https://www.kaggle.com/datasets/siddharth0935/airline-loyalty-program/data

Attribute	Type	Classification	Description
Loyalty Number	Quantitative	Not Data, randomly gen	Unique numeric ID per customer.
Country	Categorical	Nominal	Customer’s country of residence.
Province	Categorical	Nominal	Province/state of residence.
City	Categorical	Nominal	City of residence.
Postal Code	Categorical	Nominal	Postal or ZIP code.
Gender	Categorical	Nominal	Gender of the customer (e.g., Male, Female).
Education	Categorical	Ordinal	Highest education level (High School < College < Bachelor < Master < Doctor).
Salary	Quantitative (Continuous)	Ratio	Annual income of the customer.
Marital Status	Categorical	Nominal	Marital status (e.g., Single, Married, Divorced).
Loyalty Card	Categorical	Ordinal	Tier of loyalty card (Star > Nova > Aurora).
CLV	Quantitative (Continuous)	Ratio	Total revenue (invoice value) from all flights ever booked by the customer.
Enrollment Type	Categorical	Nominal	How the customer enrolled (Standard or 2018 Promotion).
Enrollment Year	Quantitative (Discrete)	Interval	Year the customer enrolled.
Enrollment Month	Quantitative (Discrete)	Interval	Month the customer enrolled.
Cancellation Year	Quantitative (Discrete)	Interval	Year the customer canceled membership (if applicable).
Cancellation Month	Quantitative (Discrete)	Interval	Month the customer canceled membership (if applicable).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Loading Data

This example demonstrates the asynchronous loading of airline flight data from a CSV file, displaying the parsed contents as a JSON string in a preformatted text element. The visualization uses D3 v7’s `csvParse` method to convert the raw text into an array of objects, with numeric fields explicitly coerced to numbers. The code manages a state machine—starting as undefined, transitioning to `'LOADING'`, then resolving to the final dataset—by fetching `data.csv` via the Fetch API and updating the DOM through `select` and `.join` methods. The data source is a Kaggle dataset of airline flights, though the included file uses iris sample data for demonstration.

EEmily Hudson

84% match

Loading thumbnail…

Loading Data 3

This example demonstrates how to load and display CSV data from either a local file or a remote source using D3 v7's `csvParse` and `fetch` APIs. It presents a file input that lets users choose a CSV file, while also automatically loading a default `plane.csv` dataset containing airline flight information. The parsed data is rendered as a JSON-formatted text preview inside a `<pre>` element, with all numeric columns converted to numbers during parsing. The visualization updates dynamically whenever new data is loaded.

AAbhi Yammanuru

79% match

Loading thumbnail…

loading_data_NH_2

This example demonstrates asynchronous data loading with D3 v7, displaying the contents of a CSV file as formatted JSON text in a pre element. It uses `fetch()` to retrieve `data.csv`, `csvParse` from D3 to convert the raw CSV string into an array of objects, and then iterates through the parsed data to coerce the numeric columns (`sepal_length`, `sepal_width`, `petal_length`, `petal_width`) from strings to numbers. The visualization implements a unidirectional data flow where a `setState` function updates the application state, triggering a re-render that initially shows "LOADING" before the fetched data appears.

NNavak94

76% match

Loading thumbnail…

Loading Data

This example demonstrates how to load and parse a CSV file in D3.js, displaying the Iris dataset as formatted JSON text in a `<pre>` element. The visualization initially shows a "LOADING" state, then fetches `data.csv` via the Fetch API and parses it using `d3.csvParse`. The code explicitly converts string measurements into numbers for all four numeric columns. State management is handled through a simple `setState` pattern, where the `viz` function checks whether data is loaded, triggers the asynchronous fetch, and re-renders once the parsed array of objects is available.

CCurran Kelleher

75% match

Loading thumbnail…

Loading Coffee Data

This example demonstrates a simple data-loading workflow for an Arabica coffee quality dataset sourced from Kaggle. It fetches a CSV file and parses it with `d3.csvParse`, displaying the resulting array of objects as raw JSON in a `<pre>` element. The visualization tracks loading states—showing `undefined`, `'LOADING'`, or the parsed data—through a state management pattern using `select` and `join`. The code explicitly uses D3 v7’s `select`, `csvParse`, and the `join` method to handle DOM updates.

SSpencer McAvey

75% match

Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in a D3.js visualization. The code fetches a CSV file containing the classic Iris flower dataset, parses it, and displays the raw JSON-formatted data prominently as the primary output. The visualization progresses through distinct states—starting with undefined, transitioning to a "LOADING" message, and finally populating with the parsed array of objects. It uses D3's `select`, `join`, `csvParse`, and a state management pattern with `setState` to control the rendering and handle the fetch-and-parse pipeline.

Sskasliwal@wpi.edu

74% match

Loading thumbnail…

Loading Data - Coffee

A D3.js example demonstrates asynchronous data loading from a CSV file. It displays the raw parsed dataset as JSON in a `<pre>` element, showing coffee purchase records with fields like time of day, coffee type, and price. The visualization uses `d3.csvParse` to convert the CSV text, then explicitly coerces numeric columns like `hour_of_day` and `money` to numbers. State management tracks loading status, transitioning from undefined to `'LOADING'` to the final array of objects via `fetch` and promises.

MMatt Hagger

74% match

Loading thumbnail…

Fork of Loading Data - Lifestyle Health

This visualization demonstrates how to load and parse a CSV dataset using D3 v7, displaying the raw parsed data as JSON in a `<pre>` element. The example uses `csvParse` to convert survey data about lifestyle and health metrics, explicitly coercing numeric fields with the unary `+` operator. A state management pattern handles asynchronous data loading, showing a 'LOADING' placeholder before the fetched dataset appears. The code relies on `select` and `join` to render the data, sourced from a Kaggle dataset on disease risk from daily habits.

BBrian Hulbert

74% match