style SVG styling svg width 840px height 600px path line style div id chart svg svg div button class regenerate Regenerate button script type text javascript src https d3js org d3 v7 min js script script Tree configuration var branches var seed i 0 x 420 y 600 a 0 l 100 d 0 a angle l length d depth var da 0 3 Angle delta var dl 0 85 Length delta factor var ar 0 7 Randomness var maxDepth 10 Tree creation functions function branch b var end endPt b daR newB branches push b if b d maxDepth return Left branch daR ar Math random ar 0 5 newB i branches length x end x y end y a b a da daR l b l dl d b d 1 parent b i branch newB Right branch daR ar Math random ar 0 5 newB i branches length x end x y end y a b a da daR l b l dl d b d 1 parent b i branch newB function regenerate k initialise console log regenerate initialise branches branch seed initialise create update function endPt b Return endpoint of branch var x b x b l Math sin b a var y b y b l Math cos b a return x x y y D3 functions var color d3 scaleLinear domain 0 maxDepth range black purple function x1 d return d x function y1 d return d y function x2 d return endPt d x function y2 d return endPt d y function highlightParents e d var colour e type mouseover green color d d var depth d d for var i 0 i depth i d3 select id parseInt d i style stroke colour d branches d parent function create d3 select svg selectAll line data branches enter append line attr x1 x1 attr y1 y1 attr x2 x2 attr y2 y2 style stroke width function d var t parseInt maxDepth 5 1 d d 5 return t px style stroke function d return color d d attr id function d return id d i on mouseover highlightParents on mouseout highlightParents function update d3 select svg selectAll line data branches transition attr x1 x1 attr y1 y1 attr x2 x2 attr y2 y2 d3 selectAll regenerate on click regenerate regenerate null true console log ready script style body min height 600px style script type text javascript src https d3js org d3 v7 min js script script var w 600 var h 600 var theta 12 Math PI 190 var length 29 var x0 w 2 var y0 h var t0 Math PI 2 5 function tree string var tree root path M x0 y0 children step x x0 y y0 t t0 branch root var instructions F function step x length Math cos step t step y length Math sin step t step branch path L step x step y function step t theta function step t theta function tree push step step Object create step var branch path M step x step y children step branch children push branch step branch branch function step tree pop string split forEach function a instructions a return root var svg d3 select body append svg attr width w attr height h datum tree line 4 F F F F F FF FF F F F each grow function grow d d3 select this append path attr stroke black attr stroke opacity 0 45 attr stroke width function d i i Math PI 38 attr fill none attr d function d return d path d3 select this selectAll g data d children enter append g transition on start grow function line n rules axiom if n 0 return axiom else return line n rules axiom replace g function a return rules a a console log ready script style body height 600px min height 600px style script type text javascript src https d3js org d3 v7 min js script script var width window innerWidth var height window innerHeight var svg d3 select body append svg attr width width attr height height var elementCount svg append text attr x width 2 attr y height 20 attr text anchor middle attr fill gray var format d3 format var nMax 100 var mouseX 800 var mouseY 200 var scaleFactor 0 99 function redraw var scale 14 angle mouseY height Math PI 8 n Math floor nMax mouseX width up Math PI render fractal width 2 height 136 up scale angle 0 n false function fractal x y direction scale angle i n flip var circle x x y y radius scale 2 if i n if i 11 0 return circle concat fractal x y direction scale angle i 1 n flip concat fractal x y direction scale angle i 1 n flip else return circle concat fractal x Math sin direction scale y Math cos direction scale direction angle flip 1 1 scale scaleFactor angle i 1 n flip return circle function r return Math floor Math random 255 function render data var circles svg selectAll circle data data circles enter append circle merge circles attr cx function d return d x attr cy function d return d y attr r function d return d radius attr fill function return rgb r r r join circles exit remove elementCount text format data length SVG Circle elements redraw document addEventListener mousemove function e mouseX e x 2 mouseY e y redraw script
ta function tree push step step Object create step var branch path M step x step y children step branch children push branch step branch branch function step tree pop string split forEach function a instructions a return root var svg d3 select body append svg attr width w attr height h datum tree line 4 F F F F F FF FF F F F each grow function grow d d3 select this append path attr stroke black attr stroke opacity 0 45 attr stroke width function d i i Math PI 38 attr fill none attr d function d return d path d3 select this selectAll g data d children enter append g transition on start grow function line n rules axiom if n 0 return axiom else return line n rules axiom replace g function a return rules a a console log ready script style body height 600px min height 600px style script type text javascript src https d3js org d3 v7 min js script script var width window innerWidth var height window innerHeight var svg d3 select body append svg attr width width attr height height var elementCount svg append text attr x width 2 attr y height 20 attr text anchor middle attr fill gray var format d3 format var nMax 100 var mouseX 800 var mouseY 200 var scaleFactor 0 99 function redraw var scale 14 angle mouseY height Math PI 8 n Math floor nMax mouseX width up Math PI render fractal width 2 height 136 up scale angle 0 n false function fractal x y direction scale angle i n flip var circle x x y y radius scale 2 if i n if i 11 0 return circle concat fractal x y direction scale angle i 1 n flip concat fractal x y direction scale angle i 1 n flip else return circle concat fractal x Math sin direction scale y Math cos direction scale direction angle flip 1 1 scale scaleFactor angle i 1 n flip return circle function r return Math floor Math random 255 function render data var circles svg selectAll circle data data circles enter append circle merge circles attr cx function d return d x attr cy function d return d y attr r function d return d radius attr fill function return rgb r r r join circles exit remove elementCount text format data length SVG Circle elements redraw document addEventListener mousemove function e mouseX e x 2 mouseY e y redraw script