D3 Histogram data distribution script type text javascript src https d3js org d3 v7 min js script script data 1 2 3 8 7 4 9 8 7 3 4 5 2 1 9 7 8 4 0 2 3 8 7 6 min d3 min data max d3 max data 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 10 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 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 1 attr height function d return height y d length style fill 69b3a2 console log ready script 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 10 10 10 10 10 10 10 10 10 10 10 10 9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 5 10 10 10 10 7 10 10 10 10 10 10 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 min d3 min data max d3 max data 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 10 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 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 1 attr height function d return height y d length style fill 69b3a2 createPlot console log ready script Slight extension of the previous version to include an update method which animates the transition to new data 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 1 1 1 2 2 2 2 1 textarea div style border 1px solid black padding 5px border radius 3px onclick createPlot load div div style border 1px solid black padding 5px border radius 3px onclick refresh random div script type text javascript src https d3js org d3 v7 min js script script let margin top 30 right 30 bottom 30 left 50 let margin top 0 right 0 bottom 0 left 0 let width 400 let height 400 function createPlot createPlot does a force clear recreate d3 select svg remove let text document getElementById dataarea value text text replaceAll n processes the data from the text area extracts numbers only let data text split map entry parseInt entry filter entry typeof entry number let min d3 min data let max d3 max data let domain min max The number of bins let Nbin 10 let x d3 scaleLinear domain domain range 0 width let histogram d3 histogram domain x domain then the domain of the graphic thresholds Nbin then the numbers of bins put the data into bins let bins histogram data Add the svg element to the body and set the dimensions and margins of the graph let 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 attr class xaxis svg append g attr class xaxis2 attr transform translate 0 height call d3 axisBottom x let y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length svg append g attr class yaxis append g attr class yaxis2 call d3 axisLeft y svg append g attr class rects 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 1 attr height function d return height y d length style fill 69b3a2 end createPlot createPlot Adding refresh method to reload new data this version is for a transition type change function refresh console log refreshing let rn 8 Math round Math random 5 0 var values d3 range 50 map d3 randomUniform 1 rn let min d3 min values let max d3 max values let domain min max var x d3 scaleLinear domain domain range 0 width x ticks 20 var bins d3 histogram domain x domain then the domain of the graphic thresholds 10 then the numbers of bins values put data in bins var svg d3 select svg svg select xaxis2 remove svg select xaxis append g attr class xaxis2 attr transform translate 0 height call d3 axisBottom x d3 select yaxis2 remove let y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length d3 select yaxis append g attr class yaxis2 call d3 axisLeft y Reset y domain using new data var yMax d3 max bins function d return d length var yMin d3 min bins function d return d length var colorScale d3 scaleLinear domain yMin yMax range d3 rgb blue brighter d3 rgb red darker d3 select rects selectAll rect data bins join function enter enter append rect attr x 1 attr transform function d return translate x d x0 height attr width function d return x d x1 x d x0 attr height function d return 0 transition duration 1000 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 attr height function d return height y d length style fill function d return colorScale d length function update update transition duration 1000 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 attr height function d return height y d length style fill function d return colorScale d length function exit exit style fill 00ffff remove end refresh Calling refresh repeatedly every 5 seconds with random values setInterval function refresh values 5000 refresh console log ready script
a text split map entry parseInt entry filter entry typeof entry number let min d3 min data let max d3 max data let domain min max The number of bins let Nbin 10 let x d3 scaleLinear domain domain range 0 width let histogram d3 histogram domain x domain then the domain of the graphic thresholds Nbin then the numbers of bins put the data into bins let bins histogram data Add the svg element to the body and set the dimensions and margins of the graph let 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 attr class xaxis svg append g attr class xaxis2 attr transform translate 0 height call d3 axisBottom x let y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length svg append g attr class yaxis append g attr class yaxis2 call d3 axisLeft y svg append g attr class rects 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 1 attr height function d return height y d length style fill 69b3a2 end createPlot createPlot Adding refresh method to reload new data this version is for a transition type change function refresh console log refreshing let rn 8 Math round Math random 5 0 var values d3 range 50 map d3 randomUniform 1 rn let min d3 min values let max d3 max values let domain min max var x d3 scaleLinear domain domain range 0 width x ticks 20 var bins d3 histogram domain x domain then the domain of the graphic thresholds 10 then the numbers of bins values put data in bins var svg d3 select svg svg select xaxis2 remove svg select xaxis append g attr class xaxis2 attr transform translate 0 height call d3 axisBottom x d3 select yaxis2 remove let y d3 scaleLinear range height 0 domain 0 d3 max bins function d return d length d3 select yaxis append g attr class yaxis2 call d3 axisLeft y Reset y domain using new data var yMax d3 max bins function d return d length var yMin d3 min bins function d return d length var colorScale d3 scaleLinear domain yMin yMax range d3 rgb blue brighter d3 rgb red darker d3 select rects selectAll rect data bins join function enter enter append rect attr x 1 attr transform function d return translate x d x0 height attr width function d return x d x1 x d x0 attr height function d return 0 transition duration 1000 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 attr height function d return height y d length style fill function d return colorScale d length function update update transition duration 1000 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 attr height function d return height y d length style fill function d return colorScale d length function exit exit style fill 00ffff remove end refresh Calling refresh repeatedly every 5 seconds with random values setInterval function refresh values 5000 refresh console log ready script