AlainRo

a Barchart of brushes

Brushes can be used to draw a barchart. This gives an eady way to input or adjust values with the mouse !!!

AlainRo

Barchart as an input device

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()

AlainRo

Difference Chart

A v4 update to mbostock's block: Difference Chart

This variation of a bivariate area chart uses clipping to alternate colors. When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in red. A similar technique was used by William Playfair all the way back in 1786.

forked from mbostock's block: Difference Chart

forked from alexmacy's block: Difference Chart v4

AlainRo

Example of zoom and drag in d3 v4.

This example has a modified drag function so that when you zoom in, you're still able to drag the circles to the correct mouse location. Here's an example of the drag problem.

forked from puzzler10's block: d3v4 - zoom and drag circles - drag adjusted for zoom

forked from Thanaporn-sk's block: d3v4 - zoom and drag circles - drag adjusted for zoom

AlainRo

Brush & Zoom

Combining d3-brush and d3-zoom to implement Focus + Context. Another approach is to zoom to the brushed region.

forked from mbostock's block: Brush & Zoom

AlainRo

license: mit

AlainRo

Force Directed with Voronoi selection

This is a fork of mbostock's block: Force-Directed Graph where I've added a voronoi overlay. This could have a practical use by not having to click directly on a node in order select it and drag it.

From the original block:

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

AlainRo

license: mit

AlainRo

license: mit

AlainRo

d3js Exercice 3 - svg