Skip to content

Instantly share code, notes, and snippets.

@benrudolph

benrudolph/README.md

Created January 15, 2016 03:18
Show Gist options
  • Save benrudolph/3ef42d2ea048be1d63c1 to your computer and use it in GitHub Desktop.
Save benrudolph/3ef42d2ea048be1d63c1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.tsv
emoji count
tada 100
boom 54
heart_eyes 42
balloon 41
skull 23
new 23
crying_cat_face 23
heart 23
fireworks 22
hammer 22
goberserk 21
clap 20
smile 20
disappointed 17
fire 17
rage1 13
construction 12
shipit 12
eyes 11
racehorse 11
star 10
x 10
raised_hands 9
confetti_ball 9
star2 9
blowfish 8
joy 8
boot 8
walking 8
bomb 8
smiling_imp 8
smiley 8
100 8
cry 7
birthday 7
dancer 7
stuck_out_tongue 6
trollface 6
sunglasses 6
cake 6
smile_cat 6
heavy_check_mark 6
trophy 5
hankey 5
bear 5
airplane 5
cookie 5
muscle 5
heavy_plus_sign 5
runner 5
heavy_minus_sign 5
bow 4
bus 4
link 4
grinning 4
boat 4
haircut 4
sob 4
candy 4
mag 4
clock1 4
pray 4
wave 4
see_no_evil 4
banana 4
snail 4
imp 4
stuck_out_tongue_winking_eye 4
earth_africa 4
zap 4
christmas_tree 3
fearful 3
facepunch 3
rocket 3
bee 3
earth_asia 3
joy_cat 3
scream_cat 3
leopard 3
gun 3
thumbsup 3
cloud 3
flushed 3
earth_americas 3
grin 3
neutral_face 3
us 2
beers 2
rabbit 2
green_heart 2
speedboat 2
checkered_flag 2
eyeglasses 2
dancers 2
factory 2
heart_decoration 2
floppy_disk 2
heart_eyes_cat 2
sunny 2
horse_racing 2
poo 2
dog2 2
princess 2
laughing 2
blush 2
lock 2
scream 2
man 2
snowflake 2
nose 2
sparkles 2
ok_hand 2
boy 2
open_mouth 2
telescope 2
page_facing_up 2
briefcase 2
pig_nose 2
yellow_heart 2
bouquet 1
tongue 1
fr 1
lips 1
woman::cloud 1
hamburger 1
sparkling_heart 1
love_letter 1
tanabata_tree 1
cat 1
8ball 1
bird 1
arrow_right 1
mans_shoe 1
http://kinzaa.com/omiltoro\nGithub 1
metal 1
godmode 1
MM 1
sweat_smile 1
moneybag 1
three 1
monkey_face 1
gem 1
email 1
white_chech_mark 1
neckbeard 1
ship 1
es 1
astonished 1
expressionless 1
cow2 1
no_good 1
dog 1
hand 1
squirrel 1
car 1
stuck_out_tongue_closed_eyes 1
older_man 1
surfer 1
hash 1
bread 1
padding 1
zzz 1
hawk 1
ticket 1
panda_face 1
train 1
party 1
two_hearts 1
person_frowning 1
ghost 1
phone 1
wink 1
pig 1
shaved_ice 1
golf 1
book 1
beetle 1
sleeping 1
poodle 1
fire_engine 1
potable_water 1
smiley_cat 1
black_circle 1
fish_cake 1
cat2 1
snowman 1
purple_heart 1
innocent 1
dart 1
it 1
athletic_shoe 1
bowtie 1
rage 1
baby_bottle 1
computer 1
football 1
rage4 1
dragon_face 1
bullettrain_side 1
suspect 1
gift 1
sweet_potato 1
raises 1
tada::balloon::fireworks 1
ram 1
tea 1
relieved 1
thought_balloon 1
revolving_hearts 1
full_moon 1
rice 1
tired_face 1
ring 1
tophat 1
b 1
full_moon_with_face 1
roller_coaster 1
truck 1
dizzy_face 1
unamused 1
santa 1
card_index 1
scissors 1
whale 1
hocho 1
broken_heart 1
confounded 1
woman 1
scroll 1
closed_lock_with_key 1
confused 1
rainbow 1
app_manager 1
blue_heart 1
large_blue_circle 1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
width: 680px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: orange;
}
.bar:hover {
fill: orangered ;
}
.x.axis path {
display: none;
}
.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 Counts</h1>
<figure></figure>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
var margin = {top: 40, right: 20, bottom: 60, left: 40},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var formatNumber = d3.format(".0d");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, .4);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatNumber);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Emoji Count:</strong> <span style='color:red'>" + d.count + "</span><br />" +
"<strong>Emoji:</strong> <span style='color:red'>" + d.emoji + "</span><br />";
})
var svg = d3.select("figure").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.call(tip);
d3.tsv("data.tsv", type, function(error, data) {
data = data.sort(function(a, b) {
return b.count - a.count
});
data = data.filter(function(d) {
return d.count > 6
});
x.domain(data.map(function(d) { return d.emoji; }));
y.domain([0, d3.max(data, function(d) { return d.count; })]);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Emoji Count");
svg.selectAll('.image')
.data(data)
.enter().append('image')
.attr('xlink:href', function(d) {
return 'https://raw.githubusercontent.com/HenrikJoreteg/emoji-images/master/pngs/' + d.emoji + '.png';
})
.attr('height', '14px')
.attr('width', '14px')
.attr('x', function(d) { return x(d.emoji) })
.attr('y', function(d) { return y(d.count) - 15 })
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return x(d.emoji); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.count); })
.attr("height", function(d) { return height - y(d.count); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
});
function type(d) {
d.count = +d.count;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment