D3 Layout Dashboard Take advantage of the resize style attribute e g resize horizontal Multiple different graphs Resizable customizable features Scalable interactive style body min height 400px main display grid border 3px dotted red padding 3px grid gap 3px grid template nav head min content nav main 1fr min content 1fr leftbox grid area nav border 3px dotted blue overflow auto resize horizontal min width 120px max width 50vw topbox grid area head border 3px dotted orange overflow auto resize vertical min height min content max height 200px bottombox grid area main border 3px dotted gray overflow auto resize vertical style main leftbox LEFTBOX leftbox topbox TOPBOX topbox bottombox BOTTOMBOX bottombox main Add mouse resizer events D3 Layout Dashboard Take advantage of the resize style attribute e g resize horizontal Multiple different graphs Resizable customizable features Scalable interactive style body min height 400px main display grid border 3px dotted red padding 3px grid gap 3px grid template nav head min content nav main 1fr min content 1fr leftbox grid area nav border 3px dotted blue overflow auto resize horizontal min width 120px max width 50vw topbox grid area head border 3px dotted orange overflow auto resize vertical min height min content max height 200px bottombox grid area main border 3px dotted gray overflow auto resize vertical style main leftbox LEFTBOX leftbox topbox TOPBOX topbox bottombox BOTTOMBOX bottombox main script let lb document getElementsByTagName leftbox 0 lb addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight script Add d3 graphs inside D3 Layout Dashboard Take advantage of the resize style attribute e g resize horizontal Multiple different graphs Resizable customizable features Scalable interactive style body min height 400px main position relative display grid border 3px dotted red padding 3px grid gap 3px grid template nav head min content nav main 1fr min content 1fr leftbox position relative grid area nav border 3px dotted blue overflow hidden resize horizontal min width 120px max width 50vw min height 120px topbox position relative grid area head border 3px dotted orange overflow hidden resize vertical min height min content max height 200px min height 100px bottombox position relative overflow hidden resize vertical grid area main border 3px dotted gray min height 100px style script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts linechart v01 js id 22 script main leftbox id leftbox leftbox topbox id topbox topbox bottombox id bottombox bottombox main script function addResizeEvent id callback let item document getElementById id item addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new lineChart d3 select leftbox addResizeEvent leftbox function w h chart1 updatesize w h updateall let chart2 new lineChart d3 select topbox addResizeEvent topbox function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select bottombox addResizeEvent bottombox function w h chart3 updatesize w h updateall function updateall d3 select leftbox node dispatchEvent new Event mousemove d3 select topbox node dispatchEvent new Event mousemove d3 select bottombox node dispatchEvent new Event mousemove updateall console log ready script Add d3 graphs inside D3 Layout Dashboard Take advantage of the resize style attribute e g resize horizontal Multiple different graphs Resizable customizable features Scalable interactive style body min height 400px main position relative display grid border 3px dotted red padding 3px grid gap 3px grid template nav head min content nav main 1fr min content 1fr leftbox position relative grid area nav border 3px dotted blue overflow hidden resize horizontal min width 120px max width 50vw min height 120px width 300px topbox position relative grid area head border 3px dotted orange overflow hidden resize vertical min height min content max height 200px min height 100px bottombox position relative overflow hidden resize vertical grid area main border 3px dotted gray min height 100px style script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts linechart v01 js id 22 script script type text javascript src https notebook xbdev net var scripts piechart v01 js script main leftbox id leftbox leftbox topbox id topbox topbox bottombox id bottombox bottombox main script function addResizeEvent id callback let item document getElementById id item addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new pieChart d3 select leftbox addResizeEvent leftbox function w h chart1 updatesize w 5 h updateall let chart2 new lineChart d3 select topbox addResizeEvent topbox function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select bottombox addResizeEvent bottombox function w h chart3 updatesize w h updateall function updateall d3 select leftbox node dispatchEvent new Event mousemove d3 select topbox node dispatchEvent new Event mousemove d3 select bottombox node dispatchEvent new Event mousemove updateall console log ready script
if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new lineChart d3 select leftbox addResizeEvent leftbox function w h chart1 updatesize w h updateall let chart2 new lineChart d3 select topbox addResizeEvent topbox function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select bottombox addResizeEvent bottombox function w h chart3 updatesize w h updateall function updateall d3 select leftbox node dispatchEvent new Event mousemove d3 select topbox node dispatchEvent new Event mousemove d3 select bottombox node dispatchEvent new Event mousemove updateall console log ready script Add d3 graphs inside D3 Layout Dashboard Take advantage of the resize style attribute e g resize horizontal Multiple different graphs Resizable customizable features Scalable interactive style body min height 400px main position relative display grid border 3px dotted red padding 3px grid gap 3px grid template nav head min content nav main 1fr min content 1fr leftbox position relative grid area nav border 3px dotted blue overflow hidden resize horizontal min width 120px max width 50vw min height 120px width 300px topbox position relative grid area head border 3px dotted orange overflow hidden resize vertical min height min content max height 200px min height 100px bottombox position relative overflow hidden resize vertical grid area main border 3px dotted gray min height 100px style script type text javascript src https d3js org d3 v7 min js script script type text javascript src https notebook xbdev net var scripts linechart v01 js id 22 script script type text javascript src https notebook xbdev net var scripts piechart v01 js script main leftbox id leftbox leftbox topbox id topbox topbox bottombox id bottombox bottombox main script function addResizeEvent id callback let item document getElementById id item addEventListener mousemove function event if this ww event target offsetWidth this hh event target offsetHeight return this ww event target offsetWidth this hh event target offsetHeight if this null return if this ww null return console log offsetWidth this offsetWidth console log offsetHeight this offsetHeight callback this ww this hh let chart1 new pieChart d3 select leftbox addResizeEvent leftbox function w h chart1 updatesize w 5 h updateall let chart2 new lineChart d3 select topbox addResizeEvent topbox function w h chart2 updatesize w h updateall let chart3 new lineChart d3 select bottombox addResizeEvent bottombox function w h chart3 updatesize w h updateall function updateall d3 select leftbox node dispatchEvent new Event mousemove d3 select topbox node dispatchEvent new Event mousemove d3 select bottombox node dispatchEvent new Event mousemove updateall console log ready script