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 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.

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>

forked from <a href='http://bl.ocks.org/EdinDev/'>EdinDev</a>'s block: <a href='http://bl.ocks.org/EdinDev/68ab2596430d86f4d8ed483c8b802f28'>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 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

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

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

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

73% match

Loading thumbnail…

Focus+Context+Scanning

This example demonstrates a focus+context area chart for exploring daily price data over time. It shows a large main chart for detailed viewing and a smaller overview chart below it. Users can click and drag a brush in the context panel to pan or zoom the focused view. The visualization uses D3 v3's `d3.svg.brush` component for both the context selection and a scanning feature in the main chart, which reveals a dropline and circle on mouseover. The data is loaded from a CSV file, and the SVG rendering includes animated brush interactions.

RRicCheng

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

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

73% match

Loading thumbnail…

Brush & Zoom

This example combines d3-brush and d3-zoom to create a Focus + Context interface for exploring time-series data. The main chart (focus) displays the S&P 500 index as a smooth area chart, while a smaller context chart below shows the same data. Users can brush a region in the context chart to zoom the focus view, or scroll/wheel over the focus chart to pan and zoom directly. The two views stay synchronized: brushing the context updates the focus, and zooming in the focus moves the brush. The visualization uses SVG rendering with D3 v4, with axes for time and price, and a clip path to constrain the area mark.

AAlainRo

72% match