D3 Canvas Scatterplot - 1

<!doctype html>
<html>
    <head>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script>
            const height = 400;
            const width = 960;
            let timer, startTime;

function showTimeSince(startTime) {
                const currentTime = new Date().getTime();
                const runtime = currentTime - startTime;
                document.getElementById('timeRendering').innerHTML = runtime + 'ms';
            }

function startTimer() {
                stopTimer();

startTime = new Date().getTime();

timer = setInterval(function() {
                    showTimeSince(startTime);
                }, 10);

showTimeSince(startTime);
            }

function stopTimer() {
                if (timer) {
                    clearInterval(timer);
                }

showTimeSince(startTime);
            }

function paintCanvas(canvas, data) {
                // get the canvas drawing context
                const context = canvas.getContext("2d");

// clear the canvas from previous drawing
                context.clearRect(0, 0, canvas.width, canvas.height);

// draw a circle for each datum
                data.forEach(d => {
                    // start a new path for drawing
                    context.beginPath();

// paint an arc based on the datum
                    const x = d.x * canvas.width;
                    const y = d.y * canvas.height;
                    context.arc(x, y, 2, 0, 2 * Math.PI);

// fill the point
                    context.fill();
                });
            }

function renderChart() {
                // Get the amount of data to generate
                const numPoints = parseInt(document.getElementsByName('numPoints')[0].value, 10);
                if (isNaN(numPoints)) {
                    return;
                }

const data = generateData(numPoints);

// Make a container div for our graph elements to position themselves against
                const graphDiv = d3.selectAll('div').data([0]);
                graphDiv.enter().append('div')
                    .style('position', 'relative');

// Make a canvas for the points
                const canvas = graphDiv.selectAll('canvas').data([0]);
                canvas.enter().append('canvas')
                    .attr('height', height)
                    .attr('width', width)
                    .style('position', 'absolute');

startTimer();
                paintCanvas(canvas.node(), data);
                stopTimer();
            }
        </script>
    </head>
    <body>
        <form action="">
            <input name="numPoints" type="text" value="10000">
            <button type="button" id="render" onClick="renderChart()">Render</button>
        </form>
        Time Rendering: <span id="timeRendering"></span>
    </body>
</html>

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

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