Labeled Force Layout 3

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

forked from mbostock's block: Labeled Force Layout

forked from newsummit's block: Labeled Force Layout

forked from newsummit's block: Labeled Force Layout 2

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.js"></script>
  <style>
    .link {
      stroke: #ccc;
    }

.node text {
      pointer-events: none;
      font: 10px sans-serif;
    }
  </style>
</head>

<body>
  <div id="main"></div>
<script>
	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: 4,				//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',
	 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

//Scale for the radius
	var rScale = d3.scale.linear().domain([0, 1]).range([0, radius]);
  
  
		
	/////////////////////////////////////////////////////////
	//////////// Create the container SVG and g /////////////
	/////////////////////////////////////////////////////////

//Remove whatever chart with the same id/class was present before
	//d3.select(id).select("svg").remove();
	
	//Initiate the radar chart SVG
	var svg = d3.select(cfg.id).append("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("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)).reverse())
	   .enter().append("text")
	   .attr("class", "axisLabel")
	   .attr("x", 4)
	   .attr("y", function(d){return -d*radius/cfg.levels;})
	   .attr("dy", "0.4em")
	   .style("font-size", "14px")
	   .attr("fill", "#737373")
	   .text(function(d,i) { 
    //console.log('d: '+ d + ' levels : ' + cfg.levels);
    return Format(maxValue * d/cfg.levels); 
  });

var link,
    node,
    width = 960,
    height = 700,
    maxDist = 300,
    minDist = 20,
		force = d3.layout.force()
      .gravity(0.05)
      .charge(-500)
      .size([cfg.w, cfg.h]);

d3.json("graph.json", function(error, json) {
  if (error) throw error;

force
      .nodes(json.nodes)
      .links(json.links)
  		.distance(function(d){ 
    		//console.log(d.source.index);
    		return Math.random() * maxDist + minDist; 
  		})
      .start();

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

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

// Insert image element
  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);
  
  // Insert rect element with no width yet
  node.append("rect")
      .attr("x", 6)
      .attr("y", -10)
  		.attr("rx", 8)
  		.attr("ry", 8)
      .attr("height", 24)
      .style("fill", "#FFE6F0");

// 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 });

// 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);
  
 
  console.log('links: ' ,link);
  console.log('nodes: ' ,node);
  
  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 = 500;
        d.y = 500;
      }
      return "translate(" + d.x + "," + d.y + ")";
    });
    
  });
});

</script>
</body>

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