Using brush for fine-grained zooming

[ux-engineer]

I have implemented a complex raw signal data viewing application with D3. There is timeseries data visualized spanning up 15 hours with length and having definition of up to 200 Hz, meaning there is a data point for each 5ms period.

Measures have been taken that not too many datapoints are drawn in the browser at a time by reducing the amount of datapoints displayed.

This data series is using d3-brush to show a timeline for the full length of the period, while in the main screen there is a chart showing a window of the curve that can be zoomed inwards down to the definition of showing 10s or 5s time period.

Zoom is triggered by brushElem.call(brush.move, brushRange);

With this approach I'm hitting a limit in fine-grained zooming, where the brushRange, say [333, 334] would equal down to 1px width of the timeline. So basically with a common dataset scenario I'm limited to zooming in only down to 30s time period... Any less would amount to less than 1px width dimension on the timeline and it doesn't work anymore.

How to overcome this limitation?

[Fil]

Is it something similar to https://blockbuilder.org/Fil/076415313a08e76ae60d468e2cb25909 ?

(related: d3/d3-zoom#222)

[ux-engineer]

@Fil yes it's very much similar implementation.

That example is triggering zoom in similar fashion by context.select(".brush").call(brush.move, x.range().map(t.invertX, t));

Trying out zooming there with dragging by mouse I can narrow down the zoom level to 4 days span, and then on it jumps somehow to a kind of zero span with label showing ':24' and no actual data drawn... Weird.

[Fil]

when you are brushing the selection s can be [387, 387] (it will be nulled when you release the mouse). At this point the code uses x.domain(s.map(x2.invert, x2)); and d3.zoomIdentity.scale(width / (s[1] - s[0])) and everything breaks on NaN.
A solution is to add a small value to the right-hand-side of the selection so that it's never 0 pixel wide

  var s = event.selection || x2.range();
+  s[1] += .5;

or more precisely

  var s = event.selection || x2.range();
+  if (s[1] === s[0]) s[1] += .5;