Fast pixel drawing on canvas

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

</style>
</head>
<body>
<script type="text/javascript">

// Following this idea: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
    var chartSize = 1000;
    var dataSize = 1000;

var dataset = d3.range(dataSize).map(function(d, i){return d3.range(dataSize).map(function(d, i){return ~~(Math.random()*255);});});

var canvas = d3.select('body')
        .append('canvas')
        .style({position: 'absolute', width: chartSize + 'px', height: chartSize + 'px'})
        .attr({width: dataSize, height: dataSize})
        .node();

var canvasWidth  = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

var buf = new ArrayBuffer(imageData.data.length);
    var buf8 = new Uint8ClampedArray(buf);
    var data = new Uint32Array(buf);

for (var y = 0; y < canvasHeight; ++y) {
        for (var x = 0; x < canvasWidth; ++x) {
            var value = dataset[y][x];
            data[y * canvasWidth + x] =
                (255   << 24) |    // alpha
                (value/2 << 16) |    // blue
                (value <<  8) |    // green
                255;            // red
        }
    }

imageData.data.set(buf8);

ctx.putImageData(imageData, 0, 0);
    
</script>
</body>
</html>

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

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