Skip to content

Instantly share code, notes, and snippets.

@jrbalsano
Created March 21, 2016 20:06
Embed
What would you like to do?
D3 Scatterplot Rendering - 1
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var height = 500;
var width = 960;
var timer, startTime;
var startTime;
function showTimeSince(startTime) {
var currentTime = new Date().getTime();
var runtime = currentTime - startTime;
document.getElementById('timeRendering').innerHTML = runtime + 'ms';
console.log(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 drawCircles(svg, data) {
var circles = svg.selectAll('circle').data(data);
circles.enter().append('circle')
.attr('r', 3);
circles.exit().remove();
circles
.attr('cx', function(d) { return d.x })
.attr('cy', function(d) { return d.y });
}
function renderChart() {
var numPoints = parseInt(document.getElementsByName('numPoints')[0].value, 10);
if (isNaN(numPoints)) {
return;
}
startTimer();
var data = [];
for (var i = 0; i < numPoints; i++) {
data.push({
x: Math.random() * width,
y: Math.random() * height
});
}
var svg = d3.selectAll('svg').data([0]);
svg.enter().append('svg')
.attr("height", height)
.attr("width", width);
startTimer();
drawCircles(svg, 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