Example of plotting multiple overlapping charts in the same place but with different axis scales To help distinguish the different axis from the different data assigned a correlating color script type text javascript src https d3js org d3 v7 min js script script let csvdata0 x y 10 10 20 20 30 30 40 30 50 50 let csvdata1 x y 30 10 30 50 70 90 100 190 let csvdata2 x y 1 1 2 4 3 9 4 16 const csvfiles csvdata0 csvdata1 csvdata2 let num csvfiles length let cwidth 500 let cheight 500 let margin top 10 right 30 bottom 30 left 30 let width cwidth margin left num margin right let height cheight margin top margin bottom num var myColors d3 scaleOrdinal domain 1 10 range d3 schemeSet3 Adds the svg canvas var chartBody d3 select body append svg attr width cwidth attr height cheight style border 1px solid blue append g attr transform translate margin left num margin top async for let n 0 n num n let blob new Blob csvfiles n type text txt let href window URL createObjectURL blob Get the data let data await d3 csv href console log csv data ready console log data data e g data x 10 y 10 x 20 y 20 x 30 y 30 x 40 y 30 remove any spaces convert to numbers string int data forEach function d d x d x d y d y console log data data Add X axis var x d3 scaleLinear domain d3 extent data function d return d x range 0 width Add Y axis var y d3 scaleLinear domain 0 d3 max data function d return d y range height 0 Add the line chartBody append path datum data attr fill none attr stroke myColors n attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add the X Axis chartBody append g attr transform translate 0 height margin bottom n call d3 axisBottom x select path attr stroke myColors n Add the Y Axis chartBody append g attr transform translate margin left n 0 call d3 axisLeft y select path attr stroke myColors n end for n async Handmade legend chartBody append circle attr cx 50 attr cy 30 attr r 6 style fill 69b3a2 chartBody append circle attr cx 50 attr cy 60 attr r 6 style fill 404080 chartBody append circle attr cx 50 attr cy 90 attr r 6 style fill 2020a0 chartBody append text attr x 70 attr y 30 text variable A style font size 15px attr alignment baseline middle chartBody append text attr x 70 attr y 60 text variable B style font size 15px attr alignment baseline middle chartBody append text attr x 70 attr y 90 text variable C style font size 15px attr alignment baseline middle console log ready script Multiple plots but are all using the same axis might be problematic if the ranges are very different in that case you d use the above example script type text javascript src https d3js org d3 v7 min js script script let csvdata0 x y 10 10 20 20 30 30 40 30 50 50 let csvdata1 x y 30 10 30 50 70 90 100 100 let csvdata2 x y 1 1 2 4 3 9 4 16 const csvfiles csvdata0 csvdata1 csvdata2 let cwidth 500 let cheight 500 let margin top 10 right 30 bottom 30 left 30 let width cwidth margin left margin right let height cheight margin top margin bottom var myColors d3 scaleOrdinal domain 1 10 range d3 schemeSet3 Adds the svg canvas var chartBody d3 select body append svg attr width cwidth attr height cheight style border 1px solid blue append g attr transform translate margin left margin top async load all the data let data for let n 0 n csvfiles length n let blob new Blob csvfiles n type text txt let href window URL createObjectURL blob Get the data let tmp await d3 csv href remove any spaces convert to numbers string int tmp forEach function d d x d x d y d y data push tmp end for n console log csv data all loaded and ready const r data reduce a b return a concat b let ee d3 extent r r return r x console log ee ee Add X axis var x d3 scaleLinear domain d3 extent r function d return d x range 0 width Add Y axis var y d3 scaleLinear domain 0 d3 max r function d return d y range height 0 for let n 0 n data length n Add the line chartBody append path datum data n attr fill none attr stroke myColors n attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Handmade legend chartBody append circle attr cx 50 attr cy 30 n 30 attr r 6 style fill myColors n chartBody append text attr x 70 attr y 30 n 30 text variable n style font size 15px attr alignment baseline middle Add the X Axis chartBody append g attr transform translate 0 height call d3 axisBottom x Add the Y Axis chartBody append g attr transform translate 0 0 call d3 axisLeft y async console log ready script
ine middle chartBody append text attr x 70 attr y 60 text variable B style font size 15px attr alignment baseline middle chartBody append text attr x 70 attr y 90 text variable C style font size 15px attr alignment baseline middle console log ready script Multiple plots but are all using the same axis might be problematic if the ranges are very different in that case you d use the above example script type text javascript src https d3js org d3 v7 min js script script let csvdata0 x y 10 10 20 20 30 30 40 30 50 50 let csvdata1 x y 30 10 30 50 70 90 100 100 let csvdata2 x y 1 1 2 4 3 9 4 16 const csvfiles csvdata0 csvdata1 csvdata2 let cwidth 500 let cheight 500 let margin top 10 right 30 bottom 30 left 30 let width cwidth margin left margin right let height cheight margin top margin bottom var myColors d3 scaleOrdinal domain 1 10 range d3 schemeSet3 Adds the svg canvas var chartBody d3 select body append svg attr width cwidth attr height cheight style border 1px solid blue append g attr transform translate margin left margin top async load all the data let data for let n 0 n csvfiles length n let blob new Blob csvfiles n type text txt let href window URL createObjectURL blob Get the data let tmp await d3 csv href remove any spaces convert to numbers string int tmp forEach function d d x d x d y d y data push tmp end for n console log csv data all loaded and ready const r data reduce a b return a concat b let ee d3 extent r r return r x console log ee ee Add X axis var x d3 scaleLinear domain d3 extent r function d return d x range 0 width Add Y axis var y d3 scaleLinear domain 0 d3 max r function d return d y range height 0 for let n 0 n data length n Add the line chartBody append path datum data n attr fill none attr stroke myColors n attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Handmade legend chartBody append circle attr cx 50 attr cy 30 n 30 attr r 6 style fill myColors n chartBody append text attr x 70 attr y 30 n 30 text variable n style font size 15px attr alignment baseline middle Add the X Axis chartBody append g attr transform translate 0 height call d3 axisBottom x Add the Y Axis chartBody append g attr transform translate 0 0 call d3 axisLeft y async console log ready script