D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
1wheel
Full window
Github gist
intersection-multi-line
Tracing the
intersections
between moving lines.
<!DOCTYPE html> <meta charset="utf-8"> <style> body{ margin: 0px; background: black; overflow: hidden; } </style> <body> <div id='graph'></div> <script src="d3v4+jetpack.js"></script> <script src="lodash.js"></script> <script src='geometry.js'></script> <script> var width = innerWidth, height = innerHeight, ε = 1e-9, ƒ = d3.f, r = 2 var canvas = d3.select('#graph').html('') .append('canvas') .at({width, height}).node() var ctx = canvas.getContext('2d') ctx.fillStyle = '#0f0' var n = Math.min(width/20, 50) var lines = d3.range(n).map(function(d){ return [ [Math.random()*width, Math.random()*height], [Math.random()*width, Math.random()*height]] }) lines.forEach(function(d, i){ d.i = i }) var points = _.flatten(lines, true) points.forEach(function(d){ d.dx = Math.random()*1 d.dy = Math.random()*1 }) var color = d3.scaleSequential(d3.interpolateRainbow).domain([0, n*2]) </script> <script src='script.js'></script> </body>