D3 Reusable Charts with Prototypes

Uses prototypes instead of closures to execute the D3 enter/update/exit pattern. This example shows the axes, grids, and plot elements being updated on each call so that the enter, update, and exit functions are executed. The code is based off of the javascript code for mpld3. You can find the code base for this visualization here.

<!DOCTYPE html>
<html lang="en">

</head>

var data = get_data(100);
    draw_test(data);

var inputScale = d3.scale.quantize()
        .domain([0, 1])
        .range([5, 20, 60, 200, 100, 65, 30, 2]);

!function loop(){
        d3.transition()
            .ease("linear")
            .duration(10000)
            .tween("transform", function (){
                return function (t){
                    draw_test(get_data(inputScale(t)));
                }
            })
    }();

function draw_test(data) {
        var chart = viz.mpld3.scatter();

chart.x(function(d) {
            return d.features[0]
        });
        chart.y(function(d) {
            return d.features[1]
        });
        chart.c(function(d) {
            return d.label;
        });

var fig = new viz.plot.figure(chart(data));
        fig.draw("#test");
    }
    </script>
</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js