Force diagram with labels

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
   <script src="https://d3js.org/d3.v3.min.js"></script>
</head>

/* 
 Adds labels to nodes in Scott Murray's Force Layout code 
 (see: https://chimera.labs.oreilly.com/books/1230000000345/ch11.html#_force_layout).  
*/

// Create an SVG line for each edge
		var edges = svg.selectAll("line")
		        .data(dataset.edges)
		        .enter()
		        .append("line")
		        .style("stroke", "#ccc")
		        .style("stroke-width", 1);
		        
		// Create an SVG circle for each node
		var nodes = svg.selectAll("circle")
		        .data(dataset.nodes)
		        .enter()
		        .append("circle")
		        .attr("r", 25)
		        .style("fill", "#019875")
		        .call(force.drag); //enables user to drag nodes around
		
		// Create labels for nodes 
		var labels = svg.selectAll("text")
				.data(dataset.nodes)
				.enter()
				.append("text")
				.text(function(d){
					return d.name;
				})
				.style({
					"fill": "black",
      				"font-family": "Helvetica",
      				"font-size": "12px"
					})
  
		force.on("tick", function() {
			edges.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; });
	
			nodes.attr("cx", function(d) { return d.x; })
	    	 .attr("cy", function(d) { return d.y; });
	    	
	    	// Give each label an x and y coordinate that corresponds to the center point of the node
	    	labels.attr("x", function(d){ return d.x; })
	    	 .attr("y", function(d){return d.y});

});

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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