Bank Failure Dataset2

100%

Bank Failure Dataset2

✓ Published0🌍 Public

Last edited Apr 7, 2023

Created on Apr 7, 2023

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.

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…

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

95% match

Loading thumbnail…

Loading in Bank Failure Data

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.

Jjjlaber

81% match

Loading thumbnail…

Final Visualization

This visualization presents an interactive exploration of US bank failures from 1934 to 2020, using three coordinated charts. A pie chart shows the distribution of failure types, a treemap ranks banks by estimated loss, asset value, or deposit value via dropdown menus, and a line chart displays failures or losses over time. Built with D3 v7, the SVG-based charts use `d3.pie`, `d3.treemap`, and `d3.line` generators, with data loaded from a CSV via `d3.csvParse`. The dataset originates from Kaggle.

Jjjlaber

76% match

Loading thumbnail…

Bank Failures Multiple Views

This example presents two linked visualizations of US bank failures from 1934 to 2020, using data from a cleaned CSV file. The first view is a donut chart showing the number of failures by transaction type, with labels for segments exceeding 100 failures. The second view displays a treemap ranking the top 10 banks by a selected metric—estimated loss, asset value, or deposit value—via a dropdown menu. Both visualizations use D3 v7 with SVG rendering, employing `d3.pie`, `d3.arc`, and `d3.treemap` to construct the charts and `flatRollup` to aggregate values.

Jjjlaber

75% match

Loading thumbnail…

Bank Failures Treemap

This treemap visualizes the top 10 U.S. bank failures by selected financial metric, with a dropdown menu to toggle between estimated loss, asset value, and deposit value. The chart uses d3.treemap with a hierarchical layout, where each rectangle’s size corresponds to the chosen metric and color encodes the bank name via a sequential red scale. Data is loaded from a CSV and aggregated with d3.flatRollup, then rendered as SVG rectangles with text labels using d3-selection.

Jjjlaber

73% match

Loading thumbnail…

Bank Failure Line Graph

This example uses a line graph to show bank failure trends over time, with a dropdown menu toggling between the total number of failures and the estimated loss in thousands of USD. It uses d3.line, d3.scaleTime, and d3.scaleLinear to render the chart, with d3.csvParse loading data from a gist and d3.timeParse converting date strings. A menu component updates the view, while axes are drawn using d3.axisLeft and d3.axisBottom.

Jjjlaber

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

73% match

Loading thumbnail…

Loading CSV Data with D3

This example demonstrates loading and parsing a CSV file with D3.js v3, displaying financial time-series data from the Federal Deposit Insurance Corporation (FDIC) for Chicago banks from 1966 to 2000. The visualization uses d3.csv to load ChicagoFDIC.csv and render the values as an interactive line chart or table. The dataset contains annual metrics such as total assets, total loans and leases, and investment securities, all formatted with commas (e.g., "9,092,998"). The example highlights D3's core data-handling capabilities: asynchronously fetching external data, parsing numeric strings, and binding the resulting JavaScript objects to DOM elements for dynamic visualization.

AAbechtel

71% match