Skip to content

Instantly share code, notes, and snippets.

@lsei

lsei/.block

Last active October 14, 2017 18:12
Show Gist options
  • Save lsei/6519a4d2cddb2ee056c05605a2240db0 to your computer and use it in GitHub Desktop.
Save lsei/6519a4d2cddb2ee056c05605a2240db0 to your computer and use it in GitHub Desktop.
Download ZIP
Doors Collaborators v2
Raw
.block
height: 1000
license: none
Raw
data2.csv
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
Raw
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;
}
.labels,
.info {
color: #fff;
position: absolute;
top: 530px;
left: 500px;
transform: translateX(-50%);
}
.info {
top: 425px;
width: 320px;
text-align: center;
line-height: 1.5;
}
.labels .circle {
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 100%;
background-color: #fff;
display: inline-block;
transform: translateY(-1px);
}
.labels .label {
margin-bottom: 5px;
}
.music .circle {
background-color: #82202f;
}
.production .circle {
background-color: #008733;
}
.visuals .circle {
background-color: #f4c242;
}
.management .circle {
background-color: #0800f2;
}
.toggle-order {
color: #fff;
position: absolute;
top: 675px;
left: 500px;
transform: translateX(-50%);
padding: 12px 15px;
text-align: center;
border: 1px solid #fff;
cursor: pointer;
opacity: .65;
transition: opacity .5s;
}
.toggle-order:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="info">
The top 35 people who worked on releases by The Doors according to number of discogs credits.
</div>
<div class="labels">
<div class="label music">
<div class="circle"></div> Music
</div>
<div class="label production">
<div class="circle"></div> Production
</div>
<div class="label visuals">
<div class="circle"></div> Visuals
</div>
<div class="label management">
<div class="circle"></div> Management
</div>
</div>
<div class="toggle-order">
Click to re-order
</div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
Raw
script.js
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 segments = circle.append('g')
.attr('class', 'segments');
var labels = svg.append('g')
.attr('class', 'labels');
var title = svg.append('g')
.attr('class', 'title')
.attr('transform', 'translate(' + width/2 + ',' + (height/2 - 100) +')')
.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'
}
function renderChart(data) {
var arcData = data;
segments.selectAll('.segment')
.data(arcData)
.enter()
.append('path')
.attr('class', 'segment')
.attr('d', arc)
// .attr('fill','#fff')
.attr('fill', d => colors[d.data.category])
var label = labels.selectAll('.label')
.data(arcData)
.enter()
.append('g')
.attr('class', 'label')
.attr('transform', d => {
var angle = (d.endAngle - d.startAngle)/2 + d.startAngle;
return "rotate(" + (angle * 180/Math.PI) + ", 500, 500)";
});
label.append('line')
.attr('x', 0)
.attr('y', 0)
.attr('x2', width)
.attr('y2', height)
label.append('text')
.attr('transform', d => {
var x = width/2;
var y = height/2 - outerRadius - 20 ;
var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2 + d.endAngle/2 + Math.PI ;
return 'translate(' + x + ',' + y + ') rotate(' + (midAngle < Math.PI ? '-90' : '90') +')';
})
.attr('text-anchor', d => {
// return 'start';
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.csv("data2.csv", (error, data) => {
if(error) throw error;
data = data.filter(d => d.count > 120)
var arcData = arcifyData(data)
var data2 = data.sort((a, b) => {
var categroyCompare = a.category.localeCompare(b.category);
if(categroyCompare != 0) return categroyCompare;
return b.count - a.count;
});
var sortedArcData = arcifyData.sort(null)(data2)
renderChart(arcData);
d3.select('.toggle-order').on('click', handleResort);
function handleResort(data) {
if(sort=='count') {
var newData = sortedArcData;
sort = 'categories';
} else {
var newData = arcData;
sort = 'count';
}
updateChart(newData);
}
});
function arcTween(newD) {
return function(d) {
var interpolate = d3.interpolate(d.endAngle, newD.newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
};
};
}
function updateChart(newData) {
var updated = false;
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]);
labels.transition()
.duration(1500)
.selectAll('.label')
.attrTween('transform', (d, i) => {
var angle = (d.endAngle - d.startAngle)/2 + d.startAngle;
var newAngle = (newData[i].endAngle - newData[i].startAngle)/2 + newData[i].startAngle;
var interpolate = d3.interpolate(angle, newAngle);
return function(t) {
var currentAngle = interpolate(t);
return "rotate(" + (currentAngle * 180/Math.PI) + ", 500, 500)";
}
})
.on('end', () => {
if(updated) return;
labels.selectAll('.label')
.data(newData);
updated = true;
});
labels.selectAll('.label text')
.text((d, i) => newData[i].data.name);
}
// var angle = (newData[i].endAngle - newData[i].startAngle)/2 + newData[i].startAngle;
// return "rotate(" + (angle * 180/Math.PI) + ", 500, 500)";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment