D3.js in JupyterNotebook

I'm trying to plot an interactive network with D3.js on Jupyter Notebook (via VSCode).

Here is the best code that I tried so far:

import networkx as nx
    
G = nx.Graph()

G.add_edge(1, 2)
G.add_edge(1, 3)
G.add_edge(2, 3)
G.add_edge(3, 4)
G.add_edge(4, 5)

pos = nx.spring_layout(G)

Then, I build an HTML as follow:

from IPython.display import display, HTML
html = """
<div id="graph"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
var data = %s;

var svg = d3.select("#graph").append("svg")
    .attr("width", 500)
    .attr("height", 500);

var simulation = d3.forceSimulation(data.nodes)
    .force("link", d3.forceLink(data.links).id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(250, 250))
    .on("tick", ticked);

var link = svg.append("g")
    .attr("stroke", "#999")
    .attr("stroke-opacity", 0.6)
    .selectAll("line")
    .data(data.links)
    .join("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.append("g")
    .attr("stroke", "#fff")
    .attr("stroke-width", 1.5)
    .selectAll("circle")
    .data(data.nodes)
    .join("circle")
    .attr("r", 5)
    .attr("fill", "#000");

node.append("title")
    .text(function(d) { return d.id; });

function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}
</script>
""" % nx.node_link_data(G)

And, finally, I run the code:

display(HTML(html))

But the graph did not is plotted (without any message or anything else).

My aim is to run this notebook (there are several python functions inside that) and convert it whole into HTML file. When I do that, the HTML did not have the network as well.

Thank you for help

Here's some resources with some details for some related tech I've seen that is meant to play well with Jupyter, placing those I think my be best bets towards workable code for in Jupyter at the top:

• ipydagred3 - "ipywidgets library for drawing directed acyclic graphs in jupyterlab using dagre-d3" - This looks like it matches what you are trying to do very well. I learned of it in a gitter chat when the author said, "was having trouble finding a good interactive graph viewer in jlab. best bet seemed to be holoviews attached to networkx. so I wrote a quick wrapper around dagre-d3". These related comments in that conversation might also help you, " I wrote nx_altair awhile back, which leverages Vega's (through altair) viz spec to draw interactive graphs." And, " I needed a graph that could change over time, (to debug graph replacements) so I ended up wrapping cytoscape js https://github.com/Quansight-Labs/metadsl/tree/master/typez/src".

  Why I say ipydagred3 looks to match your code attempt. You can see by going to the ipydagred3 repo and clicking on 'launch binder'. When the session comes up, double-click on the 'docs' directory in the file navigator panel on the left. Then go into 'examples' and finally, click on example.ipynb to open that notebook actively. Run the first six cells of that. The sixth cell will render the widget in the notebook. The code reminded me a bit of what you are showing. You'll see you can run the next few cells and the widget view gets updated.

• Announcement of 'IPySimulate: Tools to create interactive simulations with IPython and Jupyter' at the Jupyter Discourse Community Forum - "Tools to create interactive simulations with IPython and Jupyter, including a control panel, widgets to adjust parameters at runtime, and dynamic D3.js visualizations."

• D3 in jupyterlab discussion at Jupyter Discourse Community Forum