BabyNames NZ - Remix of http://open.mashblock.co.nz/nz-baby-names/

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
	<title>Baby Names NZ</title>
	<style>
		body, html {
			margin: 0, padding: 0;
		}

app {
			font-family: Roboto;
		}

vis > div {
			display: inline-block;
			position: relative;
			top: 0;
			bottom: 0;
			vertical-align: top;
			margin-right: 24px;
		}

.headers .background {
			fill: #657D8B;
			fill-opacity: 0.2;
		}
		
		.headers text {
			font-size: 16px;
			font-weight: 500;
		}
	
		.headers .subtext {
			font-size: 12px;
		}

.row .odd {
			fill: #E7EBEE;
			fill-opacity: 0.2;
		}
	
		.row .even {
			fill: #C4CFD4;
			fill-opacity: 0.2;
		}

/* column 1 : Name */

.row .name {
			font-size: 15px;
		}

/* column 2 : name popularity distribution */
		path.gridline {
			stroke: #FFFFFF;
			stroke-width: 1;
			fill: none;
		}

.density {
			stroke-width: 1;
			stroke: #d7098c;
			fill: #d7098c;
			stroke-opacity: 0.2;
			fill-opacity: 0.5;
		}

.boy .density  {
			stroke: #005dac;
			fill: #005dac;
		}

/* column 3 : rank history */

path.sparkline {
			stroke: #d7098c;
			stroke-width: 1;
			stroke-opacity: 0.8;
			fill: none;
		}
		
		.boy path.sparkline  {
			stroke: #005dac;
		}
	
	</style>
</head>
<body>
<app>
	<h1>Popularity of Baby Names in New Zealand</h1>
	<p><a href="https://gist.github.com/widged/7226863">Gist</a> by <a href="https://twitter.com/widged">@widged</a>. Remix of <a href="https://github.com/Mashblock/baby-names">mashblock</a>.</p>
	<vis>
		<div id="boys" class="boy"></div>
		<div id="girls" class="girl"></div>
	</vis>
</app>
<script>

d3.csv("boys.csv", function(data) {
	var d = parseData(data);
	var div = document.getElementById('boys');
	render(div, d.dataset, d.config.rankMaximum);
});
d3.csv("girls.csv", function(data) {
	var d = parseData(data);
	var div = document.getElementById('girls');
	render(div, d.dataset, d.config.rankMaximum);
});

var Dict = {};
(function(Class) {

Class.instance = function() {
		var instance = {}, keys = [], items = [];

instance.getOrAdd = function(k) {
			var idx = keys.indexOf(k);
			if(idx === -1) { 
				idx = keys.length; keys.push(k); 
				items[idx] = {k: k};
			} 
			return items[idx];
		};

instance.list = function() {
			return items;
		};
		return instance;
	};

}(Dict));

function parseData(data) {

var dataset = nameDict.list();
	dataset.sort(function(a,b) { 
		return a.k < b.k ? -1 : +1; 
	});
	return {dataset: dataset, config: {rankMaximum: rMax}};

}

function babyNames(config) {
	var lineHeight = config.lineHeight;
	return function(nodes) {
		nodes.append("svg:text")
			.style("text-anchor", "left")
			.attr("x", 0).attr("y", lineHeight - 8)
			.attr("class", "name")
			.text(function(d, i) { return "" + d.k;  });

};
}

function nameRankVariations(config) {

var DOT_WIDTH = 6, lineHeight = config.lineHeight;

return function(nodes) {
		var  xDensity = function(v) { return ((v / 660) * 200); };

[0,100,200,300,400,500,600,700].forEach(function(tick) {
			nodes
				.append("svg:path")
				.attr("d", "M"+xDensity(tick)+",0L"+xDensity(tick)+", " + lineHeight)
				.attr("class","gridline");
	    });

var density = nodes
			.selectAll("g").data(function(d) { return d.d; })
			.enter()
			.append("svg:circle")
			.attr("class", "density")
			.attr("r", DOT_WIDTH)
			.attr("cy", 11)
			.attr("cx", function(d) { return xDensity(d.number); });

yearList.sort();
	};

}

function nameRankHistory(config) {
	var rankMaximum = config.rankMaximum, 
		lineHeight = config.lineHeight;

return function(nodes) {

var rankLine = d3.svg.line()
			.x(function(d, i) { return i * 4; })
			.y(d3.scale.linear().domain([0, rankMaximum]).range([2, lineHeight-4]));

sparkline.append("svg:path")
			.attr("d", function(d) {  return rankLine(d); })
			.attr("class", "sparkline");

};
}
    
function render(node, dataset, rankMaximum) {

var LINE_HEIGHT = 24;
	var width = 500, height = (dataset.length * LINE_HEIGHT) + 40;

var svg = d3.select(node).append("svg")
        .attr("width", width)
        .attr("height", height);

var columns = [
    	{
    		header: {text: 'Names'}, 
    		itemRenderer: babyNames({lineHeight: LINE_HEIGHT}),
    		left: 5
    	},
    	{
    		header: {text: 'Rank Variations', subtext: '(gridline every 100)'}, 
    		itemRenderer: nameRankVariations({lineHeight: LINE_HEIGHT}),
    		left: 120,
    	},
    	{
    		header: {text: 'Rank over years', subtext: '(from 1999 to 2012)'},  
    		itemRenderer: nameRankHistory({rankMaximum: rankMaximum,lineHeight: LINE_HEIGHT}),
    		left: 380
    	}
    ];

var headers  = svg.append("g")
    	.attr("class", 'headers')
    	.attr("transform", function(d, i) { return "translate("+0+"," + 0 +")"; } );

headers.append("svg:rect")
		.attr("width", width)
		.attr("height", 40)
		.attr("class", 'background');

var body = svg.append("g")
    	.attr("transform", function(d, i) { return "translate("+0+"," + 40 +")"; } );

var rows =  body.selectAll("g.row")
        .data(dataset)
        .enter()
        .append("svg:g")
        .attr("class", "row")
        .attr("transform", function(d, i) { return "translate("+0+"," + (i * LINE_HEIGHT) +")"; } );

// decoration for odd and event rows
    rows
    	.append("svg:rect")
		.attr("width", width)
		.attr("height", LINE_HEIGHT-2)
		.attr("class", function(d, i) { return i % 2 === 0 ? "odd": "even"; });

columns.forEach(function(col) {
    	var header = col.header, left = col.left, itemRenderer = col.itemRenderer;
    	var group = headers.append("svg:g");

if(header.text) {
		    group
		    	.append("text")
		    	.text(header.text)
		    	.attr("class", "text")
		    	.attr("transform", function(d, i) { return "translate("+ left+"," + 16 +")"; } );
	    }
	    if(header.subtext) {
		    group
		    	.append("text")
		    	.text(header.subtext)
		    	.attr("class", "subtext")
		    	.attr("transform", function(d, i) { return "translate("+ left+"," + 30 +")"; } );
	    }

var items = rows
	    	.append("svg:g")
	    	.attr("transform", function(d, i) { return "translate("+ left+"," + 0 +")"; } );
	    itemRenderer(items, {lineHeight: LINE_HEIGHT, rankMaximum: rankMaximum});

});

}

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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