tysonanderson · January 19, 2017 20:12
diff --git a/README.md b/README.md
diff --git a/index.css b/index.css
 rect{
 	fill: 'black';
 }

 body{
 	font-family: Helvetica;
 }

 .labels{
 	font-size: 8px;
 	fill: 'white';
 }
 .outline{
 	fill: none;
 	stroke-width: 2px;
 }
 .keyLabel{
 	font-size: 8px;
 }
 .keyBoxes{
 	width: 100px;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>


 </style>

 	<link type="text/css" href="index.css" rel="stylesheet"/>
 	<script src="https://d3js.org/d3.v4.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
 <script>

 var width = 960,
    height = 500;

 var thou = d3.format(",");

 d3.csv('Utah_Fish_Stocking_Report_2013.csv', function (data){

 	var species = _.map(_.uniqBy(data, 'Species'), 'Species');

 	var speciesScale = d3.scaleOrdinal(d3.schemeCategory20b).domain(species);

 	var nest = d3.nest()
 				.key(d => d.County)
 				.key(d => d.Species)
 				.rollup(function(leaves) { return d3.sum(leaves, d => d.Quantity)})
 				.entries(data);

 	var root = {"key": "root", "values": nest};

 	var he = d3.hierarchy( root , function (d){ return d.values } )
 			.sum(function(d) { return d.value })
 			.sort(function(d) { return d.value });

 	var tree = d3.treemap()
 			.size([width, height])
            .padding(0)
            .round(true);

 	tree(he) 

 	var svg = d3.select('body').append('svg')
 		.attr('width', width)
 		.attr('height', height);

 	var nodes = svg.selectAll('.nodes')
 					.data(he.leaves())
 					.enter()
 					.append('rect')
 					.attr('x', d => d.x0)
 					.attr('y', d => d.y0)
 					.attr('width', d => d.x1 - d.x0)
 					.attr('height', d => d.y1 - d.y0)
 					.style('fill', d => speciesScale(d.data.key) )
 					.on('click', function (e){ console.log(e.data) })
 					.append('title')
 						.html( d => ([d.data.key, thou(d.data.value)]).join(': '));

 	var text = svg.selectAll('.labels')
 					.data(he.children)
 					.enter()
 					.append('text')
 					.text(d => d.data.key)
 					.style('fill', 'white')
 					.attr('class', 'labels')
 					.attr('x', d => d.x0 + 2)
 					.attr('y', d => d.y0 + 9);

 	var outlines = svg.selectAll('.outline')
 					.data( he.children )
 					.enter()
 					.append('rect')
 					.attr('class', 'outline')
 					.attr('x', d => d.x0)
 					.attr('y', d => d.y0)
 					.attr('width', d => d.x1 - d.x0)
 					.attr('height', d => d.y1 - d.y0)
 					.style('stroke', 'white');

 });


 </script>
diff --git a/Utah_Fish_Stocking_Report_2013.csv b/Utah_Fish_Stocking_Report_2013.csv
	rect{
	fill: 'black';
	}

	body{
	font-family: Helvetica;
	}

	.labels{
	font-size: 8px;
	fill: 'white';
	}
	.outline{
	fill: none;
	stroke-width: 2px;
	}
	.keyLabel{
	font-size: 8px;
	}
	.keyBoxes{
	width: 100px;
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>


	</style>

	<link type="text/css" href="index.css" rel="stylesheet"/>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var thou = d3.format(",");

	d3.csv('Utah_Fish_Stocking_Report_2013.csv', function (data){

	var species = _.map(_.uniqBy(data, 'Species'), 'Species');

	var speciesScale = d3.scaleOrdinal(d3.schemeCategory20b).domain(species);

	var nest = d3.nest()
	.key(d => d.County)
	.key(d => d.Species)
	.rollup(function(leaves) { return d3.sum(leaves, d => d.Quantity)})
	.entries(data);

	var root = {"key": "root", "values": nest};

	var he = d3.hierarchy( root , function (d){ return d.values } )
	.sum(function(d) { return d.value })
	.sort(function(d) { return d.value });

	var tree = d3.treemap()
	.size([width, height])
	.padding(0)
	.round(true);

	tree(he)

	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);

	var nodes = svg.selectAll('.nodes')
	.data(he.leaves())
	.enter()
	.append('rect')
	.attr('x', d => d.x0)
	.attr('y', d => d.y0)
	.attr('width', d => d.x1 - d.x0)
	.attr('height', d => d.y1 - d.y0)
	.style('fill', d => speciesScale(d.data.key) )
	.on('click', function (e){ console.log(e.data) })
	.append('title')
	.html( d => ([d.data.key, thou(d.data.value)]).join(': '));

	var text = svg.selectAll('.labels')
	.data(he.children)
	.enter()
	.append('text')
	.text(d => d.data.key)
	.style('fill', 'white')
	.attr('class', 'labels')
	.attr('x', d => d.x0 + 2)
	.attr('y', d => d.y0 + 9);

	var outlines = svg.selectAll('.outline')
	.data( he.children )
	.enter()
	.append('rect')
	.attr('class', 'outline')
	.attr('x', d => d.x0)
	.attr('y', d => d.y0)
	.attr('width', d => d.x1 - d.x0)
	.attr('height', d => d.y1 - d.y0)
	.style('stroke', 'white');

	});


	</script>