Brushable Horizontal Bar Chart - I

100%

Brushable Horizontal Bar Chart - I

✓ Published0🌍 Public

Last edited Jul 27, 2016

Created on Jul 27, 2016

This example shows a brushable horizontal bar chart that lets viewers explore a large, randomly generated dataset by adjusting a selection box in a mini chart on the right. The main chart on the left displays the selected bars in detail, with the y-axis labels and bar lengths updating based on the brush extent. The chart uses D3 v3 with SVG rendering, employing `d3.svg.brush` for the interactive selection, `d3.scale.ordinal` and `d3.scale.linear` for scales, and an ordinal brush pattern adapted from an external example. Scrolling the mouse wheel also moves the brush, and resizing handles allow users to change the number of visible bars.

AI-generated description

This brushable horizontal bar chart gives you the option to browse through a large dataset without the separate bars becoming too small.

You have the option to adjust how many bars you're seeing at the same time by adjusting the size of the little box on the right mini chart.

You can also move the box and see the bars that you've selected appear in a bigger form on the left. Moving can be done either by grabbing and moving the box or scrolling

I have another version that uses a slightly different way to transition can be found here: Brushable Horizontal Bar Chart - II

The reason why the code is divided up into the overarching functions is to prepare it a bit already for the charting framework that I work with at my day job (and yes, I know the global variables are not-done, but I'm not known for writing beautiful or short code :) )

Why the rainbow? Just because it made it more fun to look at during the development :) (Please don't use a rainbow for a serious case though)

Some options to think about: You can update the x axis domain to update when you select a new set of bars, so that the largest bar always fills the space. This way you can see the smaller bars with more detail. Just wondering if that is confusing for a viewer... which I finally did in Brushable Horizontal Bar Chart - III

Although I found tidbits to get to this point all over the web, the initial help to set up an ordinal brush came from this example

Tested in (new versions of) Chrome, Firefox and Safari

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/d8dff2fa37345d54f9e58eb74db460d0'>Brushable Horizontal Bar Chart - I</a>

Similar vizzes

Loading thumbnail…

Brushable bar chart - Horizontal - V

This example shows a horizontal bar chart with a linked mini chart on the right that acts as a brushable overview. Dragging the brush box, scrolling the mouse wheel, or clicking in the mini chart changes which bars are visible in the main chart, while the x-axis scale dynamically updates to fit the largest visible bar. The visualization is built with D3 v3, using ordinal scales for the y-axis, linear scales for the x-axis, and the `d3.svg.brush` component. SVG is used for rendering, with the main chart clipped via a clip-path. The data consists of 40 randomly generated country names and numeric values sorted in descending order.

TThanaporn-sk

92% match

Loading thumbnail…

Brushable bar chart - Horizontal - IV

This brushable bar chart displays 40 randomly generated data entries as horizontal bars. Users can adjust a brushable window in a mini chart to control which bars appear in the main chart, with mouse-wheel scrolling for navigation. The visualization is built with D3 v3 (d3.v3) using SVG rendering and ordinal scales, implementing a custom `d3.behavior.zoom` handler for scrolling that slides bars without transitions.

RRicCheng

90% match

Loading thumbnail…

Brushable bar chart - Horizontal - V

This horizontal bar chart displays the gross counts of 48 philosophical publications. A main chart shows all values, while a smaller mini chart contains a brushable window. Users can drag this window, click to reposition it, or adjust its size with handles to control the visible range. The main chart updates its x-axis scale to fit the largest visible bar, ensuring optimal use of space. Built with D3 v3, it uses SVG for rendering and employs `d3.behavior.zoom` for mouse-wheel scrolling over the main chart for additional navigation.

MMNoichl

86% match

Loading thumbnail…

a Barchart of brushes

Six horizontal bars form an editable bar chart, with each bar implemented as a draggable D3 v4 brush selection. The chart displays six numeric values between 0 and 20, rendered as blue bars on a light yellow background with a black axis. Users adjust a bar’s height by dragging its brush handle horizontally, which updates the underlying data and the white text label showing the value. The visualization uses `d3.brushX()` for interaction, `d3.scaleLinear()` for positioning, and SVG rendering, with the brush extent constrained to each bar’s row.

AAlainRo

86% match

Loading thumbnail…

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

WWaseem Medhat

84% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

81% match

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9

80% match

Loading thumbnail…

Barchart as an input device

This example demonstrates how D3's brush component can be repurposed as a direct manipulation input device for editing bar chart values. Two synchronized bar charts, one horizontal and one vertical, display the same dataset of eight values, and dragging any bar updates its value in both views. The code uses `d3.brushX` and `d3.brushY` with `brushmove` and `brushend` event handlers to capture mouse interaction and update the shared data array. SVG selections and the `selection.call` method apply the brushes and propagate value changes between the two linked charts.

AAlainRo

80% match