100%

A matrix of grouped bar charts

✓ Published0🌍 Public

Last edited Jul 31, 2016

Created on Jul 24, 2016

This matrix of grouped bar charts visualizes network throughput data, organized by two variables (part size and HTTP threads), with each cell showing upload and download speeds for multiple tests. The matrix layout allows quick comparison across these parameters, while aggregate charts summarizing rows and columns appear along the edges. The visualization is built using D3 v4, rendering SVG graphics, and uses scales for positioning, axes for reference, and a tooltip library for interactivity.

AI-generated description

A matrix of grouped bar charts

A convenient way to view many barcharts organized by two variables of data.

End of rows and columns are the aggregate datasets of those rows/columns.

forked from <a href='http://bl.ocks.org/BBischof/'>BBischof</a>'s block: <a href='http://bl.ocks.org/BBischof/7c6c96ffa6c3794af9cc'>Matrix of Grouped Barcharts with Aggregate Scatterplots </a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

A matrix of grouped bar charts

This matrix of grouped bar charts displays upload and download speeds across two experimental variables, with each cell representing a unique combination of part size and HTTP thread count. The rows and columns conclude with aggregate charts summarizing data for each variable, while individual bars compare UP and DOWN throughput within each test. The visualization is rendered as SVG using D3 v3, employing ordinal scales for bar positioning, linear scales for axes, and d3-tip for tooltips. The underlying JSON data is loaded via `d3.json` and processed into a structured matrix.

BBBischof

95% match

Loading thumbnail…

Gist 95392bf4a37344793786

This interactive bar chart displays comparative proportions across four categories, rendered as vertical bars (SVG rectangles) with a rotated axis label. Using D3.js v3, users can click and drag on any bar to resize it, with a semi-transparent background bar indicating the current editing area. The visualization distinguishes major and minor gridlines through separate `d3.svg.axis` configurations, while mouse events (`mousedown`, `mousemove`, `mouseup`) update bar heights dynamically based on cursor position. Hardcoded data arrays provide initial values, and all styling is applied via CSS classes.

HHoffmannP

73% match

Loading thumbnail…

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

Hhenry1987

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

71% match

Loading thumbnail…

Just things

A side-by-side comparison links a line chart and a grouped bar chart through shared data. The line chart plots 50 random values, with circle markers whose size and color correspond to a radius value, while the bar chart counts how many items fall into each radius group. Hovering a circle highlights the matching bar by reducing its opacity. The visualization uses D3 v5 with `d3.line`, `d3.scaleLinear`, `d3.scaleBand`, `d3.nest`, and `d3.axisBottom`, rendering to SVG with an ordinal color scale.

663anp3ca

71% match

Loading thumbnail…

D3 Bar Chart

This interactive D3 v4 bar chart displays two datasets of numbers as vertical steel-blue bars with value labels and a y-axis. Clicking the Update button toggles between a 10-element ascending dataset and an 8-element descending one, demonstrating the enter, update, and exit pattern. The code uses d3.scaleLinear for the y-scale, d3.axisLeft for the axis, and transition().duration(500) to smoothly animate bar heights, positions, widths, and labels when the data changes. SVG rendering handles all visual elements.

MMaxBotta

71% match

Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock

71% match

Loading thumbnail…

Bar chart with D3

A horizontal bar chart displays workout volume for muscle groups, with bars sized by sets per week and grid lines for readability. The chart uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate SVG elements from a CSV file loaded via `d3.csv`. Axis labels and a title are added via SVG text, while tick formatting uses `d3.format`. The code removes default axis lines and relies on CSS classes for styling, including steelblue bars and custom font sizes.

BBenjamin Ogorek

71% match