Basic loom and string layout

This is the default example of the loom plugin which creates a chart with a group of entities in the center and different group of entities on the outside. They are connected by strings where the thickness of the string on the outside represents the connection (i.e. value) of the inner and outer entity.

For example, in this case, the inner entities are the characters of the Fellowship in the Lord of the Rings movies. The outer entities are the locations in Middle Earth where the movie takes place. The connection/value is the number of words spoken by each character at each location.

Read more about the loom chart layout / plugin for d3 here

A more advanced version that also uses interactions can be found here

Built with blockbuilder.org

forked from nbremer's block: Basic loom and string layout

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<link href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps|Macondo" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Cormorant:300,400" rel="stylesheet">
		
		<style>
			html { 
				font-size: 61%; 
			}

body {
				font-family: 'Cormorant', serif;
				font-size: 1.2rem;
				fill: #b9b9b9;
			}

#chart {
				text-align: center;
			}

.string-wrapper {
				isolation: isolate;
			}

.string {
				mix-blend-mode: multiply;
			}
						
			.inner-label {
				font-family: 'Macondo Swash Caps', cursive;
				font-size: 1.4rem;
				fill: #232323;
				cursor: default;
				text-anchor: middle;
			}

.outer-label {
				font-family: 'Macondo', cursive;
				font-size: 1.6rem;
				fill: #5f5f5f;
				cursor: default;
			}

.outer-label-value {
				font-size: 1.2rem;
				fill: #b9b9b9;
			}
		</style>
		
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script src="loom.js"></script>
	</head>
	<body>
		<div id="chart"></div>

var margin = {left:120, top:50, right:120, bottom:50},
				width = 710,
				height = 600,
				innerRadius = 244,
				outerRadius = innerRadius * 1.05;
						
			var svg = d3.select("#chart").append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom);

////////////////////////////////////////////////////////////
			/////////////////// Set-up Loom parameters /////////////////
			////////////////////////////////////////////////////////////
				
			//Some default parameters
			var pullOutSize = 20 + 30/135 * innerRadius;
			var numFormat = d3.format(",.0f");

//Manually sorted the inner characters based on the total number of words spoken
			var characterOrder = ["Gandalf", "Sam", "Aragorn", "Frodo", "Gimli", "Pippin", "Merry", "Boromir", "Legolas"]
			function sortCharacter(a, b) { return characterOrder.indexOf(a) - characterOrder.indexOf(b); }

//Initiate the loom function with all the options
			var loom = d3.loom()
			    .padAngle(0.05)
			    .sortSubgroups(sortCharacter)
				.heightInner(20)
				.emptyPerc(0.2)
				.widthInner(30)
				.value(function(d) { return d.words; })
				.inner(function(d) { return d.character; })
				.outer(function(d) { return d.location; })

//Initiate the inner string function that belongs to the loom
			var string = d3.string()
				.radius(innerRadius)
				.pullout(pullOutSize);

//Initiate an arc drawing function that is also needed
			var arc = d3.arc()
				.innerRadius(innerRadius*1.01)
				.outerRadius(outerRadius);

////////////////////////////////////////////////////////////
			///////////////////////// Colors ///////////////////////////
			////////////////////////////////////////////////////////////
								
			//Color for the unique locations
			var locations = ["Bree", "Emyn Muil", "Fangorn", "Gondor",  "Isengard", "Lothlorien", "Misty Mountains", "Mordor",  "Moria",   "Parth Galen", "Rivendell", "Rohan",   "The Shire"];
			var colors = ["#5a3511", "#47635f",   "#223e15", "#C6CAC9", "#0d1e25",  "#53821a",    "#4387AA",         "#770000", "#373F41", "#602317",     "#8D9413",   "#c17924", "#3C7E16"];
			var color = d3.scaleOrdinal()
				.domain(locations)
				.range(colors);

////////////////////////////////////////////////////////////
			///////////////////// Read in data /////////////////////////
			////////////////////////////////////////////////////////////
						
			d3.json("lotr_words_location.json", function (error, data) {
				
				//Create a group that already holds the data
				var g = svg.append("g")
				    .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
					.datum(loom(data));	
								
				////////////////////////////////////////////////////////////
				////////////////////// Draw outer arcs /////////////////////
				////////////////////////////////////////////////////////////

var arcGroup = g.append("g").attr("class", "arc-outer-wrapper");

//Create a group per outer arc, which will contain the arc path + the location name & number of words text
				var arcs = arcGroup.selectAll(".arc-wrapper")
					.data(function(s) { return s.groups; })
					.enter().append("g")
					.attr("class", "arc-wrapper")
					.each(function(d) { d.pullOutSize = (pullOutSize * ( d.startAngle > Math.PI + 1e-2 ? -1 : 1)) });

//Create the actual arc paths
				var outerArcs = arcs.append("path")
					.attr("class", "arc")
					.style("fill", function(d) { return color(d.outername); })
					.attr("d", arc)
					.attr("transform", function(d, i) { 
						return "translate(" + d.pullOutSize + ',' + 0 + ")"; //Pull the two slices apart
					});
						
				////////////////////////////////////////////////////////////
				//////////////////// Draw outer labels /////////////////////
				////////////////////////////////////////////////////////////

//The text needs to be rotated with the offset in the clockwise direction
				var outerLabels = arcs.append("g")
					.each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2); })
					.attr("class", "outer-labels")
					.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
					.attr("transform", function(d,i) { 
						var c = arc.centroid(d);
						return "translate(" + (c[0] + d.pullOutSize) + "," + c[1] + ")"
						+ "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
						+ "translate(" + 26 + ",0)"
						+ (d.angle > Math.PI ? "rotate(180)" : "")
					})
					
				//The outer name
				outerLabels.append("text")
					.attr("class", "outer-label")
					.attr("dy", ".35em")
					.text(function(d,i){ return d.outername; });
					
				//The value below it
				outerLabels.append("text")
					.attr("class", "outer-label-value")
					.attr("dy", "1.5em")
					.text(function(d,i){ return numFormat(d.value) + " words"; });

////////////////////////////////////////////////////////////
				//////////////////// Draw inner strings ////////////////////
				////////////////////////////////////////////////////////////
				
				var stringGroup = g.append("g").attr("class", "string-wrapper");

//Draw the paths of the inner strings
				var strings = stringGroup.selectAll("path")
					.data(function(strings) { return strings; })
					.enter().append("path")
					.attr("class", "string")
					.style("fill", function(d) { return d3.rgb( color(d.outer.outername) ).brighter(0.2) ; })
					.style("opacity", 0.85)
					.attr("d", string);
					
				////////////////////////////////////////////////////////////
				//////////////////// Draw inner labels /////////////////////
				////////////////////////////////////////////////////////////
						
				var innerLabelGroup = g.append("g").attr("class","inner-label-wrapper");

//Place the inner text labels in the middle
				var innerLabels = innerLabelGroup.selectAll("text")
					.data(function(s) { return s.innergroups; })
					.enter().append("text")
					.attr("class", "inner-label")
					.attr("x", function(d,i) { return d.x; })
					.attr("y", function(d,i) { return d.y; })
					.attr("dy", ".35em")
					.text(function(d,i) { return d.name; });
				  		
			});//d3.json
		</script>
	</body>
</html>

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