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.