Skip to main content
100%

BIS Derivative Data using Mike Bostock's stacked to multiple bar

✓ Published0🌍 Public
AAjayyy
Last edited Jun 16, 2019
Created on Jun 16, 2019

A small multiple and stacked bar chart comparison of Bank for International Settlements (BIS) over-the-counter derivative statistics, sourced from a CSV file, shows notional amounts by instrument from 1998 to 2013. An interactive radio button toggles between the two layouts, animating the transition with a 750ms duration. The visualization uses D3 v3 APIs including `d3.layout.stack`, `d3.svg.axis`, and ordinal/linear scales, with SVG rendering and color-matching to the original BIS publication via Jason Davies' eyedropper tool.

AI-generated description

BIS Derivative Data

Explore Using Mike Bostock's Stacked to Multiple Bar Example

To make this work, I had to change up the data transformation. Also, I changed the stack to use the entire height. Thanks to Jason Davies eyedropper I was able to match the colors used in the original BIS publication.

Data Source

BIS OTC Derivatives statistics

forked from <a href='http://bl.ocks.org/timelyportfolio/'>timelyportfolio</a>'s block: <a href='http://bl.ocks.org/timelyportfolio/5586845'>BIS Derivative Data using Mike Bostock's stacked to multiple bar</a>

mit Licensed

Similar vizzes

Loading thumbnail…

BIS Derivative Data using Mike Bostock's stacked to multiple bar

This example animates a transition between stacked and multiple bar chart views of BIS OTC derivative data. It shows six market instruments (foreign exchange, interest rate, equity, commodity, credit default swaps, and unallocated) across semiannual dates from 1998 to 2013. Built with d3.v3, the visualization uses `d3.layout.stack`, ordinal and linear scales, SVG transitions, and radio buttons to toggle modes. Colors match the original BIS publication, and the data comes from a CSV file.

KKuerzibe
93% match
Loading thumbnail…

Barchart

This interactive bar chart demonstrates the difference between grouped and stacked layouts. Users can toggle between the two views using custom radio buttons. The visualization uses randomly generated test data with smooth bumps, displayed as an SVG with animated transitions. Built with D3 v6, the code employs `d3.stack()` for data preparation, `d3.scaleBand()` and `d3.scaleLinear()` for scales, and CSS-styled tooltips for mouseover interactions.

Vvillagef
75% 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
74% match
Loading thumbnail…

Stacked-to-Grouped Bars III

This interactive bar chart demonstrates a hybrid approach to visualizing stacked data, allowing users to switch between stacked, grouped, and percentage modes via radio buttons. In grouped mode, hovering over a layer highlights it and vertically re-aligns its bars so the baseline is zero, with the y-axis updating accordingly. The visualization uses D3 v4 with `d3.stack`, `d3.scaleBand`, and `d3.axisLeft`, rendering animated SVG rects with `transition` delays. It relies on synthetic data from a bump function and includes an automated initial transition cycling through the modes.

TThanaporn-sk
73% match
Loading thumbnail…

Barchart

This example shows an interactive bar chart with multiple data series that can be toggled between grouped and stacked layouts via radio-button style controls. Additional buttons allow users to show or hide individual series. The visualization uses D3 v6 with SVG rendering and animated transitions, employing `d3.stack` to compute stacked values and `d3.scaleBand` and `d3.scaleLinear` for positioning. Data is generated procedurally using smooth random bumps, and mouseover interactions display tooltips with precise values.

Mmachetenwueter
72% match
Loading thumbnail…

StackedChart

This interactive visualization displays four layers of synthetic time-series data, switching between stacked and grouped bar layouts through animated transitions. Users toggle between modes via radio buttons, with sequenced transitions preserving object constancy as bars morph between the two arrangements. The example uses D3 v3 with SVG rendering, employing `d3.layout.stack` for stacking, ordinal and linear scales for positioning, and chained `transition()` calls with staggered delays to animate rectangle positions, widths, and heights. Colors derive from a linear scale spanning blue-gray tones, while data generation uses a bump function inspired by Lee Byron’s streamgraph test data.

Aadilyalcin
72% match
Loading thumbnail…

Stacked-to-Multiples (improved)

This interactive visualization compares quarterly data across four groups, toggling between small-multiples and stacked layouts. Each group’s time series bars show raw values, with white text labels inside each bar indicating the group’s contribution per quarter, while the code accumulates these contributions into an array to reveal quarter totals. Using d3.v3, the example employs d3.layout.stack, ordinal and linear scales, d3.svg.axis, and transition.attrTween for smooth animated shifts between views. Data loads from a TSV file with date and value fields, rendered as SVG rectangles and text.

RRoxIv
72% match
Loading thumbnail…

d3js clickable stacked bar chart

This stacked bar chart, based on Mike Bostock's original, adds an interactive legend that lets viewers isolate individual categories. The visualization displays U.S. census population data by state and age group. Clicking a legend item filters the bars to show only that category, while hovering over bars reveals tooltips with exact values and highlights the segment. The chart is rendered with SVG and includes animated transitions, built with D3.js under an MIT license.

Aachalvs
72% match