D3 Histogram data distribution Lines Bars are also drawn to compare style dot fill ffab00 stroke fff line fill none stroke ffab00 stroke width 3 style textarea style width 100 min height 50px id dataarea 10 10 10 9 10 10 10 10 7 10 10 7 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 0 10 10 10 10 10 10 10 9 10 7 10 10 9 10 9 9 3 9 9 9 9 textarea div style border 1px solid black padding 5px border radius 3px onclick createPlot Update div script type text javascript src https d3js org d3 v7 min js script script function createPlot d3 select svg remove let text document getElementById dataarea value text text replaceAll n data text split map entry parseInt entry filter entry typeof entry number const min d3 min data const min 0 always have the plot start at 0 const max d3 max data const domain min max var margin top 30 right 30 bottom 30 left 50 var width 460 margin left margin right var height 400 margin top margin bottom The number of bins var Nbin 12 for let i 0 i data length i data i 0 999 var x d3 scaleLinear domain domain range 0 width var histogram d3 histogram domain x domain then the domain of the graphic thresholds Nbin then the numbers of bins And apply this function to data to get the bins var bins histogram data Add the svg element to the body and set the dimensions and margins of the graph 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 svg append g attr transform translate 0 height call d3 axisBottom x var y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length svg append g call d3 axisLeft y d3 s bar generator svg selectAll rect data bins enter append rect attr x 1 attr transform function d return translate x d x0 y d length attr width function d return x d x1 x d x0 0 attr height function d return height y d length style fill 69b3a2 d3 dots svg selectAll dot data bins enter append circle attr class dot attr cx function d return x d x0 0 5 attr cy function d return y d length attr r 5 d3 s line generator var line d3 line x function d i return x d x0 0 5 set the x values for the line generator y function d return y d length set the y values for the line generator curve d3 curveMonotoneX apply smoothing to the line Other line smoothing options curve d3 curveBasis see http bl ocks org d3indepth b6d4845973089bc1012dec1674d3aff8 svg append path datum bins Binds data to the line attr class line Assign a class for styling attr d line Calls the line generator end CreatePlot createPlot console log ready script
argin left margin right attr height height margin top margin bottom append g attr transform translate margin left margin top svg append g attr transform translate 0 height call d3 axisBottom x var y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length svg append g call d3 axisLeft y d3 s bar generator svg selectAll rect data bins enter append rect attr x 1 attr transform function d return translate x d x0 y d length attr width function d return x d x1 x d x0 0 attr height function d return height y d length style fill 69b3a2 d3 dots svg selectAll dot data bins enter append circle attr class dot attr cx function d return x d x0 0 5 attr cy function d return y d length attr r 5 d3 s line generator var line d3 line x function d i return x d x0 0 5 set the x values for the line generator y function d return y d length set the y values for the line generator curve d3 curveMonotoneX apply smoothing to the line Other line smoothing options curve d3 curveBasis see http bl ocks org d3indepth b6d4845973089bc1012dec1674d3aff8 svg append path datum bins Binds data to the line attr class line Assign a class for styling attr d line Calls the line generator end CreatePlot createPlot console log ready script