D3 Examples - Automated Visualization Testing

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.

xxxxxxxxxx
 
<!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>
​
    <!-- For display on https://bl.ocks.org use the CDN instead of local D3 -->
    <script src='https://d3js.org/d3.v3.min.js'></script>
    <!-- <script src='node_modules/d3/d3.min.js'></script> -->
​
    <!-- For display in blog post full URL instead of local file -->
    <script src='https://jsdatav.is/data/barchart.js'></script>
    <!-- <script src='chart.js'></script> -->
​
    <script>
​
        var chart = d3.custom.barChart();
​
        function randomDataset() {
            return d3.range(2 + Math.floor((Math.random() * 7)))
                .map(function(d) {
                    return {
                        label: String.fromCharCode(65+d),
                        value: Math.floor(Math.random() * 1000)
                    };
                });
        };
​
        function update(data) {
            d3.select("#chart")
                .datum(data)
                .call(chart);
        };
​
        update(randomDataset());
        setInterval(function() {update(randomDataset())}, 10000);
​
    </script>
​
</body>
</html>
​
    