Modern Lib. 100 — Scatter Plot Sketches

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

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

svg {
		border: 1px solid #f0f;
	}

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

</style>

<body>
<h1>Author and Book Data Comparisons</h1>
</body>

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

var width = 960 - margin.left - margin.right,
		height = 500 - margin.top - margin.bottom;

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

var yScale = d3.scale.linear()
		.range([height,0]);

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

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

console.log(data);

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;

});

function letsGraph(xData, yData) {

var svg = d3.select("body").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 + ")");

var xAxis = d3.svg.axis()
			.scale(xScale)
			.tickSize(-height)
			.tickPadding(2)
			.tickFormat(d3.round)
			// important for year formatting
			.orient("bottom");

var yAxis = d3.svg.axis()
			.scale(yScale)
			.tickSize(-width)
			.tickPadding(2)
			.tickFormat(d3.round)
			.orient("right");

xScale.domain(d3.extent(data, function(d) { return d[xData]; }));
		yScale.domain(d3.extent(data, function(d) { return d[yData]; }));

svg.append("g")
			.attr("class", "axis xAxis")
			.attr("transform", "translate(0," + height +")")
			.call(xAxis);
		svg.append("g")
			.attr("class", "axis yAxis")
			.attr("transform", "translate(" + width +",0)")
			.call(yAxis);

var circleGroup = svg.selectAll(".circleGroup")
			.data(data)
			.enter()
			.append("g")
			.attr("class", ".circleGroup")
			.attr("transform", function (d) { return "translate(" + xScale(d[xData]) + "," + yScale(d[yData]) + ")"; })
			.attr("title", function (d) { return d.BOOK; });

circleGroup.append("circle")
			.attr("r", 5);

svg.append("text")
			.attr("transform", "translate(4,10)")
			.text( function (d) { return xData + " v. " + yData; });

};

letsGraph("RANKING", "YEAR_BOOK");
	letsGraph("RANKING", "AGE_BOOK");
	letsGraph("RANKING", "LIFESPAN");
	letsGraph("RANKING", "EDITORS_WIKI");
	letsGraph("RANKING", "WIKIPEDIA_VIEWS");
	letsGraph("EDITORS_WIKI", "YEAR_BOOK");
	letsGraph("EDITORS_WIKI", "AGE_BOOK");
	letsGraph("EDITORS_WIKI", "LIFESPAN");
	letsGraph("WIKIPEDIA_VIEWS", "YEAR_BOOK");
	letsGraph("WIKIPEDIA_VIEWS", "AGE_BOOK");
	letsGraph("WIKIPEDIA_VIEWS", "LIFESPAN");

};

</script>

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