A New Pattern for Updatable D3.js Charts

Using a new updatable chart format. Update functions are made accessible to the caller, handing over chart controls with full functionality to the caller in a modular manner. Data binding is done with method chaining, like any other configuration variable, and can be changed after initialization. This allows for changes to be rendered in the context of chart history, leveraging D3's transitions and update logic.

forked from rcmoore38's block: A New Pattern for Updatable D3.js Charts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Updatable Charts (4 of 4)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="chart.js"></script>
    <style>
        div {
            padding: 20px 0 0 10px;
        }
    </style>
</head>
<body>
    <div id="updatableChart"></div>
    <script>
        
        var dataSet = [];
        var highTemperatures = dataSet[0] = [77, 71, 82, 87, 84, 78, 80, 84, 86, 72, 71, 68, 75, 73, 80, 85, 86, 80];
        var lowTemperatures = dataSet[1] = highTemperatures.map(function(d) { return d - Math.random() * 30});
        var milesRun = dataSet[2] = [2, 5, 4, 3, 1, 2, 1];
        var fillColors = ['coral', 'steelblue', 'teal'];

var updatableChart = barChart().width(800).data(highTemperatures);

d3.select('#updatableChart')
            .call(updatableChart);

window.setTimeout(function() {
            updatableChart.height(450);
        }, 1000);

var i = 1;
        window.setInterval(function() {
            updatableChart.data(dataSet[i]);
            updatableChart.fillColor(fillColors[i]);
            i = (i+1) % 3 ;
        }, 2500);

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js