Automated Visualization Testing

Many smart folks have been writing about data visualization lately, and there are lots of great resources available on the internet and in your favorite book store. There is one aspect of data visualization, however, that doesn’t seem to get much love—testing. That’s a shame, because effective testing, especially when it’s part of the initial planning for a visualization, is one of the best ways of ensuring high quality results.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Automated testing for JavaScript-based Data Visualizations</title>
    <style>
        /* Some basic styles to make the chart visible */
        body, h1, h2 {
            color: #444;
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            font-weight: 300;
        }
        .axis path, .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis path {
            fill: none;
            stroke: none;
        }
        .bar {
            fill: #007979;
            stroke: white;
        }
    </style>
</head>
<body>
    <div id='chart'></div>

<script src='https://d3js.org/d3.v3.min.js'></script>

<script src='https://jsdatav.is/data/barchart.js'></script>

var chart = d3.custom.barChart();

function update(data) {
            d3.select("#chart")
                .datum(data)
                .call(chart);
        };

update(randomDataset());
        setInterval(function() {update(randomDataset())}, 10000);

</script>

</body>
</html>

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

Modified http://jsDataV.is/data/barchart.js to a secure url

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

https://jsDataV.is/data/barchart.js