lsei · October 13, 2017 17:32
diff --git a/.block b/.block
 height: 1000
 license: none
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>The Doors Team</title>
 		<script src="https://unpkg.com/[email protected]/babel.min.js" charset="utf-8"></script>
 		<script src="https://d3js.org/d3.v4.min.js"></script>
 		<style>
 			body {
 				font-family: sans-serif;
 				background-color: #000;
 			}
 			text {
 				font-size: 12px;
 				fill: #fff;
 			}
 			.title text{
 				font-size: 30px;
 				font-weight: bold;
 				text-anchor: middle;
 			}
 		</style>
 	</head>
 	<body>
 		<script type="text/babel">
        
 var width = 1000,
 	height = 1000,
 	outerRadius = 300,
 	innerRadius = 298,
 	sort = 'count';

 var arc = d3.arc()
 	.innerRadius(innerRadius)
 	.outerRadius(outerRadius)
 	.padAngle(.015);

 var labelArc = d3.arc()
 	.innerRadius(innerRadius + 19)
 	.outerRadius(outerRadius + 20)
 	.padAngle(.005);

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

 var circle = svg.append('g')
 	.attr('class', 'circle')
 	.attr('transform', 'translate(' + width/2 + ',' + height/2 +')')

 var title = svg.append('g')
 	.attr('class', 'title')
 	.attr('transform', 'translate(' + width/2 + ',' + height/2 +')')
 	.append('text')
 	.text('The Doors Collaborators')
 	.attr('width', width + 'px')
 	.attr('text-align', 'center')

 var arcifyData = d3.pie()
 	.value(d => d.count)

 var colors = {
 	Music: '#82202f',
 	Production: '#008733',
 	Visuals: '#f4c242',
 	Management: '#0800f2'
 }

 d3.csv("data.csv", (error, data) => {
 	if(error) throw error;
 	
 	data = data.filter(d => d.count > 120)
 	var arcData = arcifyData(data)
 	var sortedArcData = arcifyData.sort((a, b) => {
 		var categroyCompare = a.category.localeCompare(b.category);
 		if(categroyCompare != 0) return categroyCompare;
 		return b.count - a.count;
 	})(data)

 	circle.selectAll('.segment')
 		.data(arcData)
 		.enter()
 		.append('path')
 		.attr('class', 'segment')
 		.attr('d', arc)
 		// .attr('fill','#fff')
 		.attr('fill', d => colors[d.data.category])

 	circle.selectAll('.label')
 		.data(arcData)
 		.enter()
 		.append('text')
 		.attr('class', 'label')
 		.attr('transform', d => {
 			var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2  + d.endAngle/2 + Math.PI ;
 			return "translate(" + labelArc.centroid(d)[0] + "," + labelArc.centroid(d)[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")"; 
 		})
       	.attr('text-anchor', d => {
       		var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2  + d.endAngle/2 + Math.PI ;
       		return midAngle < Math.PI ? 'start' : 'end';
       	})
 		.text(d => d.data.name)

 		d3.select('.title').on('click', updateChart);

 		function updateChart() {
 			
 			if(sort=='count') {
 				var newData = sortedArcData;
 				sort = 'categories';
 			} else {
 				var newData = arcData;
 				sort = 'count';
 			}

 			var transition = circle.transition()
 				.duration(1500);

 			transition.selectAll('.segment')
 				.attr('d', (d, i) => arc(newData[i]))
 				// .attr('fill', (d, i) => colors[newData[i].data.category]);

 			transition.selectAll('.label')
 				.attr('transform', (d, i) => {
 					var midAngle = newData[i].endAngle < Math.PI ? newData[i].startAngle/2 + newData[i].endAngle/2 : newData[i].startAngle/2  + newData[i].endAngle/2 + Math.PI ;
 					return "translate(" + labelArc.centroid(newData[i])[0] + "," + labelArc.centroid(newData[i])[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")"; 
 				})
 				.attr('text-anchor', (d, i) => {
 					var midAngle = newData[i].endAngle < Math.PI ? newData[i].startAngle/2 + newData[i].endAngle/2 : newData[i].startAngle/2  + newData[i].endAngle/2 + Math.PI ;
 					return midAngle < Math.PI ? 'start' : 'end';
 				})
 		}

 });


    </script>
 	</body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
name	count	category
Ray Manzarek	3663	Music
Bruce Botnick	2862	Production
Robby Krieger	2212	Music
Paul A. Rothchild	2155	Production
Jim Morrison	2128	Music
John Densmore	2039	Music
William S. Harvey	1182	Visuals
Joel Brodsky	699	Visuals
Jac Holzman	660	Production
Doug Lubahn	512	Music
Robert L. Heimall	377	Visuals
Jerry Scheff	330	Music
Guy Webster	326	Visuals
Paul Ferrara (2)	281	Visuals
Carl Cossick	261	Visuals
Henry Diltz	259	Visuals
Frank Lisciandro	259	Visuals
Marc Benno	248	Music
Wendell Hamick	217	Visuals
Curtis Amy	216	Music
Harvey Brooks	191	Music
Reinol Andino	179	Music
Ray Neopolitan	172	Music
John Haeny	170	Production
George Bohanon	158	Music
Champ Webb	157	Music
Gary Burden	148	Visuals
Paul Harris (2)	142	Production
Jesse McReynolds	133	Music
Jimmy Buchanan	132	Music
Lonnie Mack	128	Music
Bernie Grundman	128	Production
Jeffrey Jampol	127	Management
Ron Coro	125	Visuals
Danny Sugerman	125	Production
Ed Caraeff	120	Visuals
Ray Hagerty	118	Production
Edmund Teske	117	Visuals
Paul Black	96	Production
Henry Lewy	95	Production
Emil Richards	92	Music
Peter Schaumann	80	Visuals
Bill Gazecki	74	Production
Bill Siddons	65	Management
G. F. Pfanz	63	Production
Fritz Richmond	63	Production
Jimmy Hole	61	Visuals
John Sebastian	61	Music
Hugh Brown (3)	57	Visuals
John Van Hamersveld	54	Visuals
Art Kane	54	Visuals
Johnny Lee (4)	53	Visuals
Rick Hart	51	Production
Kenny Nemes	50	Management
David Sygall	50	Visuals
Fedco Audio Labs	50	Production
	<!DOCTYPE html>
	<html>
	<head>
	<title>The Doors Team</title>
	<script src="https://unpkg.com/[email protected]/babel.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	font-family: sans-serif;
	background-color: #000;
	}
	text {
	font-size: 12px;
	fill: #fff;
	}
	.title text{
	font-size: 30px;
	font-weight: bold;
	text-anchor: middle;
	}
	</style>
	</head>
	<body>
	<script type="text/babel">

	var width = 1000,
	height = 1000,
	outerRadius = 300,
	innerRadius = 298,
	sort = 'count';

	var arc = d3.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius)
	.padAngle(.015);

	var labelArc = d3.arc()
	.innerRadius(innerRadius + 19)
	.outerRadius(outerRadius + 20)
	.padAngle(.005);

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

	var circle = svg.append('g')
	.attr('class', 'circle')
	.attr('transform', 'translate(' + width/2 + ',' + height/2 +')')

	var title = svg.append('g')
	.attr('class', 'title')
	.attr('transform', 'translate(' + width/2 + ',' + height/2 +')')
	.append('text')
	.text('The Doors Collaborators')
	.attr('width', width + 'px')
	.attr('text-align', 'center')

	var arcifyData = d3.pie()
	.value(d => d.count)

	var colors = {
	Music: '#82202f',
	Production: '#008733',
	Visuals: '#f4c242',
	Management: '#0800f2'
	}

	d3.csv("data.csv", (error, data) => {
	if(error) throw error;

	data = data.filter(d => d.count > 120)
	var arcData = arcifyData(data)
	var sortedArcData = arcifyData.sort((a, b) => {
	var categroyCompare = a.category.localeCompare(b.category);
	if(categroyCompare != 0) return categroyCompare;
	return b.count - a.count;
	})(data)

	circle.selectAll('.segment')
	.data(arcData)
	.enter()
	.append('path')
	.attr('class', 'segment')
	.attr('d', arc)
	// .attr('fill','#fff')
	.attr('fill', d => colors[d.data.category])

	circle.selectAll('.label')
	.data(arcData)
	.enter()
	.append('text')
	.attr('class', 'label')
	.attr('transform', d => {
	var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2 + d.endAngle/2 + Math.PI ;
	return "translate(" + labelArc.centroid(d)[0] + "," + labelArc.centroid(d)[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")";
	})
	.attr('text-anchor', d => {
	var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2 + d.endAngle/2 + Math.PI ;
	return midAngle < Math.PI ? 'start' : 'end';
	})
	.text(d => d.data.name)

	d3.select('.title').on('click', updateChart);

	function updateChart() {

	if(sort=='count') {
	var newData = sortedArcData;
	sort = 'categories';
	} else {
	var newData = arcData;
	sort = 'count';
	}

	var transition = circle.transition()
	.duration(1500);

	transition.selectAll('.segment')
	.attr('d', (d, i) => arc(newData[i]))
	// .attr('fill', (d, i) => colors[newData[i].data.category]);

	transition.selectAll('.label')
	.attr('transform', (d, i) => {
	var midAngle = newData[i].endAngle < Math.PI ? newData[i].startAngle/2 + newData[i].endAngle/2 : newData[i].startAngle/2 + newData[i].endAngle/2 + Math.PI ;
	return "translate(" + labelArc.centroid(newData[i])[0] + "," + labelArc.centroid(newData[i])[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")";
	})
	.attr('text-anchor', (d, i) => {
	var midAngle = newData[i].endAngle < Math.PI ? newData[i].startAngle/2 + newData[i].endAngle/2 : newData[i].startAngle/2 + newData[i].endAngle/2 + Math.PI ;
	return midAngle < Math.PI ? 'start' : 'end';
	})
	}

	});


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