D3 Canvas Scatterplot - 2

<!doctype html>
<html>
    <head>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script>
            const margin = { top: 20, right: 20, bottom: 40, left: 40 };
            const height = 400 - margin.top - margin.bottom;
            const width = 960 - margin.left - margin.right;
            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(() => {
                    showTimeSince(startTime);
                }, 10);

showTimeSince(startTime);
            }

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

showTimeSince(startTime);
            }

function paintCanvas(canvas, data, x, y) {
                // 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 => {
                        // get the DOM element for the node
                        const domNode = d3.select(this);

// start a new path for drawing
                        context.beginPath();

// paint an arc based on datum and scales
                        context.arc(x(d.x), y(d.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 an SVG for axes
                const svg = graphDiv.selectAll('svg').data([0]);
                svg.enter().append('svg')
                    .style('position', 'absolute')
                    .attr('height', height + margin.top + margin.bottom)
                    .attr('width', width + margin.left + margin.right)

// Create groups for axes
                const xAxisG = svg.selectAll('g.x').data([0]);
                xAxisG.enter().append('g')
                    .attr('class', 'x')
                    .attr('transform', 'translate(' + margin.left + ', ' + (margin.top + height) + ')');

const yAxisG = svg.selectAll('g.y').data([0]);
                yAxisG.enter().append('g')
                    .attr('class', 'y')
                    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

// Create scales
                const x = d3.scale.linear()
                    .domain([0, 1])
                    .range([0, width]);
                const y = d3.scale.linear()
                    .domain([0, 1])
                    .range([height, 0]);

// Create axes
                const xAxis = d3.svg.axis()
                    .scale(x)
                    .orient('bottom');
                const yAxis = d3.svg.axis()
                    .scale(y)
                    .orient('left');
                xAxisG.call(xAxis);
                yAxisG.call(yAxis);

// 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')
                    .style('top', margin.top + 'px')
                    .style('left', margin.left + 'px');

startTimer();
                paintCanvas(canvas.node(), data, x, y);
                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