8 min read

(For more resources related to this topic, see here.)

The ultimate goal of visualization design is to optimize applications so that they help us perform cognitive work more efficiently.

Ware C. (2012)

The goal of data visualization is to help the audience gain information from a large quantity of raw data quickly and efficiently through metaphor, mental model alignment, and cognitive magnification. So far in this article we have introduced various techniques to leverage D3 library implementing many types of visualization. However, we haven’t touched a crucial aspect of visualization: human interaction. Various researches have concluded the unique value of human interaction in information visualization.

Visualization combined with computational steering allows faster analyses of more sophisticated scenarios…This case study adequately demonstrate that the interaction of a complex model with steering and interactive visualization can extend the applicability of the modelling beyond research

Barrass I. & Leng J (2011)

In this article we will focus on D3 human visualization interaction support, or as mentioned earlier learn how to add computational steering capability to your visualization.

Interacting with mouse events

The mouse is the most common and popular human-computer interaction control found on most desktop and laptop computers. Even today, with multi-touch devices rising to dominance, touch events are typically still emulated into mouse events; therefore making application designed to interact via mouse usable through touches. In this recipe we will learn how to handle standard mouse events in D3.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter10/mouse.html

How to do it…

In the following code example we will explore techniques of registering and handling mouse events in D3. Although, in this particular example we are only handling click and mousemove, the techniques utilized here can be applied easily to all other standard mouse events supported by modern browsers:

<script type="text/javascript">
    var r = 400;

    var svg = d3.select("body")
            .append("svg");

    var positionLabel = svg.append("text")
            .attr("x", 10)
            .attr("y", 30);

    svg.on("mousemove", function () { //<-A
        printPosition();
    });
            
    function printPosition() { //<-B
        var position = d3.mouse(svg.node()); //<-C
        positionLabel.text(position);
    }  

    svg.on("click", function () { //<-D
        for (var i = 1; i < 5; ++i) {
            var position = d3.mouse(svg.node());

            var circle = svg.append("circle")
                    .attr("cx", position[0])
                    .attr("cy", position[1])
                    .attr("r", 0)
                    .style("stroke-width", 5 / (i))
                    .transition()
                        .delay(Math.pow(i, 2.5) * 50)
                        .duration(2000)
                        .ease('quad-in')
                    .attr("r", r)
                    .style("stroke-opacity", 0)
                    .each("end", function () {
                        d3.select(this).remove();
                    });
        }
    });
</script>

This recipe generates the following interactive visualization:

Mouse Interaction

How it works…

In D3, to register an event listener, we need to invoke the on function on a particular selection. The given event listener will be attached to all selected elements for the specified event (line A). The following code in this recipe attaches a mousemove event listener which displays the current mouse position (line B):

svg.on("mousemove", function () { //<-A
    printPosition();
});
            
function printPosition() { //<-B
    var position = d3.mouse(svg.node()); //<-C
    positionLabel.text(position);
}

On line C we used d3.mouse function to obtain the current mouse position relative to the given container element. This function returns a two-element array [x, y]. After this we also registered an event listener for mouse click event on line D using the same on function:

svg.on("click", function () { //<-D
        for (var i = 1; i < 5; ++i) {
            var position = d3.mouse(svg.node());

        var circle = svg.append("circle")
                .attr("cx", position[0])
                .attr("cy", position[1])
                .attr("r", 0)
                .style("stroke-width", 5 / (i)) // <-E
                .transition()
                    .delay(Math.pow(i, 2.5) * 50) // <-F
                    .duration(2000)
                    .ease('quad-in')
                .attr("r", r)
                .style("stroke-opacity", 0)
                .each("end", function () {
                    d3.select(this).remove(); // <-G
                });
        }
});

Once again, we retrieved the current mouse position using d3.mouse function and then generated five concentric expanding circles to simulate the ripple effect. The ripple effect was simulated using geometrically increasing delay (line F) with decreasing stroke-width (line E). Finally when the transition effect is over, the circles were removed using transition end listener (line G).

There’s more…

Although, we have only demonstrated listening on the click and mousemove events in this recipe, you can listen on any event that your browser supports through the on function. The following is a list of mouse events that are useful to know when building your interactive visualization:

  • click: Dispatched when user clicks a mouse button
  • dbclick: Dispatched when a mouse button is clicked twice
  • mousedown: Dispatched when a mouse button is pressed
  • mouseenter: Dispatched when mouse is moved onto the boundaries of an element or one of its descendent elements
  • mouseleave: Dispatched when mouse is moved off of the boundaries of an element and all of its descendent elements
  • mousemove: Dispatched when mouse is moved over an element
  • mouseout: Dispatched when mouse is moved off of the boundaries of an element
  • mouseover: Dispatched when mouse is moved onto the boundaries of an element
  • mouseup: Dispatched when a mouse button is released over an element

Interacting with a multi-touch device

Today, with the proliferation of multi-touch devices, any visualization targeting mass consumption needs to worry about its interactability not only through the traditional pointing device, but through multi-touches and gestures as well. In this recipe we will explore touch support offered by D3 to see how it can be leveraged to generate some pretty interesting interaction with multi-touch capable devices.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter10/touch.html.

How to do it…

In this recipe we will generate a progress-circle around the user’s touch and once the progress is completed then a subsequent ripple effect will be triggered around the circle. However, if the user prematurely ends his/her touch, then we shall stop the progress-circle without generating the ripples:

<script type="text/javascript">
    var initR = 100, 
        r = 400, 
        thickness = 20;

    var svg = d3.select("body")
            .append("svg");

    d3.select("body")
            .on("touchstart", touch)
            .on("touchend", touch);

    function touch() {
        d3.event.preventDefault();

        var arc = d3.svg.arc()
                .outerRadius(initR)
                .innerRadius(initR - thickness);
                
        var g = svg.selectAll("g.touch")
                .data(d3.touches(svg.node()), function (d) {
                    return d.identifier;
                });

        g.enter()
            .append("g")
            .attr("class", "touch")
            .attr("transform", function (d) {
                return "translate(" + d[0] + "," + d[1] + ")";
            })
            .append("path")
                .attr("class", "arc")
                .transition().duration(2000)
                .attrTween("d", function (d) {
                    var interpolate = d3.interpolate(
                            {startAngle: 0, endAngle: 0},
                            {startAngle: 0, endAngle: 2 * Math.PI}
                        );
                    return function (t) {
                        return arc(interpolate(t));
                    };
                })
                .each("end", function (d) {
                    if (complete(g))
                        ripples(d);
                    g.remove();
                });

        g.exit().remove().each(function () {
            this.__stopped__ = true;
        });
    }

    function complete(g) {
        return g.node().__stopped__ != true;
    }

    function ripples(position) {
        for (var i = 1; i < 5; ++i) {
            var circle = svg.append("circle")
                    .attr("cx", position[0])
                    .attr("cy", position[1])
                    .attr("r", initR - (thickness / 2))
                    .style("stroke-width", thickness / (i))
                .transition().delay(Math.pow(i, 2.5) * 50)
                .duration(2000).ease('quad-in')
                    .attr("r", r)
                    .style("stroke-opacity", 0)
                    .each("end", function () {
                        d3.select(this).remove();
                    });
        }
    }
</script>

This recipe generates the following interactive visualization on a touch enabled device:

Touch Interaction

How it works…

Event listener for touch events are registered through D3 selection’s on function similar to what we have done with mouse events in the previous recipe:

d3.select("body")
            .on("touchstart", touch)
            .on("touchend", touch);

One crucial difference here is that we have registered our touch event listener on the body element instead of the svg element since with many OS and browsers there are default touch behaviors defined and we would like to override it with our custom implementation. This is done through the following function call:

d3.event.preventDefault();

Once the touch event is triggered we retrieve multiple touch point data using the d3.touches function as illustrated by the following code snippet:

var g = svg.selectAll("g.touch")
    .data(d3.touches(svg.node()), function (d) {
        return d.identifier;
    });

Instead of returning a two-element array as what d3.mouse function does, d3.touches returns an array of two-element arrays since there could be multiple touch points for each touch event. Each touch position array has data structure that looks like the following:

Touch Position Array

Other than the [x, y] position of the touch point each position array also carries an identifier to help you differentiate each touch point. We used this identifier here in this recipe to establish object constancy. Once the touch data is bound to the selection the progress circle was generated for each touch around the user’s finger:

        g.enter()
            .append("g")
            .attr("class", "touch")
            .attr("transform", function (d) {
                return "translate(" + d[0] + "," + d[1] + ")";
            })
            .append("path")
                .attr("class", "arc")
                .transition().duration(2000).ease('linear')
                .attrTween("d", function (d) { // <-A
                    var interpolate = d3.interpolate(
                            {startAngle: 0, endAngle: 0},
                            {startAngle: 0, endAngle: 2 * Math.PI}
                        );
                    return function (t) {
                        return arc(interpolate(t));
                    };
                })
                .each("end", function (d) { // <-B
                    if (complete(g))
                        ripples(d);
                    g.remove();
                });

This is done through a standard arc transition with attribute tweening (line A). Once the transition is over if the progress-circle has not yet been canceled by the user then a ripple effect similar to what we have done in the previous recipe was generated on line B. Since we have registered the same event listener touch function on both touchstart and touchend events, we can use the following lines to remove progress-circle and also set a flag to indicate that this progress circle has been stopped prematurely:

        g.exit().remove().each(function () {
            this.__stopped__ = true;
        });

We need to set this stateful flag since there is no way to cancel a transition once it is started; hence, even after removing the progress-circle element from the DOM tree the transition will still complete and trigger line B.

There’s more…

We have demonstrated touch interaction through the touchstart and touchend events; however, you can use the same pattern to handle any other touch events supported by your browser. The following list contains the proposed touch event types recommended by W3C:

  • touchstart: Dispatched when the user places a touch point on the touch surface
  • touchend: Dispatched when the user removes a touch point from the touch surface
  • touchmove: Dispatched when the user moves a touch point along the touch surface
  • touchcancel: Dispatched when a touch point has been disrupted in an implementation-specific manner
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here