Modular line drawing example Encapsulates line drawing graph Transitional details new old data doesn t just pop Also able to display older versions e g past 5 lines Scale set size smoothly style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script let lineChart function parentE let parentElement parentE if parentE parentElement d3 select body Set Dimensions let width 600 let height 600 manage the transition for chart size change let newwidth width let newheight height const margin 40 let tweenA parentElement append span Create Random 100 Points let data for let i 0 i 100 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 let xExtent d3 extent data d return d x let yExtent d3 extent data d return d y Append SVG Object to the Page let svg parentElement append svg attr width width attr height height let group svg append g attr transform translate margin margin X Axis let x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 bottom let bottomaxis group append g bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green top let topaxis group append g topaxis call d3 axisTop x Y Axis let y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 left y axis let leftaxis group append g leftaxis call d3 axisLeft y right y axis let rightaxis group append g rightaxis attr transform translate width margin 2 0 call d3 axisRight y Add the line let path group append path 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 const length path node getTotalLength console log path length length this updatedata function newdata Set old line so it fades away no popping path transition duration 1000 style opacity 0 0 remove option keep old data displayed xExtent d3 extent newdata d return d x yExtent d3 extent newdata d return d y x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 path group append path datum newdata attr fill none attr stroke green attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y style opacity 0 0 path transition duration 1000 style opacity 1 0 data newdata this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenA transition duration 2000 delay 0 attrTween d function return function t let tmpwidth d3 interpolate width newwidth t let tmpheight d3 interpolate height newheight t svg attr width tmpwidth attr height tmpheight x domain xExtent 0 xExtent 1 x range 0 tmpwidth margin 2 y domain yExtent 0 yExtent 1 y range tmpheight margin 2 0 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 topaxis call d3 axisTop x leftaxis call d3 axisLeft y rightaxis attr transform translate tmpwidth margin 2 0 call d3 axisRight y bottomaxis attr transform translate 0 tmpheight margin 2 call d3 axisBottom x attr color green make bottom axis green function t attrTween let chart new lineChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue Create Random Points let testdata let rx Math random 0 5 2 0 let ry Math random 0 5 2 0 for let i 0 i 100 i testdata push x i 100 y Math sin rx ry 6 2 i 100 1 1 chart updatedata testdata setInterval changevalue 2000 changevalue Testing call to show the transition to new dimensions function changesize chart updatesize 150 Math random 500 150 Math random 500 setInterval changesize 4000 console log ready script Experiment with multiple instances style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script let lineChart function parentE let parentElement parentE if parentE parentElement d3 select body Set Dimensions let width 600 let height 600 manage the transition for chart size change let newwidth width let newheight height const margin 40 let tweenA parentElement append span Create Random 100 Points let data for let i 0 i 100 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 let xExtent d3 extent data d return d x let yExtent d3 extent data d return d y Append SVG Object to the Page let svg parentElement append svg attr width width attr height height let group svg append g attr transform translate margin margin X Axis let x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 bottom let bottomaxis group append g bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green top let topaxis group append g topaxis call d3 axisTop x Y Axis let y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 left y axis let leftaxis group append g leftaxis call d3 axisLeft y right y axis let rightaxis group append g rightaxis attr transform translate width margin 2 0 call d3 axisRight y Add the line let path group append path 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 const length path node getTotalLength console log path length length this updatedata function newdata Set old line so it fades away no popping path transition duration 1000 style opacity 0 0 remove option keep old data displayed xExtent d3 extent newdata d return d x yExtent d3 extent newdata d return d y x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 data newdata path group append path datum newdata attr fill none attr stroke green attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y style opacity 0 0 path transition duration 1000 style opacity 1 0 this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenA transition duration 2000 delay 0 attrTween d function return function t let tmpwidth d3 interpolate width newwidth t let tmpheight d3 interpolate height newheight t svg attr width tmpwidth attr height tmpheight x domain xExtent 0 xExtent 1 x range 0 tmpwidth margin 2 y domain yExtent 0 yExtent 1 y range tmpheight margin 2 0 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 topaxis call d3 axisTop x leftaxis call d3 axisLeft y rightaxis attr transform translate tmpwidth margin 2 0 call d3 axisRight y bottomaxis attr transform translate 0 tmpheight margin 2 call d3 axisBottom x attr color green make bottom axis green function t attrTween for let kk 0 kk 10 kk let chart new lineChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue Create Random Points let testdata let rx Math random 0 5 2 0 let ry Math random 0 5 2 0 for let i 0 i 100 i testdata push x i 100 y Math sin rx ry 6 2 i 100 1 1 chart updatedata testdata setInterval changevalue 2000 changevalue Testing call to show the transition to new dimensions function changesize chart updatesize 100 Math random 300 100 Math random 300 setInterval changesize 4000 console log ready script
setInterval changesize 4000 console log ready script Experiment with multiple instances style body min height 600px margin 0 style script type text javascript src https d3js org d3 v7 min js script script let lineChart function parentE let parentElement parentE if parentE parentElement d3 select body Set Dimensions let width 600 let height 600 manage the transition for chart size change let newwidth width let newheight height const margin 40 let tweenA parentElement append span Create Random 100 Points let data for let i 0 i 100 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 let xExtent d3 extent data d return d x let yExtent d3 extent data d return d y Append SVG Object to the Page let svg parentElement append svg attr width width attr height height let group svg append g attr transform translate margin margin X Axis let x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 bottom let bottomaxis group append g bottomaxis attr transform translate 0 height margin 2 call d3 axisBottom x attr color green make bottom axis green top let topaxis group append g topaxis call d3 axisTop x Y Axis let y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 left y axis let leftaxis group append g leftaxis call d3 axisLeft y right y axis let rightaxis group append g rightaxis attr transform translate width margin 2 0 call d3 axisRight y Add the line let path group append path 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 const length path node getTotalLength console log path length length this updatedata function newdata Set old line so it fades away no popping path transition duration 1000 style opacity 0 0 remove option keep old data displayed xExtent d3 extent newdata d return d x yExtent d3 extent newdata d return d y x d3 scaleLinear x domain xExtent 0 xExtent 1 x range 0 width margin 2 y d3 scaleLinear y domain yExtent 0 yExtent 1 y range height margin 2 0 data newdata path group append path datum newdata attr fill none attr stroke green attr stroke width 1 5 attr d d3 line x function d return x d x y function d return y d y style opacity 0 0 path transition duration 1000 style opacity 1 0 this updatesize function neww newh width newwidth height newheight newwidth neww newheight newh tweenA transition duration 2000 delay 0 attrTween d function return function t let tmpwidth d3 interpolate width newwidth t let tmpheight d3 interpolate height newheight t svg attr width tmpwidth attr height tmpheight x domain xExtent 0 xExtent 1 x range 0 tmpwidth margin 2 y domain yExtent 0 yExtent 1 y range tmpheight margin 2 0 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 topaxis call d3 axisTop x leftaxis call d3 axisLeft y rightaxis attr transform translate tmpwidth margin 2 0 call d3 axisRight y bottomaxis attr transform translate 0 tmpheight margin 2 call d3 axisBottom x attr color green make bottom axis green function t attrTween for let kk 0 kk 10 kk let chart new lineChart Testing call this method every second with a new value 0 100 to see the transition working function changevalue Create Random Points let testdata let rx Math random 0 5 2 0 let ry Math random 0 5 2 0 for let i 0 i 100 i testdata push x i 100 y Math sin rx ry 6 2 i 100 1 1 chart updatedata testdata setInterval changevalue 2000 changevalue Testing call to show the transition to new dimensions function changesize chart updatesize 100 Math random 300 100 Math random 300 setInterval changesize 4000 console log ready script