D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jrbalsano
Full window
Github gist
D3 Scatterplot Rendering - 2
<!doctype html> <html> <head> <script src="https://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) { startTimer(); setTimeout(function() { 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 }); stopTimer(); }, 0); } 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); drawCircles(svg, data); } </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