I'm having trouble displaying multiple D3 graphs on one page. I have tried many things, but I can only seem to get one of the visualizations on the page, not both.
For the first visualization in HTML, I have:
<section id="first" class="main special">
<header class="major">
<h2>Presidential Elections</h2>
</header>
<body>
<div id="lineChart"></div>
<script src="lineChart.js"></script>
</body>
</section>
My second visualization is similar in index.html:
<section id="second" class="main special">
<header class="major">
<h2>House Seats Lost Based on Current President</h2>
</header>
<body>
<div id="barChart"></div>
<script src="barChart.js"></script>
</body>
</section>
In lineChart.js and barChart.js, I do not have either visualization labeled as 'svg', but instead 'lineChart' and 'barChart' respectively. The current code displays only the first (line chart) visualization, but I found that when I remove <script src="lineChart.js"></script>, the first (line chart) visualization disappears and the second (bar chart) visualization becomes visible. Does anyone have any idea or guidance on what I am doing wrong?
It's tough to say without seeing the code. But you might selecting all svgs or divs and calling remove(). Look for code that does that, and try dropping the remove() call.