script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style div border 1px solid blue padding 5px margin 5px min width 10px min height 10px display inline block style script var data name A size 1 children name B size 2 name C size 3 children name E size 5 name F size 6 name D size 4 build hierarchy var root d3 hierarchy data how many elements are in the hierarchy var count root descendants length console log count count node each traverses the tree from that node repeatedly calling a function on each descendant node root each d console log depth d depth name d data name recuse the hierarchy and build a visual output using divs function recurse node pdiv let div pdiv append div div text d node data name console log node depth if node children return 0 node children forEach function d recurse d div let rootdiv d3 select body append div recurse root rootdiv console log done script script type text javascript src https d3js org d3 v7 min js script style div padding 5px border 1px solid blue margin 5px display inline block style script var raw name A size 1 children name B size 2 name C size 3 children name E size 5 name F size 6 name D size 4 build hierarchy var root d3 hierarchy raw root parent children data var divs d3 select body selectAll null data root join each function d if d parent null d el d3 select body append div else d el d parent el append div console log depth d depth name d data name d el text a d data name console log done script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style rect fill cadetblue opacity 0 3 stroke white text font family Helvetica Neue Helvetica sans serif fill white font size 10px style svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var treemapLayout d3 treemap size 400 200 paddingOuter 16 var rootNode d3 hierarchy data rootNode sum function d return d value treemapLayout rootNode var nodes d3 select svg g selectAll g data rootNode descendants join g attr transform function d return translate d x0 d y0 nodes append rect attr width function d return d x1 d x0 attr height function d return d y1 d y0 nodes append text attr dx 4 attr dy 14 text function d return d data name script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style node fill steelblue stroke none link fill none stroke ccc stroke width 1px style svg viewBox 0 20 400 400 g transform translate 5 5 g class links g g class nodes g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var treeLayout d3 tree size 400 200 var root d3 hierarchy data treeLayout root Nodes d3 select svg g nodes selectAll circle node data root descendants join circle classed node true attr cx function d return d x attr cy function d return d y attr r 4 Links d3 select svg g links selectAll line link data root links join line classed link true attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style circle fill indianred opacity 0 3 stroke white text font family Helvetica Neue Helvetica sans serif fill white font size 10px text anchor middle style svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var packLayout d3 pack size 300 300 var rootNode d3 hierarchy data rootNode sum function d return d value packLayout rootNode var nodes d3 select svg g selectAll g data rootNode descendants join g attr transform function d return translate d x d y nodes append circle attr r function d return d r nodes append text attr dy 4 text function d return d children undefined d data name script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style path fill 333 opacity 0 3 stroke white style svg viewBox 200 200 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var radius 150 var partitionLayout d3 partition size 2 Math PI radius var arcGenerator d3 arc startAngle function d return d x0 endAngle function d return d x1 innerRadius function d return d y0 outerRadius function d return d y1 var rootNode d3 hierarchy data rootNode sum function d return d value partitionLayout rootNode d3 select svg g selectAll path data rootNode descendants join path attr d arcGenerator script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style rect fill 333 opacity 0 3 stroke white style svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 size 100 name C2 size 300 name C3 size 200 name B2 size 200 var partitionLayout d3 partition size 200 400 var rootNode d3 hierarchy data rootNode sum function d return d size partitionLayout rootNode d3 select svg g selectAll rect data rootNode descendants join rect attr x function d return d y0 attr y function d return d x0 attr width function d return d y1 d y0 attr height function d return d x1 d x0 script
name B2 value 200 var treeLayout d3 tree size 400 200 var root d3 hierarchy data treeLayout root Nodes d3 select svg g nodes selectAll circle node data root descendants join circle classed node true attr cx function d return d x attr cy function d return d y attr r 4 Links d3 select svg g links selectAll line link data root links join line classed link true attr x1 function d return d source x attr y1 function d return d source y attr x2 function d return d target x attr y2 function d return d target y script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style circle fill indianred opacity 0 3 stroke white text font family Helvetica Neue Helvetica sans serif fill white font size 10px text anchor middle style svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var packLayout d3 pack size 300 300 var rootNode d3 hierarchy data rootNode sum function d return d value packLayout rootNode var nodes d3 select svg g selectAll g data rootNode descendants join g attr transform function d return translate d x d y nodes append circle attr r function d return d r nodes append text attr dy 4 text function d return d children undefined d data name script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style path fill 333 opacity 0 3 stroke white style svg viewBox 200 200 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 var radius 150 var partitionLayout d3 partition size 2 Math PI radius var arcGenerator d3 arc startAngle function d return d x0 endAngle function d return d x1 innerRadius function d return d y0 outerRadius function d return d y1 var rootNode d3 hierarchy data rootNode sum function d return d value partitionLayout rootNode d3 select svg g selectAll path data rootNode descendants join path attr d arcGenerator script script type text javascript src https d3js org d3 v7 min js script script src https cdn jsdelivr net npm d3 selection 3 script style rect fill 333 opacity 0 3 stroke white style svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var data name A1 children name B1 children name C1 size 100 name C2 size 300 name C3 size 200 name B2 size 200 var partitionLayout d3 partition size 200 400 var rootNode d3 hierarchy data rootNode sum function d return d size partitionLayout rootNode d3 select svg g selectAll rect data rootNode descendants join rect attr x function d return d y0 attr y function d return d x0 attr width function d return d y1 d y0 attr height function d return d x1 d x0 script