Brushable bar chart - Horizontal - V

100%

Brushable bar chart - Horizontal - V

✓ Published0🌍 Public

Last edited Mar 11, 2017

Created on Mar 11, 2017

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.

AI-generated description

This is exactly the same as version IV of the brushable horizontal bar chart, but this one has a x scale that updates to fit the largest visible bar in the available width.

For a bit more background, you can read my mini-blog about it Brushable & interactive bar chart in d3.js

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

Similar vizzes

Loading thumbnail…

Brushable Horizontal Bar Chart - I

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.

SSav10

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

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

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

81% match

Loading thumbnail…

Brushable bar chart - Horizontal - IV

This example shows a brushable horizontal bar chart of the most-cited philosophers, with each bar representing an individual scholar and its length corresponding to citation count. The visualization pairs a detailed main chart with a smaller mini chart, where users can drag a brush to filter which portion of the ranked list is displayed. The chart uses D3 v3 with SVG rendering, employing `d3.behavior.zoom` for mouse-wheel scrolling and a brush for selection. Data, which includes citation counts from analytic and continental philosophy journals, is loaded from a CSV file and sorted by frequency.

MMNoichl

79% match

Loading thumbnail…

Brushable bar chart - Horizontal - IV

This bar chart visualizes citation patterns in philosophy journals, showing how often each journal is mentioned across a snowball sample of highly cited articles. The visualization combines a main horizontal bar chart with a mini overview chart on the right; users can brush or scroll to zoom into specific portions of the data. The code uses d3.v3’s `d3.behavior.zoom` and brush components, with ordinal and linear scales mapping journal names to bar positions and mention counts. Data comes from a CSV file listing journal names, mention counts, and total citations.

MMNoichl

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

78% match