Skip to content

Instantly share code, notes, and snippets.

@jrbalsano
Last active November 24, 2016 00:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrbalsano/f756a67d9a28c2664a365f62abeedf24 to your computer and use it in GitHub Desktop.
Save jrbalsano/f756a67d9a28c2664a365f62abeedf24 to your computer and use it in GitHub Desktop.
D3 Canvas Scatterplot - 1
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment