D3: Unit Bar Chart with Brush and Zoom

100%

D3: Unit Bar Chart with Brush and Zoom

✓ Published0🌍 Public

Last edited Feb 22, 2018

Created on Feb 22, 2018

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.

AI-generated description

forked from <a href='http://bl.ocks.org/misanuk/'>misanuk</a>'s block: <a href='http://bl.ocks.org/misanuk/fc39ecc400eed9a3300d807783ef7607'>D3: Unit Bar Chart with Brush and Zoom</a>

forked from <a href='http://bl.ocks.org/aendrew/'>aendrew</a>'s block: <a href='http://bl.ocks.org/aendrew/6216809b022682bb8c247d37b9df32dc'>D3: Unit Bar Chart with Brush and Zoom</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/0116f5445d616994b734b5148731c4a5'>D3: Unit Bar Chart with Brush and Zoom</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/4f14881eb51a0bc07d9319f9d43feae1'>D3: Unit Bar Chart with Brush and Zoom</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/59a6be8a4bc8799c58787cb98066eeb5'>D3: Unit Bar Chart with Brush and Zoom</a>

mit Licensed

Similar vizzes

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

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

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

76% match

Loading thumbnail…

Area Chart with Brushing

This example presents an area chart of monthly price data from January 2000 through March 2010, rendered as an SVG with a main focus chart and a smaller context panel beneath it. The visualization demonstrates linked brushing: users can select a range on the context panel with a brush, which zooms the focus chart to that time period. The code uses d3’s scaleTime, scaleLinear, area, and brushX APIs, with axes generated by axisBottom and axisLeft. The interactive brushing triggers a zoom by re-computing the x-domain and redrawing the focus area and axis.

BBrightPeace

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

75% match

Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey

75% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This example combines an interactive zoomable sunburst (partition layout) with a grouped horizontal bar chart. The visualization encodes hierarchical data from flare.json using an SVG-based circular partition layout, where each node’s arc size reflects its aggregated value. The root circle supports click-to-zoom: clicking a deeper arc zooms in, and clicking the center zooms out, with smooth transitions. Color is mapped from the top-level category using a categorical scale, while lightness encodes value magnitude via a sqrt scale. The animation uses D3's transition and tween functions to interpolate arc geometry during zooming, providing an animated drill-down/up experience. The chart is built with D3 v3 and rendered entirely in SVG, and the code is available under the MIT license.

663anp3ca

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

74% match