{"id":2021,"date":"2019-03-02T13:00:41","date_gmt":"2019-03-02T13:00:41","guid":{"rendered":"https:\/\/chewett.co.uk\/blog\/?p=2021"},"modified":"2019-03-01T21:53:30","modified_gmt":"2019-03-01T21:53:30","slug":"how-to-load-multiple-d3-versions-at-once","status":"publish","type":"post","link":"https:\/\/chewett.co.uk\/blog\/2021\/how-to-load-multiple-d3-versions-at-once\/","title":{"rendered":"How to load multiple D3 versions at once"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Today I am writing a short tutorial on how you can load multiple D3.js versions at once.<\/p>\n\n\n\n\n\n\n\n

Why you might want to load multiple D3 versions?<\/h2>\n\n\n\n

Most of the time you will be using the same version of D3 for all visualisations on the page. <\/p>\n\n\n\n

However there may be cases where multiple visualisations must be loaded on the page, and only work with specific versions of D3.<\/p>\n\n\n\n

How to load multiple D3 versions<\/h2>\n\n\n\n

When D3.js loads it creates a d3<\/code> object in the main window. The fully qualified name for this is window.d3<\/code>. To load multiple versions you need to save the contents of this variable to another name, and then clear it.<\/p>\n\n\n\n

For all of these examples I am linking directly to the d3 code available at d3js.org<\/code>.<\/p>\n\n\n

\n<script src="https:\/\/d3js.org\/d3.v5.js"><\/script>\n<script>\n\tvar d3v5 = window.d3;\n\twindow.d3 = null;\n<\/script>\n<script src="https:\/\/d3js.org\/d3.v4.js"><\/script>\n<\/pre><\/div>\n\n\n
First you need to import the first version of d3 you want to load. In this case I am importing d3 version 5. Once it has loaded it is accessed using window.d3<\/code> and saved in a variable d3v5<\/code>.<\/p>\n\n\n\n
Since this is an object, the object reference is copied and the actual data does not change.<\/p>\n\n\n\n
Once it is loaded it is important to completely nullify the reference to it within window.d3<\/code>. This is done by setting the variable equal to null.<\/p>\n\n\n\n
This is important because d3.js will reuse the d3 object if it is found, causing it to become a hybrid of versions potentially causing numerous unknown issues.<\/p>\n\n\n\n
Once window.d3<\/code> is cleared you are able to load the next version of d3. This again will be loaded into window.d3<\/code> and can be used as needed. In the example above d3 version 4 is loaded.<\/p>\n\n\n\n
Using the different D3 versions<\/h2>\n\n\n\n
Once you have loaded all the D3 versions that you are expecting to use, you can begin to use them.<\/p>\n\n\n
\n&lt;div>d3 variable version: &lt;span id="d3VarVer">&lt;\/span>&lt;\/div>\n&lt;div>d3v5 variable version: &lt;span id="d3v5VarVer">&lt;\/span>&lt;\/div>\n\n&lt;script>\n    document.getElementById("d3VarVer").innerText = d3.version;\n    document.getElementById("d3v5VarVer").innerText = d3v5.version;\n&lt;\/script>\n<\/pre><\/div>\n\n\n
Here I am writing d3.version<\/code> and d3v5.version<\/code> 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.<\/p>\n\n\n\n
Summary on using multiple D3 versions on a page<\/h2>\n\n\n\n
By saving the value of window.d3<\/code> 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.<\/p>\n\n\n\n
Once all the versions of D3.js has been loaded you will be able to use them as needed.<\/p>\n\n\n\n
The full code for this is available\u00a0on my website which includes a live example<\/a>.<\/p>\n\n\n\n
If you have any questions feel free to comment on the following blog post.<\/p>\n","protected":false},"excerpt":{"rendered":"
Today I am writing a short tutorial on how you can load multiple D3.js versions at once.<\/p>\n","protected":false},"author":1,"featured_media":2023,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Today I talk about how to load multiple #D3.js versions at once","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[98],"tags":[229,219,72],"class_list":["post-2021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-d3-js","tag-data-visualisation","tag-javascript"],"wppr_data":{"cwp_meta_box_check":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2019\/02\/loading_multiple_d3_versions-1.jpg?fit=800%2C800&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p2toWX-wB","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1030,"url":"https:\/\/chewett.co.uk\/blog\/1030\/overlaying-geo-data-leaflet-version-1-3-d3-js-version-4\/","url_meta":{"origin":2021,"position":0},"title":"Overlaying geo data with Leaflet Version 1.3 and D3.js Version 4","author":"Chewett","date":"February 24, 2018","format":false,"excerpt":"In this post I describe how you can overlay Geo Data onto a leaflet map with D3.js. Combining Leaflet and D3 and objectives There are a number of tutorials online on how to overlay Geodata with D3.js. However, I couldn't find any of these that worked for the most recent\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/02\/d3_leaftlet_intro.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1463,"url":"https:\/\/chewett.co.uk\/blog\/1463\/summary-of-mike-bostock-on-d3-selections\/","url_meta":{"origin":2021,"position":1},"title":"Summary of Mike Bostock on D3 selections","author":"Chewett","date":"August 25, 2018","format":false,"excerpt":"Today I talk about and link to Mike Bostock's post on D3 selections, in this he talks about the basic unit of d3, the selection. Who is Mike Bostock? Mike Bostock is one of the key developers of d3.js and worked for a number of years creating visualizations with this\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_mike_post_selections.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1485,"url":"https:\/\/chewett.co.uk\/blog\/1485\/drawing-shapes-in-d3-js-version-5\/","url_meta":{"origin":2021,"position":2},"title":"Drawing shapes in D3.js Version 5","author":"Chewett","date":"September 5, 2018","format":false,"excerpt":"This post goes over the various D3.js symbols typically used for scatter plots. D3.js built-in symbols D3.js has a number of built-in symbols which can be used for any data visualisation needs. The most common use of these are\u00a0for points on scatter plots and similar graphs. It is important to\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_drawing_shapes.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1700,"url":"https:\/\/chewett.co.uk\/blog\/1700\/colour-scales-in-d3-version-5\/","url_meta":{"origin":2021,"position":3},"title":"Colour scales in D3 Version 5","author":"Chewett","date":"November 3, 2018","format":false,"excerpt":"Over the past versions in D3.js there have been a number of changes to how you can get a colour scale to use with your charting. This blog post explores what is available and how to use it. This blog post applies to D3.js version 5. Colour scales in D3.js\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/11\/d3_colour_scales-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1431,"url":"https:\/\/chewett.co.uk\/blog\/1431\/simple-d3-js-version-5-data-binding-and-updating-example-and-code\/","url_meta":{"origin":2021,"position":4},"title":"Simple D3.js version 5 data binding and updating example and code","author":"Chewett","date":"August 11, 2018","format":false,"excerpt":"This post goes through the process of binding data to elements and creating a simple updatable SVG graphic using D3.js version 5. Data binding and updating in D3.js version 5 In D3.js version 4 there was quite a big update to how data is bound to elements and updated. This\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_simple_data_binding.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_simple_data_binding.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_simple_data_binding.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_simple_data_binding.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1483,"url":"https:\/\/chewett.co.uk\/blog\/1483\/d3-js-version-5-scatterplot-with-shapes\/","url_meta":{"origin":2021,"position":5},"title":"D3.js version 5 Scatterplot with shapes","author":"Chewett","date":"September 15, 2018","format":false,"excerpt":"Today I write about\u00a0how you can create a scatter plot with different shapes in D3.js version 5. Aim of this tutorial This blog builds on Mike Bostocks\u00a0Scatterplot with shapes example and reworks it for D3.js version 5. This tutorial will focus on the changes needed to convert the original diagram\u2026","rel":"","context":"In "Software"","block_context":{"text":"Software","link":"https:\/\/chewett.co.uk\/blog\/category\/software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_v5_scatterplot_with_shapes-1.jpg?fit=800%2C800&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=2021"}],"version-history":[{"count":4,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2021\/revisions"}],"predecessor-version":[{"id":2038,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2021\/revisions\/2038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media\/2023"}],"wp:attachment":[{"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=2021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=2021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chewett.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=2021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}