D3 js Line Plot Multiple line plots on the same graph style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script 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 1 0 data push lab l mark rn name sn k group labs together var datagroup d3 group data d d name Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Get the limits of the data the full extent mins and max so the plotted data fits perfectly const xExtent d3 extent data d return d x const yExtent d3 extent data d return d y var myColor d3 scaleLinear domain 1 100 range blue red Append SVG Object to the Page const svg d3 select body append svg attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleBand domain lab0 lab1 lab2 lab3 range 0 xMax padding 1 0 bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green Y Axis const y d3 scaleLinear domain 0 100 range yMax 0 left y axis svg append g call d3 axisLeft y for let i 0 i datagroup size i Add the line svg append path datum datagroup get sn i attr fill none attr stroke function d k return myColor d 0 mark attr stroke width 1 5 attr d d3 line x function d k return x bandwidth 0 5 x lab d lab k x bandwidth y function d k return y d mark on mouseover function d d3 select this attr stroke width 6 on mouseout function d d3 select this attr stroke width 1 5 console log ready script
attr width xSize attr height ySize append g attr transform translate margin margin X Axis const x d3 scaleBand domain lab0 lab1 lab2 lab3 range 0 xMax padding 1 0 bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green Y Axis const y d3 scaleLinear domain 0 100 range yMax 0 left y axis svg append g call d3 axisLeft y for let i 0 i datagroup size i Add the line svg append path datum datagroup get sn i attr fill none attr stroke function d k return myColor d 0 mark attr stroke width 1 5 attr d d3 line x function d k return x bandwidth 0 5 x lab d lab k x bandwidth y function d k return y d mark on mouseover function d d3 select this attr stroke width 6 on mouseout function d d3 select this attr stroke width 1 5 console log ready script