Skip to content

Instantly share code, notes, and snippets.

@benrudolph

benrudolph/data.tsv

Created January 14, 2016 21:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benrudolph/3231636c7c5dc4e66003 to your computer and use it in GitHub Desktop.
Save benrudolph/3231636c7c5dc4e66003 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.tsv
month author count
1 benrudolph 1
1 biyeun 1
1 czue 4
1 esoergel 3
1 millerdev 1
1 snopoke 4
2 benrudolph 1
2 czue 13
2 dannyroberts 1
2 millerdev 1
2 nickpell 1
2 snopoke 12
3 benrudolph 7
3 czue 28
3 dannyroberts 6
3 esoergel 7
3 millerdev 3
3 nickpell 1
3 NoahCarnahan 1
3 snopoke 31
4 benrudolph 14
4 biyeun 1
4 czue 31
4 dannyroberts 11
4 esoergel 5
4 kaapstorm 5
4 millerdev 1
4 nickpell 4
4 proteusvacuum 1
4 snopoke 7
5 benrudolph 18
5 czue 38
5 dannyroberts 7
5 esoergel 13
5 kaapstorm 3
5 nickpell 2
5 NoahCarnahan 1
5 snopoke 16
6 benrudolph 10
6 ctsims 1
6 czue 24
6 dannyroberts 6
6 esoergel 3
6 kaapstorm 4
6 millerdev 1
6 nickpell 4
6 proteusvacuum 3
6 snopoke 14
6 sravfeyn 1
7 benrudolph 15
7 biyeun 17
7 czue 50
7 dannyroberts 5
7 emord 3
7 esoergel 9
7 kaapstorm 2
7 millerdev 2
7 nickpell 14
7 proteusvacuum 3
7 snopoke 14
8 benrudolph 9
8 ctsims 1
8 czue 32
8 dannyroberts 11
8 emord 2
8 esoergel 3
8 kaapstorm 1
8 nickpell 18
8 orangejenny 2
8 proteusvacuum 11
8 snopoke 14
8 sravfeyn 1
8 wpride 1
9 benrudolph 7
9 biyeun 1
9 czue 24
9 dannyroberts 18
9 emord 1
9 esoergel 2
9 gcapalbo 1
9 kaapstorm 1
9 nickpell 20
9 orangejenny 2
9 proteusvacuum 5
9 snopoke 11
9 sravfeyn 3
9 wpride 1
10 benrudolph 44
10 biyeun 8
10 calellowitz 2
10 czue 104
10 dannyroberts 15
10 esoergel 8
10 kaapstorm 6
10 millerdev 4
10 nickpell 12
10 NoahCarnahan 2
10 proteusvacuum 14
10 snopoke 22
10 wpride 1
11 benrudolph 65
11 biyeun 25
11 czue 103
11 dannyroberts 17
11 emord 4
11 esoergel 3
11 gcapalbo 1
11 kaapstorm 5
11 nickpell 14
11 orangejenny 1
11 proteusvacuum 16
11 snopoke 38
12 benrudolph 64
12 biyeun 3
12 calellowitz 2
12 czue 121
12 dannyroberts 35
12 emord 2
12 esoergel 12
12 kaapstorm 2
12 millerdev 2
12 nickpell 18
12 proteusvacuum 14
12 snopoke 33
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
width: 680px;
}
h1 {
margin-bottom: 30px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.sparkline {
fill: none;
stroke: #000;
stroke-width: 0.7px;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<h1 style="text-align:center">Emoji Sparklines by Author (Sorted by count)</h1>
<figure id='benrudolph'></figure>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 25, right: 10, bottom: 30, left: 10},
width = 150 - margin.left - margin.right,
height = 80 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, .4);
var y = d3.scale.linear().range([height, 0]);
var parseDate = d3.time.format("%b %d, %Y").parse;
var line = d3.svg.line()
.x(function(d) { return x(d.month); })
.y(function(d) { return y(d.count); })
.interpolate("monotone");
function sparkline(data, author) {
data.forEach(function(d) {
d.count = +d.count;
});
x.domain(_.map(new Array(12), function(d, i) { return '' + (i + 1) }));
y.domain(d3.extent(data, function(d) { return d.count; }));
var svg = d3.select('figure')
.append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
svg.append('text')
.attr("y", 8)
.text(author);
svg
.append('g')
.attr('transform', 'translate(0,' + margin.top + ')')
.append('path')
.datum(data)
.attr('class', 'sparkline')
.attr('d', line);
}
d3.tsv('data.tsv', function(error, data) {
grouped = _.groupBy(data, 'author');
groupedArray = _.map(grouped, function(d, author) { return [d, author] })
groupedArray = groupedArray.sort(function(a, b) {
var aSum = _.sum(_.map(a[0], function(data) { return +data.count }));
var bSum = _.sum(_.map(b[0], function(data) { return +data.count }));
return bSum - aSum;
})
_.each(groupedArray, function(value) {
sparkline(value[0], value[1]);
});
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment