d3js multiple histograms lines instead of bars script type text javascript src https d3js org d3 v7 min js script script function multiHistogramPlot datas legend var width 400 var height 400 var margin top 30 right 30 bottom 30 left 50 width width margin left margin right height height margin top margin bottom Grade mapping A 70 B 60 C 50 D 40 E 30 and F 30 F E D C B A let boundaries 0 30 40 50 60 70 console log boundaries var 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 let labels F E D C B A x scale var x d3 scaleBand domain labels range 0 width x axis svg append g attr transform translate 0 height call d3 axisBottom x var myColors d3 scaleOrdinal domain 0 datas length range d3 schemeSet3 let databins for let i 0 i datas length i let bins d3 bin domain 0 100 thresholds boundaries databins push bins datas i console log databins databins i console log databins databins let maxy d3 max databins d return d3 max d g return d length let maxy 0 databins forEach d d forEach g maxy Math max maxy g length console log maxy maxy let binDomain 0 maxy y scale var y d3 scaleLinear range height 0 domain binDomain y axis svg append g call d3 axisLeft y for let i 0 i databins length i let col myColors i d3 dots svg selectAll dot data databins i enter append circle attr fill none attr stroke rgba 200 200 200 0 9 attr cx function d i return width 6 0 5 i attr cy function d return y d length attr r 5 d3 s line generator var line d3 line x function d i return width 6 0 5 i y function d return y d length curve d3 curveMonotoneX curve d3 curveStepBefore svg append path datum databins i Binds data to the line attr fill none attr stroke col attr stroke width 3 attr d line Calls the line generator Handmade legend svg append circle attr cx 90 attr cy 10 i 15 attr r 6 style fill col svg append text attr x 110 attr y 10 i 15 text legend i style font size 15px attr alignment baseline middle end i 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 Number of Submissions with Grade end multiHistogramPlot 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 num groups groups length 4 groups 2019 2020 2021 2022 let groupnames d3 map groups d d 0 console log groupnames groupnames let data2 for let i 0 i groups length i let dd d3 map groups i 1 d d g data2 push dd console log data2 let data0 1 3 30 30 30 30 60 20 1 20 10 let data1 20 10 30 30 8 20 90 90 2 let data2 1 3 30 30 30 12 55 77 79 90 multiHistogramPlot data0 data1 data2 multiHistogramPlot data2 2019 2020 2021 2022 script
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 num groups groups length 4 groups 2019 2020 2021 2022 let groupnames d3 map groups d d 0 console log groupnames groupnames let data2 for let i 0 i groups length i let dd d3 map groups i 1 d d g data2 push dd console log data2 let data0 1 3 30 30 30 30 60 20 1 20 10 let data1 20 10 30 30 8 20 90 90 2 let data2 1 3 30 30 30 12 55 77 79 90 multiHistogramPlot data0 data1 data2 multiHistogramPlot data2 2019 2020 2021 2022 script