d3js stacked bar chart example style body min height 300px style script src https d3js org d3 v7 js script div id mychart div script let subgroups F E D C B A let boundaries 0 30 40 50 60 70 set the dimensions and margins of the graph let width 400 let height 400 const margin top 10 right 30 bottom 20 left 50 width width margin left margin right height height margin top margin bottom append the svg object to the body of the page const svg d3 select mychart append svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top const data 20 2 30 20 99 20 33 49 6 10 30 10 2 20 40 89 20 63 49 6 10 20 40 90 20 30 10 2 5 10 3 33 63 49 6 10 20 40 90 20 60 2 30 20 69 20 33 69 6 10 50 const groups 2019 2020 2021 2022 let bins d3 bin domain 0 100 thresholds boundaries let data2 for let i 0 i data length i let numdata data i length let databins bins data i console assert subgroups length databins length let ratios for let k 0 k databins length k let n databins k length ratios subgroups k 100 n numdata data2 push ratios console log data2 data2 Add X axis const x d3 scaleBand domain groups range 0 width padding 0 2 svg append g attr transform translate 0 height call d3 axisBottom x tickSizeOuter 0 Add Y axis const y d3 scaleLinear domain 0 100 range height 0 svg append g call d3 axisLeft y color palette one color per subgroup const color d3 scaleOrdinal domain subgroups range e41a1c 377eb8 4daf4a 148f4a e48f4a 04804a const stackedData d3 stack keys subgroups data2 Show the bars svg append g selectAll g Enter in the stack data loop key per key group per group data stackedData join g attr fill d color d key selectAll rect enter a second time loop subgroup per subgroup to add all rectangles data d d join rect attr x d i return 15 x bandwidth 1 25 i attr y d return y d 1 attr height d y d 0 y d 1 attr width x bandwidth console log ready script d3js stacked bar chart example style body min height 300px style script src https d3js org d3 v7 js script div id mychart div script let subgroups F E D C B A let boundaries 0 30 40 50 60 70 var rawdata y 2019 g 45 y 2019 g 70 y 2019 g 88 y 2019 g 75 y 2019 g 51 5 y 2019 g 85 y 2019 g 70 y 2019 g 60 y 2019 g 85 y 2019 g 68 y 2019 g 90 y 2019 g 73 y 2019 g 88 y 2019 g 71 y 2019 g 65 y 2019 g 76 y 2019 g 61 y 2019 g 85 y 2019 g 77 y 2019 g 77 y 2019 g 75 y 2019 g 65 y 2019 g 40 y 2019 g 60 y 2019 g 68 y 2019 g 57 y 2019 g 68 y 2019 g 70 y 2019 g 83 y 2019 g 70 y 2019 g 69 y 2019 g 85 y 2019 g 70 y 2019 g 85 y 2019 g 94 y 2019 g 68 y 2019 g 78 y 2019 g 73 y 2019 g 70 y 2019 g 59 y 2019 g 67 y 2019 g 74 y 2019 g 93 y 2019 g 72 y 2019 g 79 y 2019 g 71 y 2019 g 78 y 2019 g 68 y 2019 g 78 y 2019 g 77 y 2019 g 84 y 2019 g 57 y 2019 g 68 y 2019 g 82 y 2019 g 60 y 2019 g 67 y 2019 g 70 y 2019 g 70 y 2019 g 61 y 2019 g 71 y 2019 g 69 y 2019 g 45 y 2019 g 78 y 2019 g 86 y 2019 g 70 y 2019 g 44 y 2019 g 64 y 2019 g 68 y 2020 g 74 y 2020 g 63 y 2020 g 73 y 2020 g 70 y 2020 g 40 y 2020 g 49 y 2020 g 74 y 2020 g 59 y 2020 g 71 y 2020 g 69 y 2020 g 53 y 2020 g 76 y 2020 g 75 y 2020 g 94 y 2020 g 67 y 2020 g 81 y 2020 g 65 y 2020 g 62 y 2020 g 68 y 2020 g 56 y 2020 g 79 y 2020 g 73 y 2020 g 79 y 2020 g 80 y 2020 g 58 y 2020 g 67 y 2020 g 51 y 2020 g 82 y 2020 g 70 y 2020 g 58 y 2020 g 70 y 2020 g 85 y 2020 g 48 y 2020 g 76 y 2020 g 75 y 2020 g 17 y 2020 g 89 y 2020 g 66 y 2020 g 66 y 2020 g 77 y 2020 g 32 y 2020 g 51 y 2020 g 65 y 2020 g 78 y 2020 g 60 y 2020 g 52 y 2020 g 56 y 2020 g 72 y 2020 g 43 y 2020 g 71 y 2020 g 68 y 2020 g 68 y 2020 g 80 y 2020 g 72 y 2020 g 60 y 2020 g 67 y 2020 g 62 y 2020 g 50 y 2020 g 71 y 2020 g 64 y 2020 g 66 y 2020 g 74 y 2020 g 79 y 2020 g 78 y 2020 g 65 y 2020 g 75 y 2020 g 73 y 2020 g 78 y 2020 g 42 y 2020 g 87 y 2020 g 90 y 2020 g 86 y 2020 g 75 y 2020 g 67 y 2021 g 78 y 2021 g 67 y 2021 g 73 y 2021 g 78 y 2021 g 84 y 2021 g 60 y 2021 g 65 y 2021 g 84 y 2021 g 80 y 2021 g 72 y 2021 g 86 y 2021 g 33 y 2021 g 64 y 2021 g 67 y 2021 g 45 y 2021 g 72 y 2021 g 65 y 2021 g 72 y 2021 g 53 y 2021 g 79 y 2021 g 66 y 2021 g 55 y 2021 g 55 y 2021 g 68 y 2021 g 68 y 2021 g 42 y 2021 g 71 y 2021 g 56 y 2021 g 73 y 2021 g 74 y 2021 g 79 y 2021 g 73 y 2021 g 77 y 2021 g 64 y 2021 g 61 y 2021 g 57 y 2021 g 69 y 2021 g 63 y 2021 g 78 y 2021 g 81 y 2021 g 63 y 2021 g 74 y 2021 g 72 y 2021 g 85 y 2021 g 72 y 2021 g 70 y 2021 g 64 y 2021 g 76 y 2021 g 65 y 2021 g 62 y 2021 g 70 y 2021 g 55 y 2021 g 61 y 2021 g 82 y 2021 g 65 y 2021 g 26 y 2021 g 42 y 2021 g 58 y 2021 g 82 y 2021 g 77 y 2021 g 71 y 2021 g 76 y 2021 g 61 y 2021 g 66 y 2021 g 84 y 2021 g 56 y 2021 g 76 y 2021 g 74 y 2021 g 59 y 2021 g 68 y 2021 g 60 y 2021 g 73 y 2021 g 86 y 2021 g 69 y 2021 g 78 y 2021 g 84 y 2021 g 43 y 2021 g 62 y 2021 g 84 y 2021 g 82 y 2021 g 68 y 2021 g 71 y 2021 g 60 y 2021 g 57 y 2021 g 67 y 2021 g 63 y 2021 g 82 y 2021 g 62 y 2021 g 83 y 2021 g 88 y 2021 g 81 y 2021 g 76 y 2021 g 71 y 2021 g 69 y 2021 g 69 y 2021 g 65 y 2021 g 60 y 2021 g 75 y 2021 g 81 y 2021 g 80 y 2021 g 65 y 2021 g 62 y 2021 g 62 y 2021 g 68 y 2021 g 73 y 2021 g 51 y 2021 g 34 y 2021 g 72 y 2021 g 82 y 2021 g 50 y 2021 g 72 y 2022 g 72 y 2022 g 58 y 2022 g 71 y 2022 g 20 y 2022 g 52 y 2022 g 80 y 2022 g 60 y 2022 g 73 y 2022 g 76 y 2022 g 80 y 2022 g 77 y 2022 g 63 y 2022 g 73 y 2022 g 78 y 2022 g 48 y 2022 g 80 y 2022 g 34 y 2022 g 53 5 y 2022 g 64 y 2022 g 72 y 2022 g 59 y 2022 g 80 y 2022 g 67 y 2022 g 76 y 2022 g 62 y 2022 g 80 y 2022 g 77 y 2022 g 78 y 2022 g 72 y 2022 g 69 y 2022 g 46 y 2022 g 72 5 y 2022 g 83 y 2022 g 82 y 2022 g 81 y 2022 g 63 y 2022 g 64 5 y 2022 g 70 y 2022 g 75 y 2022 g 56 y 2022 g 65 y 2022 g 71 y 2022 g 62 y 2022 g 62 y 2022 g 51 y 2022 g 74 5 y 2022 g 62 y 2022 g 60 y 2022 g 67 y 2022 g 68 5 y 2022 g 66 y 2022 g 45 y 2022 g 77 y 2022 g 56 y 2022 g 80 y 2022 g 84 y 2022 g 80 y 2022 g 87 y 2022 g 63 y 2022 g 61 y 2022 g 72 y 2022 g 58 y 2022 g 74 y 2022 g 74 y 2022 g 70 y 2022 g 69 y 2022 g 65 y 2022 g 50 y 2022 g 76 y 2022 g 83 5 y 2022 g 53 y 2022 g 71 y 2022 g 68 y 2022 g 65 y 2022 g 37 y 2022 g 53 y 2022 g 71 y 2022 g 80 y 2022 g 73 y 2022 g 65 y 2022 g 30 y 2022 g 72 y 2022 g 69 y 2022 g 80 y 2022 g 83 y 2022 g 69 y 2022 g 70 y 2022 g 50 y 2022 g 70 y 2022 g 80 y 2022 g 78 y 2022 g 75 y 2022 g 66 y 2022 g 79 y 2022 g 80 y 2022 g 75 y 2022 g 80 y 2022 g 59 y 2022 g 0 y 2022 g 86 y 2022 g 52 5 y 2022 g 0 y 2022 g 64 y 2022 g 50 y 2022 g 45 y 2022 g 69 y 2022 g 69 y 2022 g 56 y 2022 g 84 y 2022 g 42 y 2022 g 80 y 2022 g 40 5 y 2022 g 66 y 2022 g 57 5 y 2022 g 82 y 2022 g 65 y 2022 g 65 y 2022 g 59 y 2022 g 60 y 2022 g 76 5 y 2022 g 68 y 2022 g 58 y 2022 g 66 y 2022 g 56 y 2022 g 59 y 2022 g 72 y 2022 g 86 y 2022 g 49 5 y 2022 g 35 y 2022 g 48 y 2022 g 82 y 2022 g 65 y 2022 g 71 y 2022 g 56 y 2022 g 65 y 2022 g 37 y 2022 g 62 y 2022 g 62 5 y 2022 g 67 5 y 2022 g 83 y 2022 g 69 y 2022 g 28 y 2022 g 86 y 2022 g 76 y 2022 g 73 y 2022 g 80 y 2022 g 46 y 2022 g 62 y 2022 g 65 y 2022 g 88 y 2022 g 69 y 2022 g 65 let groups d3 groups rawdata d d y console log groups length 4 groups 2019 2020 2021 2022 let groupnames d3 map groups d d 0 console log groupnames groupnames set the dimensions and margins of the graph let width 400 let height 400 const margin top 10 right 30 bottom 20 left 50 width width margin left margin right height height margin top margin bottom append the svg object to the body of the page const svg d3 select mychart append svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top let bins d3 bin domain 0 100 thresholds boundaries let data2 for let i 0 i groups length i let dd d3 map groups i 1 d d g let databins bins dd let numitems dd length console log dd dd console assert subgroups length databins length let ratios for let k 0 k databins length k let n databins k length ratios subgroups k 100 n numitems data2 push ratios console log data2 data2 Add X axis const x d3 scaleBand domain groupnames range 0 width padding 0 2 svg append g attr transform translate 0 height call d3 axisBottom x tickSizeOuter 0 Add Y axis const y d3 scaleLinear domain 0 100 range height 0 svg append g call d3 axisLeft y color palette one color per subgroup const color d3 scaleOrdinal domain subgroups range red green blue orange yellow purple const stackedData d3 stack keys subgroups data2 Show the bars svg append g selectAll g Enter in the stack data loop key per key group per group data stackedData join g attr fill d color d key selectAll rect enter a second time loop subgroup per subgroup to add all rectangles data d d join rect attr x d i return 15 x bandwidth 1 25 i attr y d return y d 1 attr height d y d 0 y d 1 attr width x bandwidth for let i 0 i subgroups length i console log subgroups subgroups i let col color subgroups i Handmade legend svg append circle attr cx 5 attr cy 20 i 20 attr r 6 style fill col svg append text attr x 20 attr y 20 i 20 text Grade subgroups i style font size 15px attr alignment baseline middle text label for the y axis svg append text attr transform rotate 90 attr y 0 margin left attr x 0 height 2 attr dy 1em style text anchor middle text Percentage of submissions with grade console log ready script
66 y 2021 g 84 y 2021 g 56 y 2021 g 76 y 2021 g 74 y 2021 g 59 y 2021 g 68 y 2021 g 60 y 2021 g 73 y 2021 g 86 y 2021 g 69 y 2021 g 78 y 2021 g 84 y 2021 g 43 y 2021 g 62 y 2021 g 84 y 2021 g 82 y 2021 g 68 y 2021 g 71 y 2021 g 60 y 2021 g 57 y 2021 g 67 y 2021 g 63 y 2021 g 82 y 2021 g 62 y 2021 g 83 y 2021 g 88 y 2021 g 81 y 2021 g 76 y 2021 g 71 y 2021 g 69 y 2021 g 69 y 2021 g 65 y 2021 g 60 y 2021 g 75 y 2021 g 81 y 2021 g 80 y 2021 g 65 y 2021 g 62 y 2021 g 62 y 2021 g 68 y 2021 g 73 y 2021 g 51 y 2021 g 34 y 2021 g 72 y 2021 g 82 y 2021 g 50 y 2021 g 72 y 2022 g 72 y 2022 g 58 y 2022 g 71 y 2022 g 20 y 2022 g 52 y 2022 g 80 y 2022 g 60 y 2022 g 73 y 2022 g 76 y 2022 g 80 y 2022 g 77 y 2022 g 63 y 2022 g 73 y 2022 g 78 y 2022 g 48 y 2022 g 80 y 2022 g 34 y 2022 g 53 5 y 2022 g 64 y 2022 g 72 y 2022 g 59 y 2022 g 80 y 2022 g 67 y 2022 g 76 y 2022 g 62 y 2022 g 80 y 2022 g 77 y 2022 g 78 y 2022 g 72 y 2022 g 69 y 2022 g 46 y 2022 g 72 5 y 2022 g 83 y 2022 g 82 y 2022 g 81 y 2022 g 63 y 2022 g 64 5 y 2022 g 70 y 2022 g 75 y 2022 g 56 y 2022 g 65 y 2022 g 71 y 2022 g 62 y 2022 g 62 y 2022 g 51 y 2022 g 74 5 y 2022 g 62 y 2022 g 60 y 2022 g 67 y 2022 g 68 5 y 2022 g 66 y 2022 g 45 y 2022 g 77 y 2022 g 56 y 2022 g 80 y 2022 g 84 y 2022 g 80 y 2022 g 87 y 2022 g 63 y 2022 g 61 y 2022 g 72 y 2022 g 58 y 2022 g 74 y 2022 g 74 y 2022 g 70 y 2022 g 69 y 2022 g 65 y 2022 g 50 y 2022 g 76 y 2022 g 83 5 y 2022 g 53 y 2022 g 71 y 2022 g 68 y 2022 g 65 y 2022 g 37 y 2022 g 53 y 2022 g 71 y 2022 g 80 y 2022 g 73 y 2022 g 65 y 2022 g 30 y 2022 g 72 y 2022 g 69 y 2022 g 80 y 2022 g 83 y 2022 g 69 y 2022 g 70 y 2022 g 50 y 2022 g 70 y 2022 g 80 y 2022 g 78 y 2022 g 75 y 2022 g 66 y 2022 g 79 y 2022 g 80 y 2022 g 75 y 2022 g 80 y 2022 g 59 y 2022 g 0 y 2022 g 86 y 2022 g 52 5 y 2022 g 0 y 2022 g 64 y 2022 g 50 y 2022 g 45 y 2022 g 69 y 2022 g 69 y 2022 g 56 y 2022 g 84 y 2022 g 42 y 2022 g 80 y 2022 g 40 5 y 2022 g 66 y 2022 g 57 5 y 2022 g 82 y 2022 g 65 y 2022 g 65 y 2022 g 59 y 2022 g 60 y 2022 g 76 5 y 2022 g 68 y 2022 g 58 y 2022 g 66 y 2022 g 56 y 2022 g 59 y 2022 g 72 y 2022 g 86 y 2022 g 49 5 y 2022 g 35 y 2022 g 48 y 2022 g 82 y 2022 g 65 y 2022 g 71 y 2022 g 56 y 2022 g 65 y 2022 g 37 y 2022 g 62 y 2022 g 62 5 y 2022 g 67 5 y 2022 g 83 y 2022 g 69 y 2022 g 28 y 2022 g 86 y 2022 g 76 y 2022 g 73 y 2022 g 80 y 2022 g 46 y 2022 g 62 y 2022 g 65 y 2022 g 88 y 2022 g 69 y 2022 g 65 let groups d3 groups rawdata d d y console log groups length 4 groups 2019 2020 2021 2022 let groupnames d3 map groups d d 0 console log groupnames groupnames set the dimensions and margins of the graph let width 400 let height 400 const margin top 10 right 30 bottom 20 left 50 width width margin left margin right height height margin top margin bottom append the svg object to the body of the page const svg d3 select mychart append svg attr width width margin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top let bins d3 bin domain 0 100 thresholds boundaries let data2 for let i 0 i groups length i let dd d3 map groups i 1 d d g let databins bins dd let numitems dd length console log dd dd console assert subgroups length databins length let ratios for let k 0 k databins length k let n databins k length ratios subgroups k 100 n numitems data2 push ratios console log data2 data2 Add X axis const x d3 scaleBand domain groupnames range 0 width padding 0 2 svg append g attr transform translate 0 height call d3 axisBottom x tickSizeOuter 0 Add Y axis const y d3 scaleLinear domain 0 100 range height 0 svg append g call d3 axisLeft y color palette one color per subgroup const color d3 scaleOrdinal domain subgroups range red green blue orange yellow purple const stackedData d3 stack keys subgroups data2 Show the bars svg append g selectAll g Enter in the stack data loop key per key group per group data stackedData join g attr fill d color d key selectAll rect enter a second time loop subgroup per subgroup to add all rectangles data d d join rect attr x d i return 15 x bandwidth 1 25 i attr y d return y d 1 attr height d y d 0 y d 1 attr width x bandwidth for let i 0 i subgroups length i console log subgroups subgroups i let col color subgroups i Handmade legend svg append circle attr cx 5 attr cy 20 i 20 attr r 6 style fill col svg append text attr x 20 attr y 20 i 20 text Grade subgroups i style font size 15px attr alignment baseline middle text label for the y axis svg append text attr transform rotate 90 attr y 0 margin left attr x 0 height 2 attr dy 1em style text anchor middle text Percentage of submissions with grade console log ready script