block by emeeks 905c4691f343fc4780bd

Circular Brush 1

Full Screen

A first draft of d3.svg.circularBrush which allows you to select cyclical ranges. It’s patterned after d3.svg.brush, so you drag the resize handles to change the extent or drag the extent to move it around the selection surface. In this case it’s mapped to an array of 24 values (1-24), each represented in a pie arc, thus implying a clock. By dragging and resizing the brush, you select the corresponding arcs.

Cyclical time is an obvious application for a brush like this, allowing you to select a period of time such as “between 10PM and 2AM” to filter your results by.

index.html

d3.svg.circularbrush.js