Data Visualization via D3.js nested in Squarespace

Hello everyone!

I have problem with this page:

https://www.neuroncrafts.com/sap-consultancy

I want to nest there the D3.js SVG graphics - multiple types. I can't place them properly. They show up bottom of the page.

Can you help me figure out what to do? CSS <style>? HTML <div>s? Or this is pure D3.js that I need to know better to manipulate the position of my graphs? The graph instead of bottom should appear below the "line" seen in the middle.

Any help appreciated 🙂

Thanks for help!

Code:

<script src="https://d3js.org/d3.v6.min.js"></script>
    <script>
        // Sample data
        const data = {
            nodes: [
                {id: '1', name: 'Node 1', color: 'red'},
                {id: '2', name: 'Node 2', color: 'black'},
                {id: '3', name: 'Node 3', color: 'green'}
            ],
            links: [
                {source: '1', target: '2'},
                {source: '2', target: '3'}
            ]
        };

        // Dimensions
        const width = 0.5 * window.innerWidth;
        const height = 0.5 * window.innerHeight;

        // Create SVG element
        const svg = d3.select('body')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
           .style("background-color", "white")
           .style("border", "solid")
           .style("border-width", "2px")
           .style("border-radius", "5px")
           .style("padding", "5px")
           .style("position", "absolute")
          ;

        // Create simulation
        const simulation = d3.forceSimulation(data.nodes)
            .force('link', d3.forceLink(data.links).id(d => d.id))
            .force('charge', d3.forceManyBody().strength(-400))
            .force('center', d3.forceCenter(width / 2, height / 2));

        // Add links
        const link = svg.append('g')
            .attr('class', 'links')
            .selectAll('line')
            .data(data.links)
            .enter().append('line')
            .attr('class', 'link');

        // Add nodes
        const node = svg.append('g')
            .attr('class', 'nodes')
            .selectAll('circle')
            .data(data.nodes)
            .enter().append('circle')
            .attr('class', 'node')
            .attr('r', 10)
            .attr('fill', d => d.color)
            .call(drag(simulation));

        // Add labels
        node.append('title')
            .text(d => d.name);

        simulation.on('tick', () => {
            link
                .attr('x1', d => d.source.x)
                .attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x)
                .attr('y2', d => d.target.y);

            node
                .attr('cx', d => d.x)
                .attr('cy', d => d.y);
        });

        // Drag function
        function drag(simulation) {
            function dragstarted(event, d) {
                if (!event.active) simulation.alphaTarget(0.3).restart();
                d.fx = d.x;
                d.fy = d.y;
            }

            function dragged(event, d) {
                d.fx = event.x;
                d.fy = event.y;
            }

            function dragended(event, d) {
                if (!event.active) simulation.alphaTarget(0);
                d.fx = null;
                d.fy = null;
            }

            return d3.drag()
                .on('start', dragstarted)
                .on('drag', dragged)
                .on('end', dragended);
        }
    </script>

Try adding code to Code Block