Skip to content

Instantly share code, notes, and snippets.

@yanhann10

yanhann10/.block

Last active April 4, 2018 00:20
Show Gist options
  • Save yanhann10/d235ce4dae679dee1a3edb057ef38128 to your computer and use it in GitHub Desktop.
Save yanhann10/d235ce4dae679dee1a3edb057ef38128 to your computer and use it in GitHub Desktop.
Download ZIP
bubbles
Raw
.block
license: mit
Raw
index.html
<html>
<head>
<form>
</form>
<style>
div.tooltip {
opacity: 0;
background-color: rgba(0, 0, 0, 0.9);
color: #fafafa;
padding: 5px;
border-radius: 4px;
transition: opacity 0.2s ease;
max-width: 300px;
text-align: left;
font-family: "Futura", "Helvetica",sans-serif;
font-size: 12px;
}
label {color: #fff;}
body {
margin: 0;
font-family: "Futura", "Helvetica", sans-serif;
}
text {
text-anchor: middle;
fill: #fff;
}
</style>
</head>
<body style="background-color: #303030;">
<label>
<input type="radio" name='market' value="Hello" checked/>Hello
<input type="radio" name='market' value="Havana"/>Havana
<input type="radio" name='market' value="Shape of you"/>Shape of you
</label>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/jeezy@1.11.2/lib/jeezy.min.js"></script>
<script>
var width = window.innerWidth,
height = window.innerHeight;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var pack = d3.pack()
.size([width, height])
.padding(5);
//tooltip
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var z = d3.scaleSequential(d3.interpolatePlasma);
//need to replace this
d3.csv("output.csv", function(error, data) {
if (error) throw error;
// Coerce the CSV data to the appropriate types.
data.forEach(function(d) {
d.size = +d.size;
d.first_occur = +d.first_occur;
});
//z.domain([d3.max(data, d=>d.size), -20]);
z.domain([220, -20]); //using only a range on the palette
//radio button
d3.selectAll(("input[name='market']")).on("change", function() {
var data_new = data.filter(d => (d.song == this.value));
redraw(data_new);
});
redraw(data.filter(d=>d.song=="Hello"));
d3.selectAll("input")
.on("change", selectDataset);
function selectDataset()
{
var value = this.value;
if (value == 'Hello')
{
redraw(data.filter(d=>d.song=="Hello"));
}
else if (value == "Havana")
{
redraw(data.filter(d=>d.song=="Havana"));
}
else if (value == "Shape of you")
{
redraw(data.filter(d=>d.song=="Shape of you"));
}
}
//redraw(data);
function redraw(classes){
// transition
var t = d3.transition()
.duration(750);
// hierarchy
var h = d3.hierarchy({children: classes})
.sum(function(d) { return d.size; })
//JOIN
var circle = svg.selectAll("circle")
.data(pack(h).leaves(), d=>d.data.name);
var text = svg.selectAll("text")
.data(pack(h).leaves(), d=>d.data.name);
//EXIT
circle.exit()
.style("fill", "#b26745")
.transition(t)
.attr("r", 1e-6)
.remove();
text.exit()
.transition(t)
.attr("opacity", 1e-6)
.remove();
//UPDATE
circle
.transition(t)
.style("fill", d=>z(d.data.first_occur))
.attr("r", function(d){ return d.r })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
text
.transition(t)
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
//ENTER
circle.enter().append("circle")
.attr("r", 1e-6)
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
.style("fill", d=>z(d.data.first_occur))
//.style("stroke",d=>d.data.phrase=='1'?"black":"white")
.transition(t)
.style("fill",
d=>z(d.data.first_occur))
.attr("r", function(d){ return d.r });
text.enter().append("text")
.attr("opacity", 1e-6)
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.text(function(d){ return d.data.name; })
.attr("font-size",'10px')
// .transition(t)
.attr("opacity", 1)
.on("mousemove", function(d){
tooltip
.style('position', 'absolute')
.style('left', `${d3.event.pageX }px`)
.style('top', `${d3.event.pageY + 20}px`)
.style('display', 'inline-block')
.style('opacity', '0.9')
.html("Word/Phrase: "+(d.data.name)+
"<br> Number of repetition: " + (d.data.size)+
"<br> First occurred at: " + (d.data.first_occur));
})
.on("mouseout", function(d){tooltip.style("display", "none");});
}
})
</script>
</body>
</html>
Raw
output.csv
name size phrase first_occur song
a 6 0 24 Havana
a 4 0 69 Hello
a 8 0 9 Shape of you
about 4 0 43 Hello
about 1 0 195 Shape of you
after 2 0 8 Hello
ain't 2 0 30 Hello
all 2 0 9 Hello
all 1 0 175 Shape of you
although my heart is falling too 3 1 126 Shape of you
and 4 0 39 Havana
and 4 0 53 Hello
and 23 0 19 Shape of you
anymore 14 0 97 Hello
apart 6 0 96 Hello
are 4 0 100 Hello
are 1 0 171 Shape of you
at 2 0 64 Hello
at 1 0 22 Shape of you
at least i can say that i've tried 6 1 85 Hello
atlanta 2 0 100 Havana
back 1 0 128 Havana
backseat 1 0 218 Shape of you
bacon 1 0 151 Havana
bag 1 0 182 Shape of you
bar 1 0 13 Shape of you
be 1 0 167 Havana
be 2 0 48 Hello
be 2 0 93 Shape of you
be my baby 14 1 308 Shape of you
bedsheets 3 0 139 Shape of you
before 2 0 60 Hello
begin 1 0 160 Shape of you
best 1 0 5 Shape of you
between 2 0 71 Hello
blank 1 0 163 Havana
body 2 0 112 Shape of you
both 2 0 136 Hello
bout 2 0 8 Havana
boy 2 0 99 Shape of you
bump 1 0 109 Havana
bumper 1 0 112 Havana
but 8 0 28 Hello
but when i call you never seem to be home 6 1 80 Hello
cakin 1 0 146 Havana
california 2 0 41 Hello
campus 1 0 95 Havana
can 2 0 29 Havana
can 2 0 35 Hello
can 1 0 177 Shape of you
chance 1 0 51 Shape of you
clearly 6 0 92 Hello
close 1 0 164 Havana
club 1 0 2 Shape of you
come 1 0 34 Shape of you
come on now 6 1 90 Shape of you
conversation 1 0 40 Shape of you
cost 1 0 170 Havana
cravin 1 0 133 Havana
crazy 2 0 94 Shape of you
damn 1 0 104 Havana
dance 1 0 69 Shape of you
date 1 0 167 Shape of you
did 2 0 118 Hello
didn't 2 0 13 Havana
difference 2 0 70 Hello
diggin 1 0 138 Havana
do 2 0 30 Havana
do 3 0 125 Shape of you
doesn't 6 0 93 Hello
doin 2 0 20 Havana
doing 2 0 25 Shape of you
don't 6 0 89 Hello
don't 2 0 95 Shape of you
done 2 0 31 Hello
dreaming 2 0 42 Hello
drinking 1 0 27 Shape of you
driver 1 0 221 Shape of you
east 2 0 99 Havana
eat 1 0 178 Shape of you
ever 4 0 120 Hello
every day discovering something brand new 6 1 143 Shape of you
everything 2 0 19 Hello
family 1 0 204 Shape of you
fast 1 0 28 Shape of you
feel 1 0 181 Havana
feelin 4 0 50 Havana
feet 2 0 66 Hello
fell 2 0 63 Hello
felt 2 0 59 Hello
fill 2 0 179 Shape of you
find 1 0 8 Shape of you
first 1 0 166 Shape of you
for 3 0 86 Shape of you
forever 2 0 35 Havana
forgotten 2 0 56 Hello
free 2 0 54 Hello
fresh 3 0 93 Havana
friends 1 0 21 Shape of you
from 6 0 82 Hello
get 1 0 136 Havana
get 1 0 210 Shape of you
gettin 1 0 177 Havana
girl 1 0 124 Havana
girl 2 0 75 Shape of you
girls 2 0 27 Havana
give 1 0 48 Shape of you
go 2 0 17 Hello
go 2 0 17 Shape of you
going 1 0 162 Shape of you
got 7 0 43 Havana
grab 2 0 105 Shape of you
graduated 1 0 92 Havana
had 2 0 79 Havana
hand 1 0 55 Shape of you
handmade 2 0 85 Shape of you
happened 2 0 130 Hello
he 8 0 12 Havana
heal 2 0 26 Hello
healing 2 0 33 Hello
hear 2 0 37 Hello
hello 13 0 1 Hello
hello from the other side 6 1 77 Hello
her 1 0 111 Havana
hey 3 0 1 Havana
him 12 0 34 Havana
his 2 0 9 Havana
history 1 0 156 Havana
hope 2 0 114 Hello
hours 2 0 192 Shape of you
how 2 0 18 Havana
how 4 0 57 Hello
how 1 0 202 Shape of you
huh 1 0 211 Havana
i 16 0 28 Havana
i 6 0 4 Hello
i 6 0 16 Shape of you
i must have called a thousand times 6 1 78 Hello
i'll 1 0 47 Shape of you
i'm 4 0 39 Hello
i'm 2 0 72 Shape of you
i'm in love with the shape of you 6 1 117 Shape of you
i'm in love with your body 15 1 127 Shape of you
i'm sorry for breaking your heart 6 1 86 Hello
i'm sorry for everything that i've done 6 1 79 Hello
i've 2 0 55 Hello
if 1 0 168 Havana
if 2 0 7 Hello
in 5 0 36 Havana
in 2 0 40 Hello
in 6 0 133 Shape of you
is 1 0 155 Havana
is 2 0 14 Shape of you
isn't 1 0 3 Shape of you
it 4 0 57 Havana
it 16 0 58 Hello
it 1 0 49 Shape of you
it's 7 0 2 Hello
jam 1 0 116 Havana
jeffery 1 0 90 Havana
jukebox 1 0 63 Shape of you
just 1 0 91 Havana
just 1 0 42 Shape of you
kiss 1 0 215 Shape of you
knew 4 0 33 Havana
know 2 0 77 Shape of you
last 3 0 129 Shape of you
leave 1 0 208 Shape of you
left 2 0 67 Havana
let 1 0 157 Shape of you
let's 2 0 100 Shape of you
like 6 0 51 Havana
like 2 0 13 Hello
like 10 0 74 Shape of you
lot 2 0 25 Havana
love 4 0 81 Shape of you
loved 2 0 63 Havana
lover 1 0 10 Shape of you
magnet 3 0 124 Shape of you
make 2 0 121 Hello
make 1 0 222 Shape of you
makin 1 0 159 Havana
malo 2 0 44 Havana
man 1 0 179 Havana
man 1 0 60 Shape of you
manners 3 0 10 Havana
matter 6 0 90 Hello
may 2 0 92 Shape of you
me 13 0 49 Havana
me 7 0 3 Hello
me 10 0 18 Shape of you
meet 2 0 15 Hello
met 2 0 60 Havana
miles 2 0 76 Hello
million 1 0 172 Havana
million 2 0 75 Hello
mind 2 0 96 Shape of you
minute 2 0 38 Havana
mm 1 0 96 Havana
much 2 0 32 Hello
much 2 0 104 Shape of you
mula 1 0 178 Havana
my 10 0 20 Shape of you
my heart is in havana 13 1 3 Havana
myself 2 0 110 Hello
night 3 0 130 Shape of you
no 1 0 102 Havana
no 2 0 132 Hello
not 2 0 101 Shape of you
nothing 2 0 128 Hello
now 5 0 52 Shape of you
of 2 0 26 Havana
of 8 0 105 Hello
oh na-na-na 6 1 83 Havana
oh—i—oh—i—oh—i—oh—i 6 1 145 Shape of you
okay 1 0 207 Shape of you
on 9 0 94 Havana
on 6 0 61 Shape of you
one 1 0 153 Shape of you
ooh 18 0 52 Havana
ooh.na-na 15 1 2 Havana
ooooohh 6 0 165 Hello
our 2 0 65 Hello
our 1 0 165 Shape of you
out 2 0 98 Havana
out 4 0 123 Hello
out 1 0 163 Shape of you
outside 6 0 84 Hello
over 2 0 18 Hello
over 1 0 35 Shape of you
papa 2 0 40 Havana
pay 1 0 122 Havana
place 1 0 6 Shape of you
plate 1 0 188 Shape of you
play 1 0 225 Shape of you
point 1 0 162 Havana
pull 3 0 121 Shape of you
push 3 0 119 Shape of you
put 3 0 57 Shape of you
quick 1 0 120 Havana
radio 1 0 224 Shape of you
range 1 0 165 Havana
room 3 0 135 Shape of you
running 2 0 140 Hello
said 2 0 22 Havana
sam 1 0 127 Havana
say 2 0 21 Hello
say 2 0 98 Shape of you
says 2 0 41 Havana
secret 2 0 133 Hello
shawty 2 0 132 Havana
she 1 0 141 Havana
shots 1 0 26 Shape of you
singing 2 0 73 Shape of you
slow 1 0 33 Shape of you
smell 3 0 140 Shape of you
so 2 0 103 Hello
so 2 0 11 Shape of you
somebody 2 0 87 Shape of you
somethin 2 0 7 Havana
sorry 2 0 112 Hello
sour 1 0 200 Shape of you
start 2 0 37 Shape of you
stop 1 0 56 Shape of you
story 1 0 159 Shape of you
such 2 0 68 Hello
supposed 2 0 24 Hello
sweet 1 0 197 Shape of you
table 1 0 24 Shape of you
take 1 0 53 Shape of you
take me back 6 1 190 Havana
talk 2 0 108 Hello
talk 4 0 32 Shape of you
taxi 1 0 213 Shape of you
tear 6 0 94 Hello
tell 2 0 81 Havana
tell 1 0 219 Shape of you
that 4 0 17 Havana
that 8 0 22 Hello
that 2 0 111 Shape of you
that's 1 0 173 Havana
the 2 0 150 Havana
the 10 0 61 Hello
the 12 0 1 Shape of you
then 2 0 77 Havana
then 3 0 30 Shape of you
there's 4 0 6 Havana
there's 2 0 67 Hello
these 2 0 10 Hello
they 1 0 180 Havana
they 2 0 20 Hello
this 1 0 154 Havana
thrifty 1 0 172 Shape of you
time 2 0 143 Hello
time's 2 0 23 Hello
to 4 0 80 Havana
to 10 0 14 Hello
to 2 0 7 Shape of you
too 2 0 103 Shape of you
took me back to east atlanta 5 1 4 Havana
town 2 0 126 Hello
traffic 1 0 115 Havana
trust 1 0 45 Shape of you
typical 2 0 104 Hello
uh 1 0 210 Havana
uncle 1 0 126 Havana
up 2 0 15 Havana
up 3 0 38 Shape of you
us 4 0 72 Hello
used 2 0 46 Hello
van 1 0 58 Shape of you
waist 2 0 108 Shape of you
waited 1 0 142 Havana
walk 2 0 14 Havana
want 2 0 79 Shape of you
was 2 0 119 Havana
was 2 0 5 Hello
was 2 0 84 Shape of you
we 4 0 45 Hello
we 7 0 31 Shape of you
we're 1 0 161 Shape of you
week 1 0 154 Shape of you
well 2 0 117 Hello
were 2 0 51 Hello
were 3 0 132 Shape of you
when 4 0 58 Havana
when 2 0 49 Hello
where 2 0 127 Hello
where 1 0 15 Shape of you
who 2 0 44 Hello
with 5 0 16 Havana
with 1 0 41 Shape of you
wondering 2 0 6 Hello
world 2 0 62 Hello
ya 2 0 27 Hello
years 2 0 11 Hello
you 2 0 19 Havana
you 12 0 36 Hello
you 10 0 76 Shape of you
you'd 2 0 12 Hello
you're 2 0 116 Hello
younger 2 0 52 Hello
your 6 0 80 Shape of you
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment