One could claim without much exaggeration that making data come to life in effective online tableaus is a must for any well-designed website. After all, the internet is about the transmission of information in beautiful and compelling design. Communicating effectively is key, and websites have a huge role to play in a media landscape marked by the sheer volume of available data, whether the objective is publicizing successes in genomic sequencing, reaching strategic communications goals, showcasing useful municipal information, or simply highlighting meta-data like visitor count and other forms of data analytics. Little wonder, then, that data visualization is increasingly becoming an indispensable content management resource and posting strategy. One thing to keep in mind–web browsers evolve, and so do visualization libraries. If you have not updated your list of visualization tools recently, you need to take a look at the available options.

Javascript Waypoints at work

When it comes to data visualization, gone are the days of word clouds. Enter JavaScript and a variety of libraries built around it—Springy.js, D3.js, digraph.js, chart.js, Google’s Visualization API, polymaps.js—that control the behavior of abstract mathematical models. Most of these libraries are open source but some (see, for example, plotly, ZingChart) require payment for their services. Although each of these ensures a relatively quick and effective, almost tactile, representation of data, the skill level required to make the most of a given library varies. One of the excellent open-source choices for creating charts is D3.js, especially when coupled with the Waypoints API. If you have previously dabbled in D3.js, you know that it can be a challenging library with arcane and little-known options that take time to explore. Sure, making a pie chart from scratch is easy if one is familiar with the basics of JavaScript but adding options and customizations can be tricky, as discussion on professional websites and blogs testify. One of the significant advantages of D3.js over similar libraries is that it gives the developer a great deal of control in customizing their data, rather than relying on pre-made charts that can fit it.

Some of the inherent complexity of D3.js and JavaScript objects can be tackled with the Waypoints API—it is slim but intuitive and rich in options, and provides a layer on top of D3.js that makes animations a cinch. Waypoints focuses almost exclusively on managing animations and triggering the correct function as a visitor scrolls up or down a page —for everything else you would need to depend on JavaScript or custom functions in D3.js. It does assume some knowledge of JavaScript and the dom tree, as well as JavaScript event-handling , especially when it comes to displaying a series of animated graphs on a single page. Its most important functionality is the ease with trigger points can be set up, particularly useful for fine-grained control over a series of moving objects. Ideally, the animation for each of these should trigger at a precise location, not sooner and not later, made possible by a Waypoints closure.

var wayPoint = new Waypoint({
    element: document.getElementById('div-elem'),
    handler: function(direction) {
        d3.select(".class")
            .transition()
            .duration(1200)
            .ease(d3.easeLinear)
            .delay(function (d, i) {
                return (2500 + i * 450)
            })

        var labels = [0, 1];
        var selectors = ['div-elem', 'div-elem2']

        for (var selectorIndex = selectors.length - 1; selectorIndex >= 0; selectorIndex--) {
            d3.select(".point-label-" + selectors[selectorIndex] + "-0")
                .transition()
                .duration(1200)
                .delay(function (d, i) {
                    return (2500 + i * 450)
                })
                .style("opacity", 1)
                .style("fill", colors.green)

            d3.select(".point-label-" + selectors[selectorIndex] + "-1")
                .transition()
                .duration(1200)
                .delay(function (d, i) {
                    return (2500 + i * 450)
                })
                .style("opacity", 1)
                .style("fill", colors.green)
        }
    }, offset: "100%"
});


Written by

Rad Borislavov

Rad is an (accomplished) backend PHP web developer. He lives in Evanston, IL.