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 var defs svg append defs var gradient defs append linearGradient attr id svgGradient attr x1 0 attr x2 0 attr y1 0 attr y2 100 gradient append stop attr class start attr offset 0 attr stop color red attr stop opacity 1 gradient append stop attr class end attr offset 100 attr stop color blue attr stop opacity 1 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 url svgGradient 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
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 var defs svg append defs var gradient defs append linearGradient attr id svgGradient attr x1 0 attr x2 0 attr y1 0 attr y2 100 gradient append stop attr class start attr offset 0 attr stop color red attr stop opacity 1 gradient append stop attr class end attr offset 100 attr stop color blue attr stop opacity 1 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 url svgGradient 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