script type text javascript src https d3js org d3 v7 min js script svg viewBox 0 20 400 400 g g svg script const svg d3 select svg var colors FBB65B 513551 de3163 var data day Mon apricots 120 blueberries 180 cherries 100 day Tue apricots 60 blueberries 185 cherries 105 day Wed apricots 100 blueberries 215 cherries 110 day Thu apricots 80 blueberries 230 cherries 105 day Fri apricots 120 blueberries 240 cherries 105 var stack d3 stack keys apricots blueberries cherries var stackedSeries stack data Create a g element for each series var g d3 select g selectAll g series data stackedSeries enter append g classed series true style fill function d i return colors i For each series create a rect element for each day g selectAll rect data function d return d join rect attr width function d return d 1 d 0 attr x function d return d 0 attr y function d i return i 20 attr height 19 script script type text javascript src https d3js org d3 v7 min js script svg viewBox 200 200 400 400 g g svg script const svg d3 select svg var arcGenerator d3 arc innerRadius 20 outerRadius 100 padAngle 02 padRadius 100 cornerRadius 4 var arcData startAngle 0 endAngle 0 2 startAngle 0 2 endAngle 0 6 startAngle 0 6 endAngle 1 4 startAngle 1 4 endAngle 3 startAngle 3 endAngle 2 Math PI d3 select g selectAll path data arcData join path attr fill orange attr d arcGenerator script script type text javascript src https d3js org d3 v7 min js script svg viewBox 200 200 400 400 g g svg style text font family Helvetica Neue Helvetica sans serif font size 12px font weight bold fill white text anchor middle path fill orange stroke white style script const svg d3 select svg Create an arc generator with configuration var arcGenerator d3 arc innerRadius 20 outerRadius 100 var arcData label A startAngle 0 endAngle 0 2 label B startAngle 0 2 endAngle 0 6 label C startAngle 0 6 endAngle 1 4 label D startAngle 1 4 endAngle 3 label E startAngle 3 endAngle 2 Math PI Create a path element and set its d attribute d3 select g selectAll path data arcData join path attr d arcGenerator Add labels using centroid to position d3 select g selectAll text data arcData join text each function d var centroid arcGenerator centroid d d3 select this attr x centroid 0 attr y centroid 1 attr dy 0 33em text d label script script type text javascript src https d3js org d3 v7 min js script svg viewBox 50 20 800 400 g g svg style text font family Helvetica Neue Helvetica sans serif font size 12px text anchor middle path fill none stroke 999 style script const svg d3 select svg var symbolGenerator d3 symbol size 100 var symbolTypes symbolCircle symbolCross symbolDiamond symbolSquare symbolStar symbolTriangle symbolWye var xScale d3 scaleLinear domain 0 symbolTypes length 1 range 0 700 d3 select g selectAll path data symbolTypes join path attr transform function d i return translate xScale i 0 attr d function d symbolGenerator type d3 d return symbolGenerator d3 select g selectAll text data symbolTypes join text attr transform function d i return translate xScale i 40 text function d return d3 d script script type text javascript src https d3js org d3 v7 min js script svg viewBox 200 200 400 400 g g svg style svg path fill ddd stroke ccc opacity 0 8 style script const svg d3 select svg var chordGenerator d3 chord sortSubgroups d3 ascending padAngle 0 04 var ribbonGenerator d3 ribbon radius 200 var data 10 20 30 40 60 80 100 200 300 var chords chordGenerator data d3 select g selectAll path data chords join path attr d ribbonGenerator script
e 0 2 label B startAngle 0 2 endAngle 0 6 label C startAngle 0 6 endAngle 1 4 label D startAngle 1 4 endAngle 3 label E startAngle 3 endAngle 2 Math PI Create a path element and set its d attribute d3 select g selectAll path data arcData join path attr d arcGenerator Add labels using centroid to position d3 select g selectAll text data arcData join text each function d var centroid arcGenerator centroid d d3 select this attr x centroid 0 attr y centroid 1 attr dy 0 33em text d label script script type text javascript src https d3js org d3 v7 min js script svg viewBox 50 20 800 400 g g svg style text font family Helvetica Neue Helvetica sans serif font size 12px text anchor middle path fill none stroke 999 style script const svg d3 select svg var symbolGenerator d3 symbol size 100 var symbolTypes symbolCircle symbolCross symbolDiamond symbolSquare symbolStar symbolTriangle symbolWye var xScale d3 scaleLinear domain 0 symbolTypes length 1 range 0 700 d3 select g selectAll path data symbolTypes join path attr transform function d i return translate xScale i 0 attr d function d symbolGenerator type d3 d return symbolGenerator d3 select g selectAll text data symbolTypes join text attr transform function d i return translate xScale i 40 text function d return d3 d script script type text javascript src https d3js org d3 v7 min js script svg viewBox 200 200 400 400 g g svg style svg path fill ddd stroke ccc opacity 0 8 style script const svg d3 select svg var chordGenerator d3 chord sortSubgroups d3 ascending padAngle 0 04 var ribbonGenerator d3 ribbon radius 200 var data 10 20 30 40 60 80 100 200 300 var chords chordGenerator data d3 select g selectAll path data chords join path attr d ribbonGenerator script