Jump to content

Data Visualization via D3.js nested in Squarespace

Recommended Posts

Hello everyone!

I have problem with this page:


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!

Edited by Sztyft
Link to comment
  • Replies 2
  • Views 294
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic


<script src="https://d3js.org/d3.v6.min.js"></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')
            .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')
            .attr('class', 'link');

        // Add nodes
        const node = svg.append('g')
            .attr('class', 'nodes')
            .attr('class', 'node')
            .attr('r', 10)
            .attr('fill', d => d.color)

        // Add labels
            .text(d => d.name);

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

                .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);

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.