d3 interaction

d3 interaction

d3 comes with varied support for interaction: event handlers and more specific tools for brushing, zooming...

Basic interaction

Basic interaction

d3's .on function ties DOM-event handlers to selections.

var circles = svg.selectAll('circle')
  .on('mouseover', function(d){
    console.log(this);
    console.log(d);
  });

Basic interaction

Let's try it on: code/d3-interaction/01_bitcoin_vis.html (or use your own!)

First, console.log elements that have been interacted with. Then, highlight them.

Basic interaction

Useful DOM-events:

• click
• mouseover
• mousemove
• mouseout
• touchstart
• touchmove
• touchend

Basic interaction

Sometimes very useful: pointer-events: none (CSS)

Tooltips

Most common type of interaction: tooltips!
Not directly supported in d3, but easy to build yourself:

Or use qTip2 or one of the other 75.000 tooltip libraries out there...

More on transitions

More on transitions

Transitions can be tweaked using:

var t = d3.transition();
// add initial delay:
t.delay(500);
// change duration:
t.duration(5000);
// add event handlers:
t.on("end", function(d){ ... });
  

More on transitions

Want to be really fancy? Change the easings on the transitions!

d3.transition().ease(d3.easeBounceInOut)

Basic interaction

Let's try it on: code/d3-interaction/02_more_transitions.html

Advanced interaction

Advanced interaction

d3 has several specific behaviors supporting brushing, dragging, ...

Drag

Drag

Read up on d3-drag and d3.event, then use the basic d3-template from code/d3-basics/template.html to:

Draw some random circles on screen. Then make them draggable.

Zoom

Zoom

d3's zoom makes handling zoom+pan easier.

Zoom

Let's look at examples:

Brushes

Brushes

Brushes let you select parts of a chart:

Brushes

d3 (of course) has a helper function for that: d3.brush().

d3-brush

Brushes

Go back to your circle-example from before. Instead of dragging them, add a brush and highlight them when they're inside the brush.

Brushes

Another cool brushing demo:

Combining behaviors

You can also combine d3 behaviors:

(even more advanced - enjoy :)

More tools: