Clustered, Linked Nodes

Nodes clustered by nodeCategory.

by CoolBlue

CSS

body { margin: 0; }
svg { outline: 1px solid red; }

JavaScript

//Width and height for SVG area
    var w = 500;
    var h = 200;

    // nb_group, angle, intensity: Used in clustering the nodes  
    var nb_group=4;
    var angle = 2*Math.PI/nb_group;
    var intensity = 100;
    
    var svg = d3.select("body").append("svg")
              .attr("width", w)
              .attr("height", h)
    // add a transformation to center things
    		.append("g")
    		.attr("transform", "translate(" + [w/2, h/2] + ")");

    var colors = d3.scale.category10()
              .range(["#FFFF00",  //YELLOW
                      "#377eb8",  //BLUE
                      "#4daf4a",  //GREEN
                      "#e41a1c",  //RED
                      ]);  
    var dataset = {
        "nodes":[
            {"id":0,"name":"A","nodeCategory":"1"},
            {"id":1,"name":"AA","nodeCategory":"1"},
            {"id":2,"name":"B","nodeCategory":"2"},
            {"id":3,"name":"BB","nodeCategory":"2"},
            {"id":4,"name":"C","nodeCategory":"3"},
            {"id":5,"name":"CC","nodeCategory":"3"},
            {"id":6,"name":"D","nodeCategory":"4"},
            {"id":7,"name":"DD","nodeCategory":"4"},
            {"id":8,"name":"DDD","nodeCategory":"4"}
        ],
        "edges":[
            {"source":0,"target":2,"value":""},
            {"source":1,"target":3,"value":""},
            {"source":2,"target":4,"value":""},
            {"source":3,"target":5,"value":""},
            {"source":4,"target":6,"value":""},
            {"source":5,"target":7,"value":""},
            {"source":6,"target":8,"value":""},
            {"source":7,"target":0,"value":""},
            {"source":8,"target":1,"value":""}
       ]
    }
    var force = d3.layout.force()
                  .nodes(dataset.nodes)
                  .links(dataset.edges)
                  .gravity(.05)
                  .charge(-100)
                  .linkDistance(10)
                  .size([w, h])
                  .start();
    var drag = force.drag()
                   ...