Skip to main content
100%

Icesave capital structure - nest/layout example

✓ Published0🌍 Public
ZZJONSSON
Last edited Nov 2, 2011
Created on Nov 2, 2011

Interactive controls switch between no-agreement and pari-passu distributions, and between relative and absolute views, while the stacked bar chart animates its layout. The visualization uses d3.layout.stack and d3.nest to group deposit account balances by category (A, B, C) and party (TIF, FSCS), with red and green areas marking guaranteed versus excess balances. Axes and tick marks are drawn with d3.svg.axis, and the chart reads static data from a gist.

AI-generated description

Similar vizzes

Loading thumbnail…

Icicle & Force Layout

The visualization combines an icicle chart with a force-directed node-link diagram, both driven by the same hierarchical dataset of loan categories. The icicle chart, rendered with SVG rectangles via `d3.layout.partition`, allows click-to-zoom into any non-"end" node, updating the visible rectangles and highlighting the selected path in orange. Simultaneously, a separate force simulation using `d3.forceSimulation` and `d3.forceLink` displays the hierarchy as a connected network of colored circles, with nodes colored by group and linked by edges; clicking a rectangle also recolors the corresponding node in the network. The data comes from `icicles.json` and `nodes.json`, and the example uses D3 v3 for the partition layout and D3 v4 for the force layout.

EEoinMGB
70% match
Loading thumbnail…

Fork of test

This gallery example presents an interactive stacked bar chart that visualizes financial data over time from 2021 to 2044, with bars divided into six categories such as spent income, spent return, and retained capital. The chart uses negative and positive value ranges to show spending versus retained amounts, with mouseover highlighting to emphasize individual bars. Built with D3 v4, the visualization employs `d3.stack()` for data stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and SVG rendering with CSS-based highlighting triggered by mouse events. The data originates from a custom `FinancialPlan` class containing hardcoded arrays.

HHarsh Patel
67% match
Loading thumbnail…

Icicle & Force Layout

This example pairs an icicle chart with a force-directed network to show hierarchical site navigation data and its relationships. The icicle layout, built with `d3.layout.partition`, visualizes page counts with click-to-zoom transitions, while a separate SVG uses `d3.forceSimulation` to display linked nodes. Colors map to categories, and tooltips show each node’s percentage of its parent. Data comes from two JSON files (`icicles.json` and `nodes.json`), rendered as animated SVG elements.

TThanaporn-sk
67% match
Loading thumbnail…

Icicle & Force Layout

This example combines an icicle layout with a force-directed graph to visualize hierarchical data. The icicle chart, built with D3 v3, encodes a JSON hierarchy as nested rectangles, where each segment’s size and color represent the value and category of data, and clicking a rectangle zooms the view to that node's subtree. A linked force-directed network in D3 v4 shows relationships between nodes, with node colors and link widths conveying group and connection strength. The hybrid view uses two D3 versions in a single page, with an animated partition layout on the left and an interactive force-directed diagram on the right.

EEoinMGB
67% match
Loading thumbnail…

Tree_ICE-8

This interactive tree diagram visualizes the hierarchical flow of a salary into savings and various expense categories, using a JSON data source. Built with D3 v3, the visualization renders nodes and links as SVG elements, with node types distinguished by color. It incorporates zoom and pan behavior via `d3.behavior.zoom`, along with interactive tooltips and animated updates that reposition nodes and links as the user explores the structure.

Ssaijahnaviappineni
67% match
Loading thumbnail…

Barchart

This interactive bar chart demonstrates the transition between grouped and stacked layouts using synthetic, smoothly-varying data. The visualization uses D3 v6’s scalable vector graphics (SVG) rendering with animation to morph bar positions and heights. Users toggle layout modes and toggle individual series on or off via custom radio-style buttons, which are built with D3 selections and manual layout positioning. The chart relies on `d3.stack` for stacked series data, `d3.scaleBand` for the x-axis, and CSS transitions for smooth updates.

Uunnome
67% match
Loading thumbnail…

Dsnap - Charts

This example presents a horizontal bar chart comparing 12 financial metrics, including total deposits, equity, and various credit categories, with values expressed in millions of euros. The visualization renders as an SVG with animated bars that grow in width over one second, using a quantized color scale to differentiate each category. The grid and axes are built with d3.svg.axis and linear scales, while the bar animation leverages D3’s transition API to smoothly update rectangle widths. Data is hardcoded in the script, and the chart is generated entirely with D3 v3.

MMohamedZaki
67% match
Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis
66% match