How d3 draw a network graph using only edges without nodes

[catbao]

I'm trying to use d3 to draw a network graph. And my origin dataset is like this(json):

{
    "nodes":[
        {
            "id": "00M",
            "name": "Thigpen"
        },
        {
            "id": "00R",
            "name": "Livingston Municipal"
        }
    ],
    "links":[
        {
            "source": "00M",
            "target": "00R",
            "opacity": 0.61
        }
    ]
}

And through this, I can code like below to generate a network graph with given nodes and links:

d3.json("./air.json",` function( data) {
        var link = svg
        .attr("class","links")
            .selectAll("line")
            .data(data.links)
            .enter()
            .append("line")
            .style("stroke", "#000000")
            .style("stroke-width",1)
   
        var node = svg
            .selectAll("circle")
            .data(data.nodes)
            .enter()
            .append("circle")
            .attr("r", 1)
            .style("fill", "#000000")


        var simulation = d3.forceSimulation(data.nodes)                 
            .force("link", d3.forceLink()                               
                    .id(function(d) { return d.id; })                     
                    .links(data.links)                                    
            )
            .force("charge", d3.forceManyBody().strength(-400))         
            .force("center", d3.forceCenter(width / 2, height / 2))     
            .on("end", ticked);

        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; })
                .style("opacity",function(d) {return (Math.sqrt((d.source.x-d.target.x)*(d.source.x-d.target.x)+(d.source.y-d.target.y)))/1200; });
                // (Math.sqrt((d.source.x-d.target.x)*(d.source.x-d.target.x)+(d.source.y-d.target.y)))/300
            node
                .attr("cx", function (d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
        }

This seems normal, but I'm looking for a larger dataset at https://snap.stanford.edu/data/. And the dataset doesn't like the dataset I have shown before. It only has edge lists without nodes like the pictures(.csv):

So, in this case, how should I modify my code to draw such a network graph using d3?

By the way, I'm trying to have smaller datasets, and when the datasets are large, like graphs with three thousand nodes and tens of thousands of edges, I feel like my computer can't run. Is there any way to do it in this case?

[Fil]

Yes, using SVG and even canvas with computations on the CPU only goes so far. For large datasets, you can try @anvaka's ngraph library, or give a shot to the new cosmograph, by @rokotyan.

Links:

• https://github.com/anvaka/ngraph
• https://observablehq.com/@fil/ngraph-pagerank-louvain
• https://nightingaledvs.com/how-to-visualize-a-graph-with-a-million-nodes/
• https://observablehq.com/@recifs/hello-cosmograph

In the last example I create the nodes from the original dataset which only contains links.