Skip to main content
100%

D3: Unit Bar Chart with Brush and Zoom

✓ Published0🌍 Public
Aandressarg
Last edited Apr 8, 2019
Created on Apr 8, 2019

A unit bar chart displays messages sent over time as a scatterplot of individual circles. The main chart area supports zooming and panning via the d3.zoom behavior, while a smaller context chart below includes a d3.brushX brush to select date ranges and update the focus view. Data is loaded from a CSV file containing message timestamps and daily message counts, rendered as semi-transparent orange circles on time-scaled axes. A summary statistic shows the total number of messages within the currently visible domain, and the brush-and-zoom linkage allows interactive exploration of the temporal distribution.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

A unit bar chart displays messages sent over time as a scatterplot of individual circles. The main chart area supports zooming and panning via the d3.zoom behavior, while a smaller context chart below includes a d3.brushX brush to select date ranges and update the focus view. Data is loaded from a CSV file containing message timestamps and daily message counts, rendered as semi-transparent orange circles on time-scaled axes. A summary statistic shows the total number of messages within the currently visible domain, and the brush-and-zoom linkage allows interactive exploration of the temporal distribution.

Aandressarg
100% 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
95% match
Loading thumbnail…

D3: Unit Bar Chart with Brush and Zoom

This example visualizes message-sending activity over time as a unit bar chart, where each orange circle represents a message sent on a given date, with the y-axis showing the count of messages per day. The chart combines a main focus panel with a smaller context panel below, enabling both brush-based selection and zooming to explore specific date ranges. It loads data from a CSV file, using D3 v4’s time scale, axis, brushX, and zoom APIs to render the SVG scatter plot and synchronize the two panels. The total message count for the visible range updates dynamically as the user interacts.

TThanaporn-sk
94% 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
94% match
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
77% 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
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
74% 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
74% match