Tout à la souris

Brushes can be used to draw a barchart. This gives an easy way to input or adjust values with the mouse !!! The d3 brush is a complex piece of logic taking care of events and user feed-backs. Among other characterics it exposes a nice selection rectangle which can be used as a bar !!!

2D-brushes come in two flavors see official API v4 doc

• d3.brushX()
• d3.brushY()

Let's try both of them on this example.

Code comments

Source code can be examined and modified thanks to the great Blockbuilder

Code is made of:

• CSS
• a data definition in the form of an array of objects: index:2, value: 23.34, ...
• two almost identical barchart generators (horizontal/vertical) allowing to drag a bar to a new value
• a refresh function which propagates data updates into the two barcharts

Enjoy !!