D3: Unit Bar Chart with Brush and Zoom

100%

D3: Unit Bar Chart with Brush and Zoom

✓ Published0🌍 Public

Last edited Jan 13, 2020

Created on Jan 13, 2020

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.

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/zhangzihaoDT/'>zhangzihaoDT</a>'s block: <a href='http://bl.ocks.org/zhangzihaoDT/eeb10cf248381f984386cf0bd7ec5b23'>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

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

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

75% match

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

74% match

Loading thumbnail…

D3 Brush and Tooltip Complete

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

TThanaporn-sk

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

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

71% match

Loading thumbnail…

HTML Starter

An interactive bar chart tracks Slack message counts across three categories—public channels, private channels, and direct messages—over a date range. A slider input updates highlighted circles for each category, with tooltips showing message counts for selected dates. Built with React, D3 v3, and SVG, the visualization uses `d3.scale.ordinal` for x positioning, `d3.svg.axis` for axes, and transitions for circle radius changes. Data comes from a remote CSV file via `d3.csv`.

Ssgalhamdani

71% match