Skip to main content
SimilarExport ZIP
100%

Loading in Bank Failure Data

✓ Published0🌍 Public
Jjjlaber
Last edited Apr 6, 2023
Created on Apr 6, 2023

This example demonstrates loading and displaying a dataset of Foodhub food orders and deliveries in New York City. It shows the raw parsed data as a JSON-like text block, using d3.csvParse to convert the fetched CSV file into an array of objects. The visualization handles asynchronous state management by setting a loading flag before fetching the data from a GitHub gist, then re-rendering once the data arrives. The code relies on d3-v7, specifically the csvParse and select functions, with the HTML title referencing bank failure data though the actual dataset describes restaurant orders.

AI-generated description

Loading a dataset that has information on food orders/deliveries in NYC through the app Foodhub.

(Dataset from: https://www.kaggle.com/datasets/ahsan81/food-ordering-and-delivery-app-dataset)

Column Description/Data Types

order_id: unique id that is connected to each order (Ordinal)

customer_id: unique id that is connected to the customer ordering the food (Ordinal)

restaurant_name: name of the restaurant that the order is from (Categorical)

cuisine_type: type of food ordered (Categorical)

cost_of_the_order: how much the order cost (Quantitative)

day_of_the_week: either Weekend or Weekday, indicates when the order took place (Categorical)

rating: rating that customer gave on order (out of 5) (Quantitative)

food_preparation: time (in minutes) that it took the restaurant to prepare the order to be delivered (Quantitative)

delivery_time: time (in minutes) that it took for the order to be delivered to the customer (Quantitative)

MIT Licensed

Similar vizzes

Loading thumbnail…

NYC Food Ordering/Delivering Data

This example visualizes NYC food ordering and delivery data from Foodhub, showing raw order records including restaurant names, cuisine types, costs, ratings, preparation times, and delivery times. The visualization initially displays the dataset as formatted JSON text in a `<pre>` element. It uses D3 v7’s `csvParse` to load and parse data from a remote CSV file, converting numeric fields with unary plus operators. The code employs D3 selections with `.selectAll().join()` to bind and update the display, and manages asynchronous data loading through a state-based render cycle using `fetch`.

Jjjlaber
82% match
Loading thumbnail…

Bank Failure Dataset2

This example displays a raw JSON dump of bank failure data, including asset values, deposit values, and losses, loaded from a CSV file. The visualization initially shows nothing until the data is fetched, parsed with `d3.csvParse`, and rendered as a text representation using `JSON.stringify`. The code uses D3 v7’s `select` and `selectAll` to manage the display, and relies on `fetch` to retrieve the dataset from a GitHub gist. The interaction is minimal, focusing on loading and presenting the structured data.

Jjjlaber
81% match
Loading thumbnail…

Bank Failure Dataset1

This example displays the raw contents of a dataset on bank failures, rendering the parsed CSV data as a JSON-formatted preformatted text block. The visualization initially fetches the CSV file from a GitHub gist, parses it using `d3.csvParse`, and converts the `asset_value` and `deposit_value` fields to numeric types. The D3.js library, specifically `d3.select` and D3's `join` operation, updates the DOM to show the structured data, providing a simple, non-graphical view of the dataset's contents.

Jjjlaber
79% match
Loading thumbnail…

Exploring NYC Food Ordering/Delivering Data

This visualization explores NYC food ordering and delivery patterns from a Foodhub dataset, initially showing the full data as a JSON preformatted block. The pie chart displays the distribution of orders by cuisine type, with each slice labeled and colored using a categorical color scale. Built with D3 v7, it uses `d3.pie` to compute arc angles and `d3.arc` to generate the pie paths, alongside `flatRollup` to aggregate order counts from the CSV data fetched from a GitHub gist.

Jjjlaber
76% 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
75% match
Loading thumbnail…

Loading and Parsing Bank Customers Dataset

This example shows the basic structure of a bank customer dataset by displaying three summary statistics: file size in kilobytes, row count, and column count. It loads a CSV file from a GitHub gist using `d3.csv` and parses the data, then formats the metrics with `d3.csvFormat` and `Math.round`. The results are rendered as large text inside a `<pre>` element. The visualization relies on D3 v5’s promise-based loading API to handle the asynchronous data fetch.

RRaul Gamez
74% match
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset using D3.js version 5. It shows the raw data being fetched via `d3.csv` and logged to the browser console, with comments illustrating alternative approaches using the Fetch API and `d3.csvParse`. The dataset contains survey responses about restaurant habits during the COVID-19 pandemic. The page itself displays no visualization, only a minimal HTML structure with a pre element intended for showing file statistics.

BBenjamin
73% match
Loading thumbnail…

Fork of Fork of loading and parsing CSV data_backup

This example demonstrates a simple data-loading interface for restaurant ratings. It shows a page that uses D3.js (version 7) to fetch a CSV file from a GitHub gist, then displays a text summary of the file's size in bytes and kilobytes, along with the row and column counts. The page also includes an embedded SVG image of a restaurant. The code highlights the use of `d3.csv` and `d3.csvFormat` for parsing and measuring the data, while the visual layout relies on basic HTML, CSS, and an external SVG asset.

Kkoteswararao614@gmail.com
72% match