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

100%

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

✓ Published0🌍 Public

Last edited Apr 6, 2017

Created on Apr 6, 2017

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.

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…

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

76% match

Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an animated transition between stacked and grouped bar charts, with synchronized changes in position and size that preserve the identity of each bar segment. The visualization uses four series of fifty-eight pseudo-random values generated by a custom `bumps` function. The stacked layout defaults to view, and a radio button or an automatic timer switches to the grouped layout. The code leverages D3 v4 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and sequenced transitions via `transition()` calls, rendering as SVG.

Mmbostock

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

75% match

Loading thumbnail…

Barchart

This example demonstrates an animated stacked bar chart that transitions between stacked and grouped layouts. The chart displays five series of pseudorandom, smoothly varying data generated by the `bumps` function, with tooltips revealing precise values for each segment. Users can toggle the layout via radio buttons or an automatic timer that switches every two seconds. Built with D3 v6, the visualization uses `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `transition` with staggered delays to animate the SVG rectangles.

NNita

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

74% match

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates an interactive bar chart that smoothly transitions between stacked and grouped layouts, with a single click on the chart toggling between the two modes. It uses D3.js v3 to render the chart as an SVG, animating the bars' positions and sizes via `transition` and custom attribute tweens. The data is generated in-browser with a `bumpLayer` function, and hovering a bar shows a tooltip listing the three series values using Underscore.js templates and jQuery for DOM manipulation. A legend with clickable series boxes lets viewers enable or disable individual series, updating the chart and the number of enabled series accordingly.

EEfratVil

74% match

Loading thumbnail…

Barchart

This bar chart displays multiple series of smooth, generated data using stacked and grouped layouts. Users toggle between layouts and toggle individual series on and off via custom radio buttons. The visualization uses D3 v6 with SVG rendering and transitions to animate bar positions and heights. Data comes from a custom `bumps` function, and the chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout and scaling.

Nngahhoang

73% match

Loading thumbnail…

Stacked-to-Multiples

Four quarterly data series toggle between small multiples and a stacked chart. The animation smoothly shifts the group labels and rectangular bars vertically via `d3.transition()`. The example loads a TSV file with `d3.tsv()`, nests rows by group with `d3.nest()`, and stacks values with `d3.layout.stack()`, while ordinal scales and `d3.svg.axis()` render the SVG output.

Mmbostock

73% match