stream csv into canvas

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/papaparse/4.1.2/papaparse.min.js" charset="utf-8"></script>
</head>

<body>

var nullColor = 100;

var element = document.getElementById("canvas1");
    var ctx = element.getContext("2d");
    element.width = dataLenghtX;
    element.height = dataLenghtY;
    var imageData = ctx.createImageData(dataLenghtX, dataLenghtY);
    var value = null;

function convertRange( value, r1, r2 ) {
        return ( value - r1[ 0 ] ) * ( r2[ 1 ] - r2[ 0 ] ) / ( r1[ 1 ] - r1[ 0 ] ) + r2[ 0 ];
    }

function draw(values){
        for (var x = 0; x < values.length; x++) {
            if(isNaN(values[x])){
                index = x * 4;
                imageData.data[index + 0] = nullColor;
                imageData.data[index + 1] = nullColor;
                imageData.data[index + 2] = nullColor;
                imageData.data[index + 3] = 255;
            }
            else{
                value = convertRange(values[x], [valuesMin, valuesMax], [0, 255]);

index = x * 4;
                imageData.data[index + 0] = value / 2;
                imageData.data[index + 1] = value;
                imageData.data[index + 2] = 255;
                imageData.data[index + 3] = 255;
            }
        }
        ctx.putImageData(imageData, 0,y, 0, 0, dataLenghtX, 1);
    }

</script>

</body>
</html>

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

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js to https://cdnjs.cloudflare.com/ajax/libs/papaparse/4.1.2/papaparse.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js