d3js histogram line script type text javascript src https d3js org d3 v7 min js script script let data 1 3 30 30 30 30 60 20 1 20 10 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 map d return d console log grade boundaries boundaries let bins d3 bin domain 0 100 thresholds boundaries let databins bins data console log databins databins 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 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 let binDomain 0 d3 max databins function d return d length y scale var y d3 scaleLinear range height 0 domain binDomain y axis svg append g call d3 axisLeft y d3 dots svg selectAll dot data databins enter append circle attr fill ffab00 attr stroke fff 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 Binds data to the line attr fill none attr stroke ffab00 attr stroke width 3 attr d line Calls the line generator script d3js multiple histograms lines instead of bars script type text javascript src https d3js org d3 v7 min js script script function multiHistogramPlot datas 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 let maxy d3 max databins d return d3 max d g return d 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 variable i style font size 15px attr alignment baseline middle end i end multiHistogramPlot 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 script
ade 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 let maxy d3 max databins d return d3 max d g return d 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 variable i style font size 15px attr alignment baseline middle end i end multiHistogramPlot 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 script