script type text javascript src https d3js org d3 v7 min js script style body font 10px sans serif min height 400px axis path axis line fill none stroke 000 shape rendering crispEdges x axis path display none style script 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 0 6 data push lab lab l mark rn name sn k set the dimensions and margins of the graph const margin top 10 right 30 bottom 20 left 50 width 460 margin left margin right height 400 margin top margin bottom append the svg object to the body of the page const svg d3 select body 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 group labs together var groups d3 group data d d lab let h d3 histogram value function d return d mark domain 0 100 thresholds 0 25 50 75 100 let groupedmarks lab0 h groups get lab0 lab1 h groups get lab1 lab2 h groups get lab2 lab3 h groups get lab3 let subgroups lab0 lab1 lab2 lab3 console log groupedmarks lab0 0 length console log groupedmarks lab1 0 length let yrange d3 max subgroups map d groupedmarks d d return d3 max d 0 length d 1 length d 2 length d 3 length console log yrange yrange Add X axis const x d3 scaleBand domain subgroups range 0 width padding 0 2 svg append g attr transform translate 0 height call d3 axisBottom x tickSize 0 Add Y axis const y d3 scaleLinear domain 0 yrange range height 0 svg append g call d3 axisLeft y Another scale for subgroup position const xSubgroup d3 scaleBand domain subgroups range 0 x bandwidth padding 0 05 color palette one color per subgroup const color d3 scaleOrdinal domain subgroups range 141efc e77e28 4daf4a e41a1c Show the bars svg append g selectAll g data subgroups join g attr transform d k translate k 80 0 selectAll rect data function d k console log d return groupedmarks d map g return key d value g join rect attr x d k xSubgroup d key k xSubgroup bandwidth attr y d k y d value length attr width xSubgroup bandwidth attr height d k height y d value length attr fill d k return color k console log ready script
console log groupedmarks lab0 0 length console log groupedmarks lab1 0 length let yrange d3 max subgroups map d groupedmarks d d return d3 max d 0 length d 1 length d 2 length d 3 length console log yrange yrange Add X axis const x d3 scaleBand domain subgroups range 0 width padding 0 2 svg append g attr transform translate 0 height call d3 axisBottom x tickSize 0 Add Y axis const y d3 scaleLinear domain 0 yrange range height 0 svg append g call d3 axisLeft y Another scale for subgroup position const xSubgroup d3 scaleBand domain subgroups range 0 x bandwidth padding 0 05 color palette one color per subgroup const color d3 scaleOrdinal domain subgroups range 141efc e77e28 4daf4a e41a1c Show the bars svg append g selectAll g data subgroups join g attr transform d k translate k 80 0 selectAll rect data function d k console log d return groupedmarks d map g return key d value g join rect attr x d k xSubgroup d key k xSubgroup bandwidth attr y d k y d value length attr width xSubgroup bandwidth attr height d k height y d value length attr fill d k return color k console log ready script