D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
tmcw
Full window
Github gist
CSS Transforms with many contained objects
<!DOCTYPE html> <meta charset="utf-8"> <title>SVG Swarm</title> <style> svg { position: absolute; top: 0; } path { fill:none; stroke-width:1; stroke:#000; } </style> <div id="fps">FPS: <span>?</span></div> <script src="https://d3js.org/d3.v2.min.js?2.9.1"></script> <script> var data = d3.range(20000); var width = 960, height = 500; var x = d3.scale.linear() .domain([-5, 5]) .range([0, width]); var y = d3.scale.linear() .domain([-5, 5]) .range([0, height]); var time0 = Date.now(), time1; var fps = d3.select("#fps span"); var var transformProp = (function(props) { var style = document.documentElement.style; for (var i = 0; i < props.length; i++) { if (props[i] in style) return { transform: 'transform', WebkitTransform: '-webkit-transform', OTransform: '-o-transform', MozTransform: '-moz-transform', msTransform: '-ms-transform' }[props[i]]; } return false; })(['transform', 'WebkitTransform', 'OTransform', 'MozTransform', 'msTransform']); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var g = svg.append('g').attr('width', 200).attr('height', 200); var p = g.selectAll("circle") .data(data) .enter() .append('circle') .attr('r', 2) .attr('transform', function(d, i) { return 'translate(' + [Math.random() * 200, Math.random() * 200] + ')' }); var fpsqueue = []; d3.timer(function() { g.style(transformProp, function() { return 'translate(' + Math.random() * 600 + 'px,' + Math.random() * 200 + 'px)' }); time1 = Date.now(); if (fpsqueue.length === 100) { fps.text(d3.mean(fpsqueue).toFixed(3)); fpsqueue = []; } fpsqueue.push(Math.round(1000 / (time1 - time0))); time0 = time1; }); </script>
Modified
http://d3js.org/d3.v2.min.js?2.9.1
to a secure url
https://d3js.org/d3.v2.min.js?2.9.1