Grouped bar chart v4

100%

Grouped bar chart v4 - TP3

✓ Published0🌍 Public

Last edited Jan 31, 2018

Created on Jan 31, 2018

This example shows a grouped bar chart with ten sample categories across five series, drawn as colored vertical bars in an SVG. The data is randomly generated with `Math.random`, and the chart uses D3 v4’s `d3.scaleBand` for both the outer category scale and the inner series scale, while `d3.scaleOrdinal` assigns a categorical color palette. Bars are positioned by translating each group and placing rectangles with explicit `x` and `y` attributes, with axes formatted via the standard D3 axis components.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/2f94c1913b81f7fd20c530236934433a'>Grouped bar chart v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

BBaptisteL54

90% match

Loading thumbnail…

Grouped bar chart v4

This example presents a grouped bar chart with ten categorical groups along the x-axis and five colored series per group, using randomly generated data. The SVG visualization uses D3 v4’s `d3.scaleBand` for both the outer group positions and inner bars, with `d3.scaleLinear` mapping values from 0 to 1 to the vertical axis. Each series is assigned a distinct color via `d3.scaleOrdinal`, and the bars are rendered as nested `<g>` elements with `rect` shapes. The code includes axes with hidden x-axis path, and the layout is fixed at 960 by 500 pixels with defined margins.

RRemiFaure

89% match

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

89% match

Loading thumbnail…

Stacked bar chart v4 - TP3

This example shows a stacked bar chart with five series of ten random values each, rendered as vertically stacked color-coded bar segments. The chart uses D3 v4 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack` to map data to positions and heights, with SVG rectangles for each segment. The bars are colored via an ordinal palette, and the x-axis is a band scale with a small padding, while the y-axis domain is set to the sample count.

AAlxClt

88% match

Loading thumbnail…

Grouped bar chart v4

This grouped bar chart visualizes ten samples across five series, with random data generated directly in the code using `d3.range` and `Math.random`. Rendered as an SVG, the chart uses `d3.scaleBand` for both the outer and inner axes, while a `d3.scaleOrdinal` maps a categorical color palette to the series. The animation is achieved through a chained `transition()` call with staggered `delay()` on the rectangles, which grow from the bottom to their final heights. The chart leverages the d3.v4 library and follows the classic grouped bar layout adapted from a bl.ocks example.

RRenonDis

87% match

Loading thumbnail…

Grouped bar chart with transition

This grouped bar chart displays five series of ten random values each, with bars colored by series and positioned along a shared categorical axis. The chart animates its initial appearance as each bar’s height transitions smoothly from zero to its data value, staggered by index. Built with D3 v4, it uses `d3.scaleBand` for both group and inner-bar positioning, `d3.scaleLinear` for the y-axis, and an SVG `transition` on the `height` attribute to drive the animation. The data are generated procedurally via `Math.random` and rendered as SVG rectangles.

RRenonDis

82% match

Loading thumbnail…

Stacked bar chart v4

This stacked bar chart shows ten samples across five series, with each series rendered as a color-coded segment. The visualization begins as a standard stacked bar layout, then animates the rectangles into a grouped arrangement, shifting the bars horizontally and adjusting their heights. Built with D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to compute the stacked values and transitions. The SVG output is animated using the `d3-transition` library, with random data generated on the fly. The chart highlights how the same data can be represented in both stacked and grouped forms.

MMathReynaud

82% match

Loading thumbnail…

Pseudo Grouped Barplot

This pseudo grouped barplot displays three categories, A, B, and C, each containing three bars in distinct pastel colors. The chart avoids a traditional axis, focusing instead on the visual comparison of bar heights across the groups. Each bar is a manually placed SVG `<rect>` element, styled with CSS classes that define its fill color and add a black outline on hover. The chart is built with plain SVG in an HTML file, using the Google Font "Share Tech" for its large text labels. The data is entered directly into the markup rather than generated programmatically.

Vvivhogan@gmail.com

79% match