D3 js Line Plot Start with the basic example below and try the following enhancements Add dots to certain points or symbols Add title axis details Mouse over the line to show extra information popup Change the line color thickness and style e g dashed line Multiple lines on the same graph Import data csv json txt Modularize functions the line drawing code Draw multiple line graphs next to each other with differnet data style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 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 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 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y console log ready script D3 js Line Plot Draw points dots at the limits style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 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 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 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add some dots when the data reaches its extent limits svg append g selectAll dot data data enter only draw points for the extents take this line out to draw all filter function d return d x xExtent 1 d x xExtent 0 d y yExtent 1 d y yExtent 0 append circle attr cx function d return x d x attr cy function d return y d y attr r 5 style fill red console log ready script D3 js Line Plot Animate the line style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 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 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 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line let path svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add some dots when the data reaches its extent limits svg append g selectAll dot data data enter only draw points for the extents take this line out to draw all filter function d return d x xExtent 1 d x xExtent 0 d y yExtent 1 d y yExtent 0 append circle attr cx function d return x d x attr cy function d return y d y attr r 5 style fill red const length path node getTotalLength console log path length length This function will animate the path over and over again function repeat Animate the path by setting the initial offset and dasharray a path attr stroke dasharray length length attr stroke dashoffset length transition ease d3 easeLinear attr stroke dashoffset 0 duration 6000 on end setTimeout repeat 1000 this will repeat the animation after waiting 1 second repeat console log ready script D3 js Line Plot Animates and adds draws multiple lines on the fly Generates new line data and draws it while keep the past 5 version Older than 5 fade away and are removed Things to try Different line colors and types dashed dotted Draw more complex lines instead of just a sine wave Update the scale range when new line data is added Add extra controls click to add new line Add text box that lets the user enter in a line equation style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 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 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 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line let path svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add some dots when the data reaches its extent limits svg append g selectAll dot data data enter only draw points for the extents take this line out to draw all filter function d return d x xExtent 1 d x xExtent 0 d y yExtent 1 d y yExtent 0 append circle attr cx function d return x d x attr cy function d return y d y attr r 5 style fill red const length path node getTotalLength console log path length length This function will animate the path over and over again function repeat Set a light grey class on old paths svg selectAll path transition duration 1000 style opacity 0 2 Uncomment following line to clear the previously drawn line svg selectAll path remove if the path is older than 5 then remove delete svg selectAll path filter function d i if d null return false let obj d3 select this if obj attr age undefined obj attr age 1 obj attr age parseInt obj attr age 1 if parseInt obj attr age 5 return true return false attr d function d console log removing return transition duration 500 style opacity 0 0 remove let f Math random 2 0 1 0 var newdata d3 range numPoints map function i d return x i 100 y Math sin 6 2 i 100 f path svg append path datum newdata attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y const length path node getTotalLength Animate the path by setting the initial offset and dasharray a path attr stroke dasharray length length attr stroke dashoffset length transition ease d3 easeLinear attr stroke dashoffset 0 duration 6000 on end setTimeout repeat 1000 repeat the animation after waiting 1 second repeat console log ready script
ath svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add some dots when the data reaches its extent limits svg append g selectAll dot data data enter only draw points for the extents take this line out to draw all filter function d return d x xExtent 1 d x xExtent 0 d y yExtent 1 d y yExtent 0 append circle attr cx function d return x d x attr cy function d return y d y attr r 5 style fill red const length path node getTotalLength console log path length length This function will animate the path over and over again function repeat Animate the path by setting the initial offset and dasharray a path attr stroke dasharray length length attr stroke dashoffset length transition ease d3 easeLinear attr stroke dashoffset 0 duration 6000 on end setTimeout repeat 1000 this will repeat the animation after waiting 1 second repeat console log ready script D3 js Line Plot Animates and adds draws multiple lines on the fly Generates new line data and draws it while keep the past 5 version Older than 5 fade away and are removed Things to try Different line colors and types dashed dotted Draw more complex lines instead of just a sine wave Update the scale range when new line data is added Add extra controls click to add new line Add text box that lets the user enter in a line equation style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script Set Dimensions const xSize 600 const ySize 600 const margin 40 const xMax xSize margin 2 const yMax ySize margin 2 Create Random Points const numPoints 100 const data for let i 0 i numPoints i data push x i 100 y Math sin 6 2 i 100 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 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 scaleLinear domain xExtent 0 xExtent 1 range 0 xMax bottom svg append g attr transform translate 0 yMax call d3 axisBottom x attr color green make bottom axis green top svg append g call d3 axisTop x Y Axis const y d3 scaleLinear domain yExtent 0 yExtent 1 range yMax 0 left y axis svg append g call d3 axisLeft y right y axis svg append g attr transform translate yMax 0 call d3 axisRight y Add the line let path svg append path datum data attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y Add some dots when the data reaches its extent limits svg append g selectAll dot data data enter only draw points for the extents take this line out to draw all filter function d return d x xExtent 1 d x xExtent 0 d y yExtent 1 d y yExtent 0 append circle attr cx function d return x d x attr cy function d return y d y attr r 5 style fill red const length path node getTotalLength console log path length length This function will animate the path over and over again function repeat Set a light grey class on old paths svg selectAll path transition duration 1000 style opacity 0 2 Uncomment following line to clear the previously drawn line svg selectAll path remove if the path is older than 5 then remove delete svg selectAll path filter function d i if d null return false let obj d3 select this if obj attr age undefined obj attr age 1 obj attr age parseInt obj attr age 1 if parseInt obj attr age 5 return true return false attr d function d console log removing return transition duration 500 style opacity 0 0 remove let f Math random 2 0 1 0 var newdata d3 range numPoints map function i d return x i 100 y Math sin 6 2 i 100 f path svg append path datum newdata attr fill none attr stroke steelblue attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y const length path node getTotalLength Animate the path by setting the initial offset and dasharray a path attr stroke dasharray length length attr stroke dashoffset length transition ease d3 easeLinear attr stroke dashoffset 0 duration 6000 on end setTimeout repeat 1000 repeat the animation after waiting 1 second repeat console log ready script