D3 js Line Plot Multiple line plots on the same graph style body min height 600px margin 0 p2 hover stroke width 15px 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 g 0 g datagroup size g console log x lab 0 let dd datagroup get sn g svg svg append g selectAll line data dd d d mark enter filter d n return n dd length 1 append svg line style stroke d i return myColor dd i mark style stroke width 2 attr x1 function d i return x bandwidth 0 5 x lab i attr x2 function d i return x bandwidth 0 5 x lab i 1 attr y1 function d i return y dd i mark attr y2 function d i return y dd i 1 mark classed p2 true on mouseover function e n console log d3 pointer e console log this d3 event console log e target d3 select e target parentNode selectAll line style stroke width 10 on mouseout function e n d3 select e target parentNode selectAll line style stroke width 1 5 console log ready script
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 g 0 g datagroup size g console log x lab 0 let dd datagroup get sn g svg svg append g selectAll line data dd d d mark enter filter d n return n dd length 1 append svg line style stroke d i return myColor dd i mark style stroke width 2 attr x1 function d i return x bandwidth 0 5 x lab i attr x2 function d i return x bandwidth 0 5 x lab i 1 attr y1 function d i return y dd i mark attr y2 function d i return y dd i 1 mark classed p2 true on mouseover function e n console log d3 pointer e console log this d3 event console log e target d3 select e target parentNode selectAll line style stroke width 10 on mouseout function e n d3 select e target parentNode selectAll line style stroke width 1 5 console log ready script