script type text javascript src https d3js org d3 v7 min js script svg width 600 height 600 style border 1px solid blue script const svg d3 select svg const graph svg append g attr transform translate 20 20 console log here let nodeData x 100 y 500 r 5 c red date 2010 01 title cats x 60 y 500 r 2 c green date 2011 01 title bats x 62 y 500 r 4 c blue date 2012 01 title frogs x 53 y 500 r 3 c orange date 2012 01 title simple x 57 y 500 r 9 c pink date 2012 01 title pink x 40 y 500 r 4 c yellow date 2013 01 title aaa x 40 y 500 r 5 c purple date 2016 01 title fast x 40 y 500 r 6 c brown date 2020 01 title lost for let i 0 i 50 i nodeData push x Math random 100 r 2 Math random 6 y 500 c green title test date Math round 2010 Math random 10 01 console log nodeData nodeData nodeData map function d d date new Date d date return d const daterange d3 extent nodeData d return d date console log date range daterange var x d3 scaleTime domain daterange range 0 600 40 var x d3 scaleLinear domain 0 100 range 0 400 var y d3 scaleLinear domain 0 100 range 0 600 40 create a tooltip var Tooltip d3 select body append div style position absolute style opacity 0 attr class tooltip style background color white style border solid style border width 2px style border radius 5px style padding 5px var mouseover function i d Tooltip style opacity 1 style display block disable outline around point d3 select this style stroke black style opacity 1 var mousemove function i d console log pointer d3 pointer i 0 let mp d3 pointer i Tooltip html The exact value of this cell is d x mp mp 0 mp 1 style left mp 0 50 px style top mp 1 px var mouseleave function i d Tooltip style opacity 0 style display none draw outline around point d3 select this style stroke none style opacity 0 8 let n_frames_to_simulate 142 create a copy of the node data nodes nodeData map d Object create d console log 2016 01 01 x new Date 2016 01 01 console log y invert 0 y invert 0 console log y invert 100 y invert 100 create new force simulation specifying the forces to use and in our case how many ticks or frames we ll want to simulate sim d3 forceSimulation nodes force x d3 forceX 100 2 force y d3 forceY 100 2 force x d3 forceX x d return x new Date d date strength 0 1 force yy d3 forceY d return 700 strength 0 06 force x d3 forceX x d 100 strength 0 3 force y d3 forceY y d 600 40 strength 0 1 force collide d3 forceCollide radius d d r 1 0 Math random 0 5 use the node s actual radius force collide2 d3 forceCollide 10 force y gravityForceY force aboveaxis aboveaxis force coll2 coll2 force collide d3 forceCollide strength 0 01 radius d d r iterations 1 force charge d3 forceManyBody strength 2000 force collision d3 forceCollide strength 10 radius 25 stop tick n_frames_to_simulate start tick sim alpha 0 1 sim alphaDecay 0 01 sim alpha 0 1 function coll2 alpha var ggg nodes length for let iter 0 iter 3 iter for let ii 0 ii ggg ii for var pp 0 pp ggg pp if ii pp continue var node0 nodes ii var node1 nodes pp node0 vy 0 005 node1 vy 0 005 let dxx node0 x node1 x let dyy node0 y node1 y let dist Math sqrt dxx dxx dyy dyy let beta 8 1 if dist 20 let err 20 dist Math random 0 1 node0 vx err 0 5 beta node0 vy err 0 5 beta node1 vx err 0 5 beta node1 vy err 0 5 beta let ymax 600 40 if node0 y ymax let err node0 y ymax node y node vy 0 01 node vy err alpha 0 9 node0 vy err 0 05 node0 vy 0 95 let spa 0 01 node0 x node0 vx spa node0 y node0 vy spa node1 x node1 vx spa node1 y node1 vy spa bind data and draw nodes var node graph selectAll node data nodes enter append circle attr r d d r attr cx d return x new Date d date attr cy d d y Math random 100 return y Math random 100 attr fill d d c attr transform translate 0 0 on mouseover mouseover on mousemove mousemove on mouseleave mouseleave indicate how we should update the graph for each tick sim on tick for let i 0 i 10 i coll2 node attr cx d x new Date d date attr cy d d y sim restart var cc 0 d3 select body style cursor arrow var xAxis d3 axisBottom x graph append g attr transform translate 0 300 call xAxis var xAxis d3 axisBottom x tickFormat function date if d3 timeYear date date return d3 timeFormat m date else return d3 timeFormat Y date graph append g attr transform translate 0 600 40 call xAxis console log ready script
strength 0 06 force x d3 forceX x d 100 strength 0 3 force y d3 forceY y d 600 40 strength 0 1 force collide d3 forceCollide radius d d r 1 0 Math random 0 5 use the node s actual radius force collide2 d3 forceCollide 10 force y gravityForceY force aboveaxis aboveaxis force coll2 coll2 force collide d3 forceCollide strength 0 01 radius d d r iterations 1 force charge d3 forceManyBody strength 2000 force collision d3 forceCollide strength 10 radius 25 stop tick n_frames_to_simulate start tick sim alpha 0 1 sim alphaDecay 0 01 sim alpha 0 1 function coll2 alpha var ggg nodes length for let iter 0 iter 3 iter for let ii 0 ii ggg ii for var pp 0 pp ggg pp if ii pp continue var node0 nodes ii var node1 nodes pp node0 vy 0 005 node1 vy 0 005 let dxx node0 x node1 x let dyy node0 y node1 y let dist Math sqrt dxx dxx dyy dyy let beta 8 1 if dist 20 let err 20 dist Math random 0 1 node0 vx err 0 5 beta node0 vy err 0 5 beta node1 vx err 0 5 beta node1 vy err 0 5 beta let ymax 600 40 if node0 y ymax let err node0 y ymax node y node vy 0 01 node vy err alpha 0 9 node0 vy err 0 05 node0 vy 0 95 let spa 0 01 node0 x node0 vx spa node0 y node0 vy spa node1 x node1 vx spa node1 y node1 vy spa bind data and draw nodes var node graph selectAll node data nodes enter append circle attr r d d r attr cx d return x new Date d date attr cy d d y Math random 100 return y Math random 100 attr fill d d c attr transform translate 0 0 on mouseover mouseover on mousemove mousemove on mouseleave mouseleave indicate how we should update the graph for each tick sim on tick for let i 0 i 10 i coll2 node attr cx d x new Date d date attr cy d d y sim restart var cc 0 d3 select body style cursor arrow var xAxis d3 axisBottom x graph append g attr transform translate 0 300 call xAxis var xAxis d3 axisBottom x tickFormat function date if d3 timeYear date date return d3 timeFormat m date else return d3 timeFormat Y date graph append g attr transform translate 0 600 40 call xAxis console log ready script