Skip to main content
SimilarExport ZIP
100%

Final Visualization

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

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.

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 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
90% 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
81% 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
78% match
Loading thumbnail…

Piechart of Bank Failures Transaction Type

This piechart visualizes the number of bank failures by transaction type, with each slice representing a category and its failure count. It loads a CSV dataset from a GitHub gist, parses it with `d3.csvParse`, and aggregates counts using `d3.flatRollup`. The chart is rendered with `d3.pie` and `d3.arc`, using a color scale from `d3.scaleOrdinal` with `schemeReds[9]`. Legends and value labels are added to identify categories, while only showing counts above 100.

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

US Banking Since the Banking Crisis

This animated visualization maps the collapse of US banks following the 2008 financial crisis, plotting failed institutions on a geographic map with each point sized by total assets. Built from a CSV of bank failures, the animation traces the temporal sequence of closures from 2008 onward, with each marker appearing in chronological order. The data highlights the geographic concentration of failures in states like California, Washington, and Florida, and the varying magnitudes of assets at risk, from regional banks to giants like Washington Mutual ($307B). The animation uses position and size to reveal the crisis's progression, while the map layout grounds the financial data in a spatial context.

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

BankInfo Barchart Practice

This example visualizes bank customer data as an interactive bar chart with five series of ten values each, rendered as SVG rectangles. Users can toggle between grouped and stacked layouts using custom radio buttons built with D3 selections. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout, with hover tooltips displaying precise values via a D3-managed HTML div. Data comes from a CSV file loaded asynchronously through a custom `useData` React hook, and transitions animate between layout states.

AAndre J Denais
69% match