Labeled Force Layout Combined

A force-directed graph using images as nodes, with accompanying text labels.

forked from mbostock's block: Labeled Force Layout

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  stroke: #ccc;
}

.node text {
  pointer-events: none;
  font: 14px sans-serif;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var link,
    node,
    width = 960,
    height = 700,
    maxDist = 300,
    minDist = 20,
    circleRadius = 25,
    collisionIndex = 2,
    collisionOffset = 15,
    gradientStart = '#ffa474',
    gradientStop = '#8b0000',
		svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
		force = d3.layout.force()
      .gravity(0)
      .charge(-600)
      .size([width, height]);

var cfg = {
   w: 800,				//Width of the circle
	 h: 800,				//Height of the circle
	 margin: {top: 20, right: 20, bottom: 20, left: 20}, //The margins around the circle
	 levels: 5,				//How many levels or inner circles should there be drawn
	 maxValue: 1, 				//What is the value that the biggest circle will represent
	 labelFactor: 1.25, 			//How much farther than the radius of the outer circle should the labels be placed
	 wrapWidth: 135, 			//The number of pixels after which a label needs to be given a new line
	 opacityArea: 0.35, 			//The opacity of the area of the blob
	 dotRadius: 4, 				//The size of the colored circles of each blog
	 opacityCircles: 0.05, 			//The opacity of the circles of each blob
	 strokeWidth: 2, 			//The width of the stroke around each blob
	 roundStrokes: false,			//If true the area and stroke will follow a round path (cardinal-closed)
	 color: d3.scale.ordinal().range(d3.shuffle(['#1f77b4','#ff7f0e','#2ca02c','#d62728','#8c564b','#e377c2','#EDB220'])),		//Color function
   sourceNode: '001',
   additionalDistance: 50,
	 axisName: "axis",
	 value: "value",
	 sortAreas: true,
   id: ".radarChart"
	};

var radius = Math.min(cfg.w/2, cfg.h/2), 			//Radius of the outermost circle
		  Format = d3.format('%');			 	//Percentage formatting
 
  
  /////////////////////////////////////////////////////////
	//////////// Create the container SVG and g /////////////
	/////////////////////////////////////////////////////////
	
	//Initiate the radar chart SVG
	svg
			.attr("width",  cfg.w + cfg.margin.left + cfg.margin.right)
			.attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom)
			.attr("class", "radar"+cfg.id);

//Append a g element		
	var g = svg.append("g")
			.attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")");

/////////////////////////////////////////////////////////
	////////// Glow filter for some extra pizzazz ///////////
	/////////////////////////////////////////////////////////
	
	//Filter for the outside glow
	var filter = g.append('defs').append('filter').attr('id','glow'),
		feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'),
		feMerge = filter.append('feMerge'),
		feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'),
		feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic');

/////////////////////////////////////////////////////////
	/////////////// Draw the Circular grid //////////////////
	/////////////////////////////////////////////////////////
  
  //Wrapper for the grid & axes
	var axisGrid = g.append("g").attr("class", "axisWrapper");

//Draw the background circles
	axisGrid.selectAll(".levels")
	   .data(d3.range(1,(cfg.levels+1)).reverse())
	   .enter()
		.append("circle")
		.attr("class", "gridCircle")
    .attr("id", function(d, i) { return "c" + i; })
		.attr("r", function(d, i){return radius/cfg.levels*d;})
		.style("fill", "#CDCDCD")
		.style("stroke", "#CDCDCD")
		.style("fill-opacity", cfg.opacityCircles)
		.style("filter" , "url(#glow)");

//Text indicating at what % each level is
	axisGrid.selectAll(".axisLabel")
	   .data(d3.range(1,(cfg.levels+1)))
	   .enter().append("text")
	   .attr("class", "axisLabel")
	   .attr("x", 1)
	   .attr("y", function(d){return -d*radius/cfg.levels;})
	   .attr("dy", "0.4em")
	   .style("font-size", "14px")
	   .attr("fill", "#737373")
	   .text(function(d,i) { 
       var scaleLabel = cfg.maxValue * d/cfg.levels -1;
       if (scaleLabel !== 0) { scaleLabel = scaleLabel * -1; }
       return Format(scaleLabel); 
     });

var h = 140, w = 400;

var key = d3.select("body").append("svg").attr("width", w).attr("height", h);

var legend = svg.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("x2", "0%");

legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

svg.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)");

var y = d3.scale.linear().range([300, 0]).domain([1, 100]);

d3.json("graph.json", function(error, json) {
  if (error) throw error;
    
  var xnodes = [
      {"id": "001", "name": "title", "score": 1},
      {"id": "002", "name": "title", "score": 0.4},
      {"id": "003", "name": "title", "score": 0.4},
      {"id": "003", "name": "title", "score": 0.4},
      {"id": "004", "name": "title", "score": 0.4},
      {"id": "005", "name": "title", "score": 0.4},
      {"id": "006", "name": "title", "score": 0.4},
      {"id": "007", "name": "title", "score": 0.4},
      {"id": "008", "name": "title", "score": 0.4},
      {"id": "009", "name": "title", "score": 0.4},
      {"id": "010", "name": "title", "score": 0.4},
      {"id": "003", "name": "title", "score": 0.4},
      {"id": "004", "name": "title", "score": 0.4},
      {"id": "005", "name": "title", "score": 0.4},
      {"id": "006", "name": "title", "score": 0.4},
      {"id": "007", "name": "title", "score": 0.4},
      {"id": "008", "name": "title", "score": 0.4},
      {"id": "009", "name": "title", "score": 0.4},
      {"id": "010", "name": "title", "score": 0.4},
      {"id": "003", "name": "title", "score": 0.4},
      {"id": "004", "name": "title", "score": 0.4},
      {"id": "005", "name": "title", "score": 0.4},
      {"id": "006", "name": "title", "score": 0.4},
      {"id": "007", "name": "title", "score": 0.4},
      {"id": "008", "name": "title", "score": 0.4},
      {"id": "009", "name": "title", "score": 0.4},
      {"id": "010", "name": "title", "score": 0.4}
    ],
    xlinks = [],
    xSource = xnodes.filter(function(x) { return x.id === "001"; })[0],
    rScale = d3.scale.linear().domain([0, 1]).range([0, radius]);
  
  xnodes.forEach(function(node) {
  var distance = rScale(node.score); // Math.floor(1 - node.score) 
  node.name = node.score.toFixed(2);
  xlinks.push({
    source: xSource,
    target: node,
    dist: distance
  });
});

force
      .nodes(xnodes)
      .links(xlinks)
  		.distance(function(d){ 
    		return d.dist; 
  		})
  		.charge(function(d){
        var charge = -400;
        if (d.index === 0) charge = 10 * charge;
        return charge;
    	})
      .start();

link = svg.selectAll(".link")
      .data(xlinks)
      .enter().append("line")
      .attr("class", "link");

// Create a 'g' node for each data entry
  node = svg.selectAll(".node")
      .data(xnodes)
      .enter().append("g")
      .attr("class", "node");
      //.call(force.drag);

// Insert image element
  node.append("circle")
      .attr("x", -8)
      .attr("y", -8)
      .attr('r', function(d) {
        if (d.index === 0) { return 80; }
    		else return circleRadius;
      })
  		.style('fill', '#1f77b4');
  
  // Insert rect element with no width yet
  node.append("rect")
      .attr("x", 6)
      .attr("y", -15)
  		.attr("rx", 8)
  		.attr("ry", 8)
      .attr("height", 24)
      .style("fill", "#FFE6F0")
  		.style("opacity", 0);

// Add title name
  node.append("text")
      .attr("dx", -12)
      .attr("dy", ".35em")
  		.attr("class", "text")
  		.attr("data-weight", function(d) { return d.weight; })
      .text(function(d) { return d.name })
   		.style("fill", "white");

// Now, set the rect width based on title length 
  node.selectAll("rect")
      .attr("width", function(d) {
    		var txtWidth = this.parentNode.children[2].getComputedTextLength();
        return Math.floor(txtWidth + 15);
 	 		});
  
  node.call(force.drag);
  
  force.on("tick", function() {    
    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("transform", function(d) { 
      if (d.index == 0) {
        d.x = cfg.w/2 + cfg.margin.left;
        d.y = cfg.h/2 + cfg.margin.top;
      }
      return "translate(" + d.x + "," + d.y + ")";
    });
    
  });
      
});

</script>

https://d3js.org/d3.v3.min.js