Importing d3.js to vscode

[Marchlak]

Applies To

• Notebooks (.ipynb files)
• Interactive Window and/or Cell Scripts (.py files with #%% markers)

What happened?

So i start my issue with this simple example:

As we can see, importing the D3 library failed. At first, I thought it was due to the way it was imported like this: <script src="https://d3js.org/d3.v7.min.js"></script>. However, when I used IPython to add the entire library, D3 was still 'not defined'. So, I opened the D3 code, which starts like this:

// https://d3js.org v7.9.0 Copyright 2010-2023 Mike Bostock
! function(t, n) {
    "object" == typeof exports && "undefined" != typeof module ? n(exports) : "function" == typeof define && define.amd ? define(["exports"], n) : n((t = "undefined" != typeof globalThis ? globalThis : t || self).d3 = t.d3 || {})
}(this, (function(t) {

In VS Code, define === "function" && define.amd is triggered, but it's not possible to assign the global variable d3, which remains 'not defined'. Is there any way to load D3 into VS Code? My visualizations with IPython and D3 work perfectly in Jupyter Notebook, Jupyter Lab in the browser, and other notebooks built on Electron. There must be a way, because while playing with the developer console, my visualization displayed once, but I couldn't replicate it.

VS Code Version

1.93.0

Jupyter Extension Version

v2024.8.1

Jupyter logs

No response

Coding Language and Runtime Version

Python, js

Language Extension Version (if applicable)

No response

Anaconda Version (if applicable)

No response

Running Jupyter locally or remotely?

Local

[Marchlak]

Okay, I solved it myself if you want use d3 in vscode jupyter using ipython change this

! function(t, n) {
    "object" == typeof exports && "undefined" != typeof module ? n(exports) : "function" == typeof define && define.amd ? define(["exports"], n) : n((t = "undefined" != typeof globalThis ? globalThis : t || self).d3 = t.d3 || {})
}(this, (function(t) {
    "use strict";

to this

!function(t, n) {
    n((t = "undefined" != typeof globalThis ? globalThis : t || self).d3 = t.d3 || {})
}(this, (function(t) {
    "use strict";

to see full solution check https://github.com/mljar/supertree