script type text javascript src https d3js org d3 v7 min js script script src https unpkg com d3 sankey 0 12 3 dist d3 sankey min js script script src https cdn jsdelivr net npm d3 sankey script style body min height 400px node rect fill opacity 9 shape rendering crispEdges node text pointer events none text shadow 0 1px 0 fff link fill none stroke 000 stroke opacity 2 link hover stroke opacity 5 style svg svg script function getRndBiasGauss min max N D var a 1 b 50 c D 100 var influence Math floor Math random 101 x Math floor Math random max min 1 min return x N x Math floor gauss influence N x x Math floor gauss influence x N function gauss x return a Math exp x b x b 2 c c function getRndBias min max bias influence var rnd Math random max min min random in range mix Math random influence random mixer return rnd 1 mix bias mix mix full range and bias let data for let l 0 l 4 l for let k 0 k 100 k let rn getRndBias 0 100 60 1 0 data push lab l mark rn name sn k group labs together var datagroup d3 group data d d lab console log datagroup datagroup get 0 length datagroup get 1 length console log extent d3 extent datagroup get 0 d d mark d3 extent datagroup get 3 d d mark let h d3 histogram value function d return d mark domain 0 100 thresholds 0 25 50 75 100 let layer h datagroup get 0 h datagroup get 1 h datagroup get 2 h datagroup get 3 console log num bins layer 0 length console log layer 0 0 length console log layer 0 1 length console log layer 0 2 length console log layer 0 3 length console log datagroup get 0 var sankeydata nodes node 0 name 0 25 lab 0 node 1 name 25 50 lab 0 node 2 name 50 75 lab 0 node 3 name 75 100 lab 0 node 4 name 0 25 node 5 name 25 50 node 6 name 50 75 node 7 name 75 100 node 8 name 0 25 node 9 name 25 50 node 10 name 50 75 node 11 name 75 100 node 12 name 0 25 node 13 name 25 50 node 14 name 75 100 node 15 name 75 100 links lab 1 2 source 0 target 4 value layer 0 0 length source 0 target 5 value layer 0 1 length source 0 target 6 value layer 0 2 length source 0 target 7 value layer 0 3 length source 1 target 4 value layer 0 0 length source 1 target 5 value layer 0 1 length source 1 target 6 value layer 0 2 length source 1 target 7 value layer 0 3 length source 2 target 4 value layer 0 0 length source 2 target 5 value layer 0 1 length source 2 target 6 value layer 0 2 length source 2 target 7 value layer 0 3 length source 3 target 4 value layer 0 0 length source 3 target 5 value layer 0 1 length source 3 target 6 value layer 0 2 length source 3 target 7 value layer 0 3 length lab 2 3 source 4 target 8 value layer 1 0 length source 4 target 9 value layer 1 1 length source 4 target 10 value layer 1 2 length source 4 target 11 value layer 1 3 length source 5 target 8 value layer 1 0 length source 5 target 9 value layer 1 1 length source 5 target 10 value layer 1 2 length source 5 target 11 value layer 1 3 length source 6 target 8 value layer 1 0 length source 6 target 9 value layer 1 1 length source 6 target 10 value layer 1 2 length source 6 target 11 value layer 1 3 length source 7 target 8 value layer 1 0 length source 7 target 9 value layer 1 1 length source 7 target 10 value layer 1 2 length source 7 target 11 value layer 1 3 length lab 3 4 source 8 target 12 value layer 2 0 length source 8 target 13 value layer 2 1 length source 8 target 14 value layer 2 2 length source 8 target 15 value layer 2 3 length source 9 target 12 value layer 2 0 length source 9 target 13 value layer 2 1 length source 9 target 14 value layer 2 2 length source 9 target 15 value layer 2 3 length source 10 target 12 value layer 2 0 length source 10 target 13 value layer 2 1 length source 10 target 14 value layer 2 2 length source 10 target 15 value layer 2 3 length source 11 target 12 value layer 2 0 length source 11 target 13 value layer 2 1 length source 11 target 14 value layer 2 2 length source 11 target 15 value layer 2 3 length set the dimensions and margins of the graph var margin top 10 right 10 bottom 40 left 10 var width 600 margin left margin right var height 300 margin top margin bottom format variables var formatNumber d3 format 0f zero decimal places var format function d return formatNumber d var color d3 scaleOrdinal d3 schemeCategory10 append the svg object to the body of the page var svg d3 select svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top Set the sankey diagram properties var sankey d3 sankey nodeWidth 36 nodePadding 40 size width height var path sankey links var graph sankey sankeydata add in the links var link svg append g selectAll link data graph links enter append path attr class link attr d d3 sankeyLinkHorizontal attr stroke width function d return d width add the link titles link append title text function d return d source name d target name n format d value add in the nodes var node svg append g selectAll node data graph nodes enter append g attr class node add the rectangles for the nodes node append rect attr x function d return d x0 attr y function d return d y0 attr height function d return d y1 d y0 attr width sankey nodeWidth style fill function d k return d color color k 4 style stroke function d return d3 rgb d color darker 2 append title text function d return d name n format d value add in the title for the nodes node append text attr x function d return d x0 6 attr y function d return d y1 d y0 2 attr dy 0 35em attr text anchor end text function d return d name filter function d return d x0 width 2 attr x function d return d x1 6 attr text anchor start lab number node append text attr x function d return d x0 attr y function d return height margin top margin bottom 30 filter function d k return k 4 0 text function d k return Lab k 4 console log ready script
target 11 value layer 1 3 length source 6 target 8 value layer 1 0 length source 6 target 9 value layer 1 1 length source 6 target 10 value layer 1 2 length source 6 target 11 value layer 1 3 length source 7 target 8 value layer 1 0 length source 7 target 9 value layer 1 1 length source 7 target 10 value layer 1 2 length source 7 target 11 value layer 1 3 length lab 3 4 source 8 target 12 value layer 2 0 length source 8 target 13 value layer 2 1 length source 8 target 14 value layer 2 2 length source 8 target 15 value layer 2 3 length source 9 target 12 value layer 2 0 length source 9 target 13 value layer 2 1 length source 9 target 14 value layer 2 2 length source 9 target 15 value layer 2 3 length source 10 target 12 value layer 2 0 length source 10 target 13 value layer 2 1 length source 10 target 14 value layer 2 2 length source 10 target 15 value layer 2 3 length source 11 target 12 value layer 2 0 length source 11 target 13 value layer 2 1 length source 11 target 14 value layer 2 2 length source 11 target 15 value layer 2 3 length set the dimensions and margins of the graph var margin top 10 right 10 bottom 40 left 10 var width 600 margin left margin right var height 300 margin top margin bottom format variables var formatNumber d3 format 0f zero decimal places var format function d return formatNumber d var color d3 scaleOrdinal d3 schemeCategory10 append the svg object to the body of the page var svg d3 select svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top Set the sankey diagram properties var sankey d3 sankey nodeWidth 36 nodePadding 40 size width height var path sankey links var graph sankey sankeydata add in the links var link svg append g selectAll link data graph links enter append path attr class link attr d d3 sankeyLinkHorizontal attr stroke width function d return d width add the link titles link append title text function d return d source name d target name n format d value add in the nodes var node svg append g selectAll node data graph nodes enter append g attr class node add the rectangles for the nodes node append rect attr x function d return d x0 attr y function d return d y0 attr height function d return d y1 d y0 attr width sankey nodeWidth style fill function d k return d color color k 4 style stroke function d return d3 rgb d color darker 2 append title text function d return d name n format d value add in the title for the nodes node append text attr x function d return d x0 6 attr y function d return d y1 d y0 2 attr dy 0 35em attr text anchor end text function d return d name filter function d return d x0 width 2 attr x function d return d x1 6 attr text anchor start lab number node append text attr x function d return d x0 attr y function d return height margin top margin bottom 30 filter function d k return k 4 0 text function d k return Lab k 4 console log ready script