Brushable bar chart - Horizontal - V

100%

Brushable bar chart - Horizontal - V

✓ Published0🌍 Public

Last edited Jan 5, 2018

Created on Jan 5, 2018

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.

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/nstrayer/'>nstrayer</a>'s block: <a href='http://bl.ocks.org/nstrayer/8e46c8f116614f628e3aaeec09167edb'>Brushable Horizontal Bar Chart - V</a>

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

forked from <a href='http://bl.ocks.org/jalague/'>jalague</a>'s block: <a href='http://bl.ocks.org/jalague/92e3995425417b4a4dc59016a9fbc415'>Brushable Horizontal Bar Chart - V</a>

Similar vizzes

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

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

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

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

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

75% match

Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

This example demonstrates a unit bar chart of message counts over time, implemented with D3 v4 and rendered as SVG. The visualization includes two synchronized views: a main chart area displaying individual messages as circles positioned by date and daily message count, and a smaller context chart below. Users can brush on the context chart to select a time range, or scroll/zoom directly on the main chart to explore the data in detail. The data, loaded from a CSV file, shows message activity from 2013, with each circle representing a message and its vertical position indicating the number of messages sent that day. The chart also includes summary statistics that update based on the current brush/zoom selection. The axis labels and styling (orange circles with opacity) follow a clean, minimalist design. The example demonstrates linked brushing and zooming techniques in D3 v4, allowing for interactive exploration of temporal data.

EEdinDev

75% match

Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

This example demonstrates a unit bar chart that visualizes daily message counts over time, with brushing and zooming functionality. The main chart displays individual messages as semi-transparent orange circles plotted by date (x-axis) and messages-per-day (y-axis), while a smaller context chart below shows the same data at a reduced scale. Users can brush on the context chart to select a time range, which automatically updates the focus chart’s x-axis domain. Alternatively, scrolling or dragging directly on the main chart zooms and pans the view. Both charts share synchronized scales, and summary text displays the total message count within the currently visible range. The visualization uses SVG circles to represent individual messages, with opacity to show overlapping points, and is implemented in D3 v4 with a clean, minimal aesthetic.

EEdinDev

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

73% match