jrbalsano/index.html

## index.html
<!doctype html>
<html>
    <head>
        <script src="http://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 generateData(numPoints) {
                const data = [];
                for (let i = 0; i < numPoints; i++) {
                    data.push({
                        x: Math.random(),
                        y: Math.random()
                    });
                }
                return data;
            }

            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>
	<!doctype html>
	<html>
	<head>
	<script src="http://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 generateData(numPoints) {
	const data = [];
	for (let i = 0; i < numPoints; i++) {
	data.push({
	x: Math.random(),
	y: Math.random()
	});
	}
	return data;
	}

	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>