fg

.block

license: mit
scrolling: true
height: 300

chart.js

// Request the data
d3.json('data.json', function(err, response){

	var svg, scenes, charactersMap, width, height, sceneWidth;

	// Get the data in the format we need to feed to d3.layout.narrative().scenes
	scenes = wrangle(response);

	// Some defaults
	sceneWidth = 10;
	width = scenes.length * sceneWidth * 4;
	height = 600;
	labelSize = [150,15];

	// The container element (this is the HTML fragment);
	svg = d3.select("body").append('svg')
		.attr('id', 'narrative-chart')
		.attr('width', width)
		.attr('height', height);

	// Calculate the actual width of every character label.
	scenes.forEach(function(scene){
		scene.characters.forEach(function(character) {
			character.width = svg.append('text')
				.attr('opacity',0)
				.attr('class', 'temp')
				.text(character.name)
					.node().getComputedTextLength()+10;
		});
	});

	// Remove all the temporary labels.
	svg.selectAll('text.temp').remove();

	// Do the layout
	narrative = d3.layout.narrative()
		.scenes(scenes)
		.size([width,height])
		.pathSpace(10)
		.groupMargin(10)
		.labelSize([250,15])
		.scenePadding([5,sceneWidth/2,5,sceneWidth/2])
		.labelPosition('left')
		.layout();

	// Get the extent so we can re-size the SVG appropriately.
	svg.attr('height', narrative.extent()[1]);

	// Draw the scenes
	svg.selectAll('.scene').data(narrative.scenes()).enter()
		.append('g').attr('class', 'scene')
			.attr('transform', function(d){
					var x,y;
					x = Math.round(d.x)+0.5;
					y = Math.round(d.y)+0.5;
					return 'translate('+[x,y]+')';
				})
			.append('rect')
				.attr('width', sceneWidth)
				.attr('height', function(d){
					return d.height;
				})
				.attr('y', 0)
				.attr('x', 0)
				.attr('rx', 3)
				.attr('ry', 3);

	// Draw appearances
	svg.selectAll('.scene').selectAll('.appearance').data(function(d){
		return d.appearances;
	}).enter().append('circle')
		.attr('cx', function(d){
			return d.x;
		})
		.attr('cy', function(d){
			return d.y;
		})
		.attr('r', function(){
			return 2;
		})
		.attr('class', function(d){
			return 'appearance light';
		});

	// Draw links
	svg.selectAll('.link').data(narrative.links()).enter()
		.append('path')
		.attr('class', function(d) {
			return 'link light';
		})
		.attr('d', narrative.link());

	// Draw intro nodes
	svg.selectAll('.intro').data(narrative.introductions())
		.enter().call(function(s){
			var g, text;

			g = s.append('g').attr('class', 'intro');

			g.append('rect')
				.attr('y', -4)
				.attr('x', -4)
				.attr('width', 4)
				.attr('height', 8);

			text = g.append('g').attr('class','text');

			// Apppend two actual 'text' nodes to fake an 'outside' outline.
			text.append('text');
			text.append('text').attr('class', 'color');

			g.attr('transform', function(d){
					var x,y;
					x = Math.round(d.x);
					y = Math.round(d.y);
					return 'translate(' + [x,y] + ')';
				});

			g.selectAll('text')
				.attr('text-anchor', 'end')
				.attr('y', '4px')
				.attr('x', '-8px')
				.text(function(d){ return d.character.name; });

			g.select('.color')
				.attr('class', function(d){
					return 'color light';
				});

			g.select('rect')
				.attr('class', function(d){
					return 'light';
				});

		});

});

function wrangle(data) {

	var charactersMap = {};

	return data.scenes.map(function(scene){
		return {characters: scene.map(function(id){
			return characterById(id);
		}).filter(function(d) { return (d); })};
	});

	// Helper to get characters by ID from the raw data
	function characterById(id) {
		charactersMap = charactersMap || {};
		charactersMap[id] = charactersMap[id] || data.characters.find(function(character){
			return character.id === id;
		});
		return charactersMap[id];
	}

}

data.json

{
  "characters": 
 [{"id": "jordan", "name": "Jordan Lewis"},
 {"id": "becca", "name": "Rebecca Rohrer"},
 {"id": "aileen", "name": "Aileen Patimeeteporn"},
 {"id": "kate", "name": "Kate Donahue"},
 {"id": "maxl", "name": "Max Livingston"},
 {"id": "silvie", "name": "Silvie Senauke"},
 {"id": "lp", "name": "Alex Lis-Perlis"},
 {"id": "kiron", "name": "Kiron Roy"},
 {"id": "sam", "name": "Sam Ghitelman"},
 {"id": "mimi", "name": "Mimi Clara"},
 {"id": "rafi", "name": "Rafi Shamim"},
 {"id": "oleh", "name": "Oleh"},
 {"id": "willie", "name": "Willie Gambucci"},
 {"id": "kathleen", "name": "Kathleen"},
 {"id": "angela", "name": "Angela"},
 {"id": "marina", "name": "Marina Kaganova"},
 {"id": "noah", "name": "Noah Chasek-Macfoy"},
 {"id": "maxm", "name": "Max Marinoff"},
 {"id": "simon", "name": "Simon Glenn-Gregg"},
 {"id": "gideon", "name": "Gideon Dresdner"},
 {"id": "juliet", "name": "Juliet"},
 {"id": "keith", "name": "Keith"},
 {"id": "hannah", "name": "Hannah Ronson"},
 {"id": "naomi", "name": "Naomi Wossen"}],
 "scenes": [
   [ "silvie", "kate", "mimi"],
   [ "jordan", "maxm", "simon", "gideon", "noah" ],
   [ "kate", "aileen", "naomi"],
   [ "noah", "jordan", "gideon"],
   [ "silvie", "maxl", "jordan", "kate", "aileen", "lp"]
  ]
}

index.html

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

	text {
		font-family: "ProximaNova",Helvetica,Arial,sans-serif;
		font-size: 12px;
	}

	rect {
		fill: none;
		stroke: #000;
	}
	path {
		fill: none;
		stroke-width: 2;
		stroke: #333;
	}

	path.light {
		stroke: #3c6da8;
	}

	path.dark {
		stroke: #df2929;
	}

	.intro text:first-child {
		fill: #fff;
	    stroke: #f9f9f9;
	    stroke-width: 3;
	}

	.intro text+text {
	    fill: #333;
	}

	.intro text+text.dark {
	    fill: #df2929;
	}

	.intro text+text.light {
	    fill: #3c6da8;
	}
</style>

<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdn.rawgit.com/abcnews/d3-layout-narrative/1.0.0/narrative.js"></script>
	<script src="chart.js"></script>
</body>