Today I am writing a short tutorial on how you can load multiple D3.js versions at once.
Why you might want to load multiple D3 versions?
Most of the time you will be using the same version of D3 for all visualisations on the page.
However there may be cases where multiple visualisations must be loaded on the page, and only work with specific versions of D3.
How to load multiple D3 versions
When D3.js loads it creates a d3 object in the main window. The fully qualified name for this is window.d3. To load multiple versions you need to save the contents of this variable to another name, and then clear it.
For all of these examples I am linking directly to the d3 code available at d3js.org.
Here I am writing d3.version and d3v5.version into two span’s in the HTML. While the example is trivial you can use the full range of functions d3 provides with either d3 version on the page.
Summary on using multiple D3 versions on a page
By saving the value of window.d3 to another variable you can load multiple versions on the same page. When doing this it is important to clear the value of window.d3 before loading the next version to avoid issues.
Once all the versions of D3.js has been loaded you will be able to use them as needed.