script var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 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 var triangle d3 symbol type d3 symbolTriangle size 5 0 const svg d3 select svg var data given earlier slides 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 node append circle attr r function d return d r nodes append path attr d d3 symbol type function d i return d3 symbolTriangle attr transform translate 0 0 nodes append text attr dy 4 text function d return d children undefined d data name console log ready script script var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 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 20 20 400 400 g g svg script Demonstration custom d3 symbol var customSymbol draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 8 i let ang i 8 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath const svg d3 select svg var data given earlier slides 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 var color d3 scaleOrdinal domain 1 10 range d3 schemeSet3 nodes append path attr transform function d return scale d r 0 26 attr d d3 symbol type function d i return customSymbol style fill function d i return color i style stroke 253544 style stroke width 0 01px nodes append text attr dy 4 text function d return d children undefined d data name console log ready script script var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 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 style spinner display inline block width 50px height 50px filter drop shadow 3px 5px 2px rgb 0 0 0 0 4 rotate animation rotate 125 0s linear infinite keyframes rotate from transform rotate 0deg to transform rotate 360deg style svg viewBox 20 20 400 400 g g svg script custom d3 symbol for shape var customSymbol draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 8 i let ang i 8 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath const svg d3 select svg var data given earlier slides 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 var color d3 scaleOrdinal domain 1 10 range d3 schemeSet3 nodes append g attr class spinner rotate append path attr transform function d return scale d r 0 26 attr d d3 symbol type function d i return customSymbol style fill function d i return color i style stroke 253544 style stroke width 0 01px nodes append text attr dy 4 text function d return d children undefined d data name console log ready script script var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 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 style spinner display inline block width 50px height 50px filter drop shadow 3px 5px 2px rgb 0 0 0 0 4 rotate animation rotate 125 0s linear infinite keyframes rotate from transform rotate 0deg to transform rotate 360deg rotate2 animation rotate2 105 0s linear infinite keyframes rotate2 from transform rotate 0deg to transform rotate 360deg style svg viewBox 20 20 400 400 g g svg script custom d3 symbol for shape var customSymbol draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 8 i let ang i 8 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath var customSymbol2 draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 18 i let ang i 18 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath const svg d3 select svg var data given earlier slides 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 var color d3 scaleOrdinal domain 1 10 range d3 schemeSet3 nodes append g attr class function d i return i 2 spinner rotate spinner rotate2 append path attr transform function d return scale d r 0 26 attr d d3 symbol type function d i return i 2 customSymbol customSymbol2 style fill function d i return color i style stroke 253544 style stroke width 0 01px nodes append text attr dy 4 text function d return d children undefined d data name console log ready script
from transform rotate 0deg to transform rotate 360deg style svg viewBox 20 20 400 400 g g svg script custom d3 symbol for shape var customSymbol draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 8 i let ang i 8 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath const svg d3 select svg var data given earlier slides 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 var color d3 scaleOrdinal domain 1 10 range d3 schemeSet3 nodes append g attr class spinner rotate append path attr transform function d return scale d r 0 26 attr d d3 symbol type function d i return customSymbol style fill function d i return color i style stroke 253544 style stroke width 0 01px nodes append text attr dy 4 text function d return d children undefined d data name console log ready script script var data name A1 children name B1 children name C1 value 100 name C2 value 300 name C3 value 200 name B2 value 200 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 style spinner display inline block width 50px height 50px filter drop shadow 3px 5px 2px rgb 0 0 0 0 4 rotate animation rotate 125 0s linear infinite keyframes rotate from transform rotate 0deg to transform rotate 360deg rotate2 animation rotate2 105 0s linear infinite keyframes rotate2 from transform rotate 0deg to transform rotate 360deg style svg viewBox 20 20 400 400 g g svg script custom d3 symbol for shape var customSymbol draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 8 i let ang i 8 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath var customSymbol2 draw function context size let s Math sqrt size 2 context moveTo Math sin 0 s Math cos 0 s for let i 0 i 18 i let ang i 18 2 Math PI context lineTo Math sin ang s Math cos ang s context closePath const svg d3 select svg var data given earlier slides 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 var color d3 scaleOrdinal domain 1 10 range d3 schemeSet3 nodes append g attr class function d i return i 2 spinner rotate spinner rotate2 append path attr transform function d return scale d r 0 26 attr d d3 symbol type function d i return i 2 customSymbol customSymbol2 style fill function d i return color i style stroke 253544 style stroke width 0 01px nodes append text attr dy 4 text function d return d children undefined d data name console log ready script