Stacked Density and Quantile Graphs

100%

Stacked Density and Quantile Graphs

✓ Published0🌍 Public

Last edited Jul 21, 2014

Created on Jun 28, 2014

Two paired charts compare product groups: a stacked density graph on the left and its derived quantile graph on the right, where the density is divided into equal-area segments resized to equal width. This reveals which segments contribute more to the tail than to the middle, a distinction harder to see in the density view. Hovering a legend item filters the display to a single segment. The visualization is built with d3.v3 APIs including `d3.svg.area`, `d3.layout.stack`, and `d3.scale.linear`, rendering to SVG with animation, using data from the provided `data.js` file.

AI-generated description

The graph on the left is the density function. The graph on the right is obtained by dividing the density function horizontally (along the horizontal axis) so that all pieces have equal area and then resizing to have equal width (and hence equal height).

The right side graph is useful to see if a particular segment has higher contribtuion to the tail than to the middle which could be harder to see in the denisty graph.

Hovering over the legend will update the graphs to show only the selected segment.

Similar vizzes

Loading thumbnail…

Quantiles Chart

A quantile chart visualizes the distribution of a single category, "Residential," by displaying its quantile values as stacked horizontal bars. The chart overlays upward- and downward-pointing triangles and diamonds to mark additional summary statistics, such as minimum, maximum, and effective values, using distinct red and green colors. The visualization is built with D3 v4, using SVG rendering and scales like `d3.scaleBand` and `d3.scaleLinear` to position the elements. Data is hardcoded in the script, and the axes are styled with custom tick formatting and gridlines.

CCSmileska

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

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). The chart uses D3.js with the `d3.nest`, `d3.layout.stack`, and `d3.legend.color` APIs to compute the stacked layout and render an interactive legend. Data is loaded from a CSV file (`data(sorted & grouped).csv`). Hover tooltips and a semi-transparent overlay highlight individual segments.

SSarahKiyani

71% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of subgroups across categorical groups, with each bar segment colored by subgroup and stacked to show cumulative values. The visualization is built using D3 v4, loading CSV data from GitHub, and rendering SVG rectangles with a band scale for the x-axis and a linear scale for the y-axis. It uses `d3.stack()` to compute stacked values, `d3.scaleOrdinal` for colors, and includes an interactive tooltip element in the HTML structure.

JJames Huang

71% match

Loading thumbnail…

Activity6_q2

This stacked bar chart visualizes the percentage distribution of five sales performance categories (Below 100, 100-500, 500-1000, 1000-5000, Above 5000) across six product categories, showing how sales outcomes vary by product type. Using D3.js v7 with SVG rendering, the chart employs `d3.stack()` to generate stacked segments and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The data comes from a local CSV file, and the visualization uses linear and band scales for positioning.

Nnumitha

70% match

Loading thumbnail…

Stacked Bars

This chart uses stacked bars to show how total sales are divided among customer segments for each product sub-category. The visualization allows users to hover over legend entries, which highlights the corresponding segment’s bars while dimming the rest. The implementation uses d3.svg.axis, d3.nest, and d3.layout.stack to aggregate and stack the data from the CSV file, with bar rendering using SVG rectangles. A d3-tip tooltip displays detailed values on hover. The color legend, built with d3.legend.color, drives the interactive filtering.

Pprincit

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

69% match

Loading thumbnail…

Viz - Area - stacked - legend - mouse

A stacked area chart displays four value series over 20 time steps, with a legend beneath. The chart uses D3 v4 and the viz.js library to generate SVG paths with basis curve interpolation. Hovering over a legend item triggers a 500-millisecond transition that isolates that series by zeroing the others, while mouse-out restores the full stacked view.

NNPashaP

69% match