http://stackoverflow.com/questions/32057842/d3-js-highlighting-stacked-bar-and-getting-selected-values/32079517#32079517

100%

http://stackoverflow.com/questions/32057842/d3-js-highlighting-stacked-bar-and-getting-selected-values/32079517#32079517

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Mar 17, 2017

This example shows a stacked bar chart of sales data for PC, SmartPhone, and Software product categories across five years, where users can interactively change the stacking offset method (wiggle, zero, expand, silhouette) and the layer ordering (inside-out, default, reverse) via dropdown menus. Built with D3.js (version 3.5.6), the visualization uses the `d3.layout.stack` API to compute stacked values and dynamically updates the y-axis scale and grid lines when selections change. The chart is rendered as SVG with animated transitions for the axis rescaling, and the code leverages custom helper libraries from a gist, including `d3.ui.select` for the controls and `d3.cbPlot` for axis creation.

AI-generated description

forked from <a href='http://bl.ocks.org/cool-Blue/'>cool-Blue</a>'s block: <a href='http://bl.ocks.org/cool-Blue/c2dcbd3e6be86be18fdd'>stacked bar chart with dynamic axes and labels</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates interactive stacked bar charts that can transition into grouped bar charts, allowing users to switch between the two modes via radio buttons. The visualization uses D3.js v3 and Underscore.js templates to render SVG elements, with jQuery managing the tooltip display and control interactions. Each bar segment is clickable and animates between stacked and grouped arrangements using D3’s transition system, while the chart’s series (Yes, No, Maybe) are color-coded and can be toggled to highlight specific data layers.

TThanaporn-sk

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

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

82% match

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates the transition between stacked and grouped bar charts, allowing viewers to compare categorical data across multiple series. The visualization uses D3.js v3 and jQuery to animate the transformation, with radio button controls to toggle between the two modes, while a tooltip displays precise values for each bar segment on hover. The data is generated procedurally using a bump layer function, and the chart leverages D3's layout stack API to compute the stacked positions before animating the rect elements to their grouped coordinates.

TTheShetland

81% match

Loading thumbnail…

d3.js learning

A stacked bar chart shows the changing composition of four product categories across five years, from 2006 to 2010. The visualization uses d3.v3 with SVG rendering, building layers via `d3.layout.stack()` and mapping time with `d3.time.format`. Bars are colored per category, with a legend and interactive tooltips that display each segment’s value on mouseover. The data is embedded as JavaScript objects, not loaded from a file.

Ttrungngonptit

81% match

Loading thumbnail…

Testing Stacked bar

This stacked bar chart visualizes sales values across product categories (accessories, art) segmented by consumer, corporate, and homeoffice sales. A legend highlights specific segments, and hovering over legend items or bars displays a tooltip with exact values via d3-tip. Rendered as SVG with D3’s stack layout, the chart uses ordinal and linear scales for axes, with an animated foreground overlay that dims non-hovered segments. The data comes from an embedded CSV, and the code relies on d3.legend for interactive color filtering.

Aaruba-haroon

80% match

Loading thumbnail…

Stacked-to-Grouped d3 v4

This example presents a bar chart that can switch between stacked and grouped layouts using radio buttons. It visualizes foreign transaction data over time, with each bar segment representing a different value category. The chart is built with d3.v4, using `d3.stack` for the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Animated transitions move bars between the two states. Data is loaded asynchronously via jQuery’s `$.ajax` from a BC government open-data API, with a custom tooltip showing segment values on hover.

TThanaporn-sk

80% match

Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart visualizes sales comparisons across different market segments (Consumer, Corporate, Home Office) for various product sub-categories. The visualization uses an interactive SVG rendering with a color legend that allows users to highlight specific segments. Built with D3.js, the chart employs the `d3.layout.stack` API to create stacked bars, with tooltips via `d3-tip` to display precise sales values. The data is sourced from a categorized CSV file showing sales totals, and the chart animates when rendering layers.

Pprincit

80% match