Skip to main content
SimilarExport ZIP
100%

Bank Failure Line Graph

✓ Published0🌍 Public
Jjjlaber
Last edited Apr 26, 2023
Created on Apr 13, 2023
Forked from Keeling Curve

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.

AI-generated description

A reproduction of the Keeling Curve.

Data downloaded from Global Monitoring Laboratory: Trends in Atmospheric Carbon Dioxide.

Uses:

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
80% 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
78% 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
76% 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
73% 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
73% 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
72% match
Loading thumbnail…

Line graph

A line graph displays daily high stock prices for CS Bank over time, with a red-to-green vertical gradient applied to the stroke. The chart includes labeled axes, a title, and a hover interaction that reveals the exact price at any point via a movable circle and text label. Built with React and D3.js v4, it loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the line using `d3.line` with a `linearGradient` fill. Interactive tooltips rely on `d3.bisector` for nearest-date lookup.

SSheela2930
70% match
Loading thumbnail…

line chart using d3

This example uses D3.js v7 to create a line chart visualizing restaurant profit trends over recorded years. It loads CSV data from a GitHub gist and maps the year and profit columns to a linear x-axis and y-axis, rendering the line as an SVG path with a steelblue stroke. The chart includes axes labeled "Recorded Year" and "Profit In Million," plus an interactive tooltip that displays the data values on mouse movement. The SVG container is configured with custom margins, and the entire chart is styled with a black background and white text via CSS.

Bbhavana.bayyapu@gmail.com
70% match