Modern Lib. 100 — Final

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

body {
		font-family: "Georgia", serif;
		font-size: 9px;
		width: 960px;
		margin: 40px auto;
		background-color: #eeeae1;
		color: #333;
	}

h1 {
		color: #650000;
		font-size: 28px;
	}
	h3 {
		color: #650000;
		font-size: 12px;
	}

svg {
	}
	.container {
		margin-bottom: 12px;
	}
	.block {
		margin-bottom: 3px;
		display: inline-block;
		vertical-align: middle;
	}
	.about {
		width: 600px;
		line-height: 2;
		font-size: 11px;
	}
	.legendContainer {
		margin-top: 36px;
	}
	.w180 {
		width: 180px;
		display: inline-block;
	}
	.w600 {
		width: 567px;
		padding-left: 28px;
		display: inline-block;
	}

.authorBlock {
		width: 180px;
	}
	.authorName {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	}
	.authorYears {
		color: #888;
		margin-left: 3px;
	}
	.asia {
		color: #266538;
	}
	.europe {
		color: #146b89;
	}
	.northamerica {
		color: #820c22;
	}
	.southamerica {
		color: #b15a9f;
	}

.dashLine {
		stroke: #bbb;
		stroke-width: 1px;
		stroke-dasharray: 5,5;
	}
	.timelineLegend {
		fill: #888;
		text-anchor: left;
	}
	.timelineBaseline {
		stroke: #888;
		stroke-width: 1px;
	}
	.timelineActive {
		fill: #897553;
		opacity: 0.33;
	}
	.timelineStart {
		fill: #888;
	}
	.timelineEnd {
		fill: #eeeae1;
		stroke: #888;
		stroke-width: 1px;
	}
	.sublabel {
		fill: #888;
	}
	.bookCircleLabel {
		text-anchor: middle;
	}

.booksBlock {
		width: 180px;
	}

.book {
		margin-right: 2px;
		line-height: 1.5;
		display: inline-block;
		color: #888;
	}
	.book:after {
		content: ",";
	}
	.book:last-of-type:after {
		content: "";
	}
	.book0 {
		fill: #7a419f;
	}
	.book1 {
		fill: #de57a3;
	}
	.book2 {
		fill: #ea7c2d;
	}
	.book3 {
		fill: #e4c90a;
	}

.legendCircle {
		width: 7px;
		height: 7px;
		margin-right: 5px;
	}

.d1 {
		display: none;
	}

</style>

<body>
<h1>Modern Library's<br>100 Best Novels and Authors</h1>
<p class="about">In 1998, the Modern Library, an American Publishing house, published a list of the 100 best novels of the twentieth century. In 2013, Accurat visualized the creative output of the authors of these novels. The below graphic visualizes this same data, including information about the author's origin, lifespan, and creative output, as well the name, year, and author's age for each novel on the list.</p>
<div class="legendContainer">
	<h3 class="w180">Author</h3>
	<h3 class="w600">Timeline</h3>
	<h3 class="w180">Works, Chronological Order</h3>
</div>
<div class="mainContainer"></div>
</body>

var margin = {top: 10, right: 30, bottom: 10, left: 30};

var width = 600 - margin.left - margin.right,
		height = 40 - margin.top - margin.bottom;

var xScale = d3.scale.linear()
		.range([0,width]);

d3.tsv("books_authors.tsv", ready);

function ready(error, data) {
	if (error) return console.warn(error);

function capitalizeEachWord(str) {
    return str.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
	};

data.forEach( function (d) {
		d.AGE_BOOK = +d.AGE_BOOK;
		d.AGE_FIRST_NOVEL = +d.AGE_FIRST_NOVEL;
		d.BORN = +d.BORN;
		d.DIED = +d.DIED;
		d.DIFF = +d.DIFF;
		d.EDITORS_WIKI = +d.EDITORS_WIKI;
		d.FIRST_NOVEL = +d.FIRST_NOVEL;
		d.LIFESPAN = +d.LIFESPAN;
		d.RANKING = +d.RANKING;
		d.WIKIPEDIA_VIEWS = +d.WIKIPEDIA_VIEWS;
		d.YEAR_BOOK = +d.YEAR_BOOK;
		d.NATION = capitalizeEachWord(d.NATION);
		d.ACTIVE_SPAN = d.LIFESPAN - d.AGE_FIRST_NOVEL;
	});

data.sort( function (a,b) { return a.AGE_BOOK - b.AGE_BOOK; });

var xLifespan = data.map( function (d) { return d.LIFESPAN; });
	var xMax = d3.max(xLifespan);
	//console.log(xMax);

var nestedData = d3.nest()
	  .key(function(d) { return d.AUTHOR; })
	  .entries(data);

nestedData.forEach( function (d) {
		d.BORN = +d.values[0].BORN;
		d.DIED = +d.values[0].DIED;
		d.AGE_FIRST_NOVEL = +d.values[0].AGE_FIRST_NOVEL;
		d.LIFESPAN = +d.values[0].LIFESPAN;
		d.CONTINENT_CLASS = d.values[0].CONTINENT.replace(" ","");
		d.NATION = capitalizeEachWord(d.values[0].NATION);
		d.ACTIVE_SPAN = +d.values[0].LIFESPAN - +d.values[0].AGE_FIRST_NOVEL;
	});

nestedData.sort( function (a,b) { return a.LIFESPAN - b.LIFESPAN; });

// for all values within each object in nestedData
	// sort a,b a-b

var container = d3.select("body").select("div.mainContainer").selectAll("div.container")
		.data(nestedData)
		.enter()
		.append("div")
		.attr("class", function (d) { return "container " + d.key; });

// build containers
	var authorContainer = d3.selectAll("div.container");
	authorContainer.append("div").attr("class", "authorBlock block");
	authorContainer.append("div").attr("class", "timelineBlock block");
	authorContainer.append("div").attr("class", "booksBlock block");

// add author information
	var authorBlockInfo = d3.selectAll("div.authorBlock");
	authorBlockInfo.append("div")
		.attr("class", "authorName")
		.text( function (d) { return d.key; });
	authorBlockInfo.append("span")
		.attr("class", function (d) { return "authorCountry " + d.CONTINENT_CLASS; })
		.text( function (d) { return d.NATION; });
	authorBlockInfo.append("span")
		.attr("class", "authorYears")
		.text( function (d) { return d.BORN + "—" + d.DIED; });

// add timeline
	var timelineBlockInfo = authorContainer.select("div.timelineBlock");
	timelineBlockInfo.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom)
		.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

xScale.domain([0,xMax]);

var rectHeight = 5;
	var bookRadius = 5;

// add books
	var booksBlockInfo = authorContainer.select("div.booksBlock");
	var eachBookInfo = booksBlockInfo.selectAll(".book")
		.data( function (d) { return d.values; })
		.enter()
		.append("div");
	var booksBlockSVG = eachBookInfo.append('svg')
		.attr("class", "legendCircle");
	booksBlockSVG.append("circle")
		.attr("class", function (d, i) { return "book" + i; })
		.attr("r", 3.5)
		.attr("cx", 3.5)
		.attr("cy", 3.5);
	eachBookInfo.append("span")
		.attr("class", "book")
		.text( function (d) { return d.BOOK; });

// add legend
	var legendTimeline = d3.select('div.West div.timelineBlock svg g g');
	legendTimeline.append("text")
		.attr("class", "timelineLegend")
		.attr("dy", height/2+bookRadius+10)
		.attr("dx", 0)
		.style('fill', '#333')
		.text("Age at Release");
	legendTimeline.append("text")
		.attr("class", "timelineLegend")
		.attr("dy", height/2-bookRadius-5)
		.attr("dx", 0)
		.text("Age First Published, Died");

};

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js