I recently attempted to design a three-column layout with a header and footer. The first two columns were successfully constructed, creating a visually pleasing page. However, when I introduced a D3.js chart using dimplejs into the third column, my entire layout became distorted. I am unsure of what caused this disruption.
Here is an example of the working layout: https://i.sstatic.net/HcWp7.jpg
Upon adding the chart, the layout suffered from issues. https://i.sstatic.net/vFjx8.jpg https://i.sstatic.net/HcWp7.jpg
I have included a jsfiddle to illustrate the problem I encountered.
As someone new to d3.js/dimplejs, I attempted to explore the structure of the layout, including the divs and classes, but was unable to identify the issue. I did observe that the chart container appeared truncated, as the y-axis was partially hidden.
Any assistance you can provide would be greatly appreciated.