Modern Lib. 100 — Unstyled

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

body {
		font-family: arial, sans;
		font-size: 9px;
		width: 960px;
		margin: 40px auto;
	}

svg {
		border: 1px solid #f0f;
	}
	.container {
		margin-bottom: 12px;
	}
	.block {
		margin-bottom: 3px;
		display: inline-block;
		vertical-align: middle;
	}
	.authorBlock {
		width: 80px;
	}
	.booksBlock {
		margin-left: 10px;
	}
	.timelineBaseline {
		stroke: black;
		stroke-width: 1px;
	}
	.timelineActive {
		opacity: 0.5;
	}
	.bookCircleLabel {
		text-anchor: middle;
	}
	.book {
		margin-right: 6px;
	}

/*  .axis path {
		display: none;
	}
	.yAxis .tick line {
		stroke: #ddd;
	}
	.xAxis .tick line {
		stroke: #ddd;
	}*/

</style>

<body>
<h1>Author and Book Data Comparisons</h1>
<div class="mainContainer"></div>
</body>

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

var width = 500 - 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.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;
	});

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.NATION = capitalizeEachWord(d.values[0].NATION);
		d.ACTIVE_SPAN = +d.values[0].LIFESPAN - +d.values[0].AGE_FIRST_NOVEL;
	});

// data is ready
	console.log(nestedData);

var container = d3.select("body").select("div.mainContainer").selectAll("div.container")
		.data(nestedData)
		.enter()
		.append("div")
		.attr("class", "container");

// 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("div")
		.attr("class", "authorCountry")
		.text( function (d) { return d.NATION; });
	authorBlockInfo.append("div")
		.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");
	booksBlockInfo.selectAll(".book")
		.data( function (d) { return d.values; })
		.enter()
		.append("span")
		.attr("class", "book")
		.text( function (d) { return d.RANKING + ". " + d.BOOK; });

};

</script>

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