1

I have two D3.js charts I am trying to display on a single html page. One is a funnel chart (sourced from here: https://github.com/smilli/d3-funnel-charts); the other is a Datamap of the USA with bubbles placed on it.

The funnel chart works fine until the datamap code is added; then only the funnel chart doesn;t fully render all its layers. The problem somehow gets worse when the page is reloaded.

I am new to D3, so I would be forever grateful if someone could explain how I can prevent the second chart from conflicting(?) with the rendering of the first.

Here is the example code:http://jsbin.com/dozer/1/edit

Tim Myers
  • 55
  • 1
  • 6

1 Answers1

1

The root issue is that you're trying to use two different versions of D3 on the same page without doing anything to namespace them. If you look at your scripts, you'll see both these lines:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
...
<script src="http://d3js.org/d3.v3.min.js"></script>

If you can find or create a version of the funnel chart using D3 v3 that's probably the best long-term solution. However, see this answer for more on how you might attempt to get both versions running.

Community
  • 1
  • 1
explunit
  • 18,967
  • 6
  • 69
  • 94
  • Thanks! The datamap works with V2 fine. When I removed the line calling v3, everything works now. Good to know about the D3 version conflicts – Tim Myers Oct 03 '14 at 15:43