Loading Data Online Furniture Sales

100%

Loading Data Online Furniture Sales

✓ Published0🌍 Public

Last edited Aug 31, 2025

Created on Aug 31, 2025

This example demonstrates the process of loading a JSON dataset through a simple asynchronous workflow. The visualization begins with an undefined state, transitions to a "LOADING" indicator, and finally displays the parsed data as formatted JSON text. The code uses `fetch` to retrieve the file and the D3.js selection API (`select`, `.join`) to bind and render the data into a `<pre>` element. The underlying dataset, an online furniture retail dataset, includes information about product categories, pricing, delivery status, and customer ratings, available within the gallery’s example files.

AI-generated description

Online Furniture Retailer Data: comprehensive synthetic dataset tailored for online furniture retail analytics. This dataset captures real-world scenarios across product pricing, delivery windows, shipping logistics, assembly services, payment behavior, and customer satisfaction—ideal.

Key features

1,938 rows, 14 columns
~60% numerical, ~40% categorical for balanced analytics
Realistic furniture categories, brands, and delivery statuses
Delivery windows (1–14 days), shipping and assembly cost logic
Optional assembly services with complexity-based pricing
Customer ratings with natural sparsity for real-world analysis

https://www.kaggle.com/datasets/pratyushpuri/online-furniture-orders-delivery-and-assembly-2025/data

Column	Type	Description
order_id	Quantitative	Unique order identifier per transaction.
customer_id	Quantitative	Unique customer identifier for cohort and LTV analysis.
product_category	Categorical	High-level category (Living Room, Bedroom, Dining Room, Office, Kitchen, Outdoor).
product_subcategory	Categorical	Specific item type (e.g., Sofa, Bed Frame, Desk, Patio Set).
brand	Categorical	Furniture brand (e.g., IKEA, West Elm, Pottery Barn). May contain nulls.
product_price	Quantitative	Base product price in USD, ranges tuned by category.
shipping_cost	Quantitative	Shipping fee; free or reduced for higher price points. May contain nulls.
assembly_service_requested	Categorical	True/False flag indicating if assembly was requested.
assembly_cost	Quantitative	Assembly fee driven by complexity tiers; zero when not requested. May contain nulls.
total_amount	Quantitative	All-in order value: product_price + shipping_cost + assembly_cost.
delivery_window_days	Quantitative	Promised delivery window in days (1–14).
delivery_status	Categorical	Fulfillment status (Pending, In Transit, Delivered, Failed Delivery, Rescheduled, Cancelled).
payment_method	Categorical	Payment mode (Credit/Debit Card, PayPal, Apple/Google Pay, Bank Transfer, COD).
customer_rating	Quantitative	Post-delivery rating (1.0–5.0) with natural missingness.

MIT Licensed

Similar vizzes

Loading thumbnail…

Grocery Store Sales Data Loading

This example demonstrates loading and displaying a grocery store sales dataset from an external CSV file. The visualization fetches the data using the Fetch API, parses it with `d3.csvParse`, and renders the parsed rows as formatted JSON text in a `<pre>` element using D3’s `select` and data join. The code uses D3 v7 and manages state transitions from an initial undefined value through a loading phase to the final parsed array. The dataset includes sales records with fields such as product name, total amount, and loyalty points from multiple store locations.

EEmily Hudson

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

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…

Fork of Loading Data

This example demonstrates asynchronous data loading in D3, displaying the Iris Dataset as a raw JSON string in a `<pre>` element. The visualization initializes with a loading state, fetches the CSV file via `fetch`, and parses it using `d3.csvParse`. After conversion, numeric columns are cast to numbers before being rendered. The code uses `d3.select` and the `.join()` operation to update the displayed data, showcasing a minimal data-loading and state-management pattern with D3 v7.

Bbillmccabeusa@hotmail.com

73% match

Loading thumbnail…

Loading Data

This example demonstrates a simple unidirectional data-flow pattern where the state is managed centrally and passed to a visualization function. The visualization renders the loaded data as a formatted JSON string inside a `<pre>` element, initially displaying a "LOADING" placeholder. Using the `csvParse` method from D3 v7, it fetches a CSV file from a GitHub gist containing NY State Assembly data, parses it, and updates the state to trigger a re-render. The code uses `select` and `join` to bind the data to the DOM, showing a clean separation between state management and rendering.

Llupica.matthew@gmail.com

73% match

Loading thumbnail…

Loading Data - Goodreads Books

This example demonstrates the initial step of a data visualization pipeline: loading a Goodreads dataset from a CSV file. It shows raw JSON-formatted data in a `<pre>` element, with attribute names and values like book titles and ratings clearly visible. The code uses D3 v7's `csvParse` and `select` within a state-management pattern, where `fetch` retrieves the file and `setState` updates the view after parsing. The visualization itself is minimal, displaying the loaded data structure without any graphical encoding.

AAlexis Caira

73% match

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

72% match

Loading thumbnail…

Loading Data

This example demonstrates a workflow for loading external data into a D3.js visualization. It shows how a container element initializes with an undefined data state, triggering a fetch request for a `data.csv` file, and then adapts to the data as it becomes available. The code uses D3 v7 and the `fetch` API to asynchronously load the data, with the visualization re-rendering on window resize events. The implementation relies on a modular structure with separate files for the HTML, main script, and visualization logic.

BBismark Kofi Owusu Sarfo

72% match