-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
195 lines (185 loc) · 10.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!-- Copyright 2019 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="Exploring the Bach Doodle dataset">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet">
<title>Bach Doodle Dataset</title>
<style>
body {
text-align: left;
}
.image-wrapper {
flex-wrap: wrap;
margin-bottom: 24px;
align-items: flex-end;
}
a.inline {
display: block;
position: relative;
flex: 1;
font-size: 14px;
color: black;
text-align: center;
margin: 14px;
max-width: 100%;
}
a.inline span.accent {
color: black;
border-bottom: 4px dashed var(--secondary);
background:white;
font-weight: bold;
margin: 0;
padding: 0;
}
a.inline img {
transition: transform 0.2s linear;
max-width: 100%;
margin-bottom: 14px;
cursor:pointer;
}
a.inline:hover img {
transform: scale(1.1);
}
a.inline:hover span {
border-bottom-style: solid;
}
@media screen and (max-width: 500px) {
a.inline {
flex: auto;
}
}
</style>
</head>
<body>
<header>
<div class="horizontal">
<button class="menu-btn" aria-label="nav drawer button" onclick="document.body.classList.toggle('drawer-opened')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
</button>
<a href="index.html">Bach Doodle Dataset</a>
</div>
<div class="menu">
<div class="hide-from-toolbar">
<a href="overall.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 7.13l.97 2.29.47 1.11 1.2.1 2.47.21-1.88 1.63-.91.79.27 1.18.56 2.41-2.12-1.28-1.03-.64-1.03.62-2.12 1.28.56-2.41.27-1.18-.91-.79-1.88-1.63 2.47-.21 1.2-.1.47-1.11.97-2.27M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/></svg>
Top overall melodies
</a>
<a href="world.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>
Compositions around the world
</a>
<a href="unique.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
Most unique regional compositions
</a>
<a href="dataset.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V6h16v12zM6 10h2v2H6zm0 4h8v2H6zm10 0h2v2h-2zm-6-4h8v2h-8z"/></svg>
Random dataset samples
</a>
</div>
<a href="https://magenta.tensorflow.org/datasets/bach-doodle" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
Get the data
</a>
<a href="https://www.google.com/doodles/celebrating-johann-sebastian-bach" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/></svg>
Play the game
</a>
<a target="_blank" href="https://twitter.com/intent/tweet?hashtags=madewithmagenta&text=What%20do%2024%20million%20melodies%20composed%20with%20the%20Bach%20Doodle%20look%20like%3F%20https%3A%2F%2Fmagenta.github.io%2Fbach-doodle-visualization">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
Share
</a>
</div>
</div>
</header>
<section>
<h1>Exploring the <span class="accent primary">Bach Doodle</span></h1>
<p>
Over 8 million players have contributed 21.6 million harmonizations after playing with the Bach Google Doodle.
These harmonizations are a unique dataset that can show insights on how
people around the world composed melodies, help developers train new
Machine Learning algorithms, or artists create musical experiences.
That’s why we’re open-sourcing the <a class="accent" href="https://magenta.tensorflow.org/datasets/bach-doodle">dataset</a>.
</p>
</section>
<section>
<h2>A burst of compositions</h2>
<p>
Not every melody entered was unique! A lot of you entered your favourite pop songs,
or other Bach pieces you wanted to see how the model would harmonize with. These
repeated sequences surfaced through the top, and you can visualize them here.
We've also split them across which country they came from, to see
how compositions changed around the world!
</p>
<p>Try exploring some of the interactive visualizations:</p>
<div class="horizontal image-wrapper">
<a class="inline" href="overall.html">
<label>
<img src="images/overall.png" alt="a sunburst graph of all melodies, highlighting Ode to Joy, which was harmonized 1358 times.">
<span class="accent">Top overall repeated melodies</span>
</label>
</a>
<a class="inline" href="world.html">
<label>
<img src="images/world.png" alt="a set of of small sunburst graphs, each representing a country, with the bigges one, US, highlighted.">
<span class="accent">Top repeated melodies per country</span>
</label>
</a>
<a class="inline" href="unique.html">
<label>
<img src="images/regional-hits.png" alt="a treemap chart of different squares, each bigger square being labelled with a country name.">
<span class="accent">Unique regional hits</span>
</label>
</a>
</div>
<details>
<summary class="small">The technical details on how we clustered the data</summary>
<p>We noticed early on that although people entered the same melody (like "Ode to Joy"),
they sometimes did this in a different key, or with different note lengths.
To get around this, we aggregated the top 2000 melodies based on the "shape"
of each composition (the number of semitones between consecutive notes),
rather than the absolute pitches in it, so that all "Ode to Joy"s that
have the same shape were considered identical.</p>
<p>
As a result, you will notice that all
the melodies in the visualizations start on a C, even though the original
melodies almost certainly didn't. This is purely to simplify the visualizations,
and allow us to also explore the internal structure of melodies (like starting
notes, common melody prefixes, etc). Unfortunately, this means that
some of the in-app harmonizations sound worse than they did originally
in the doodle, since shifting everything to a middle C might result in
some notes in the melody being out of the range of those allowed in the
doodle input.
</p>
</details>
</section>
<section>
<h2>What's in the actual dataset?</h2>
<p>
Of the more than 50 million requests to the doodle itself, the user contributed dataset contains
over 21.6 million miniature compositions adding up to about 6 hours of audio.
The compositions are split across 8.5 million sessions; each session represents
an anonymous user's interaction with the web app and may contain multiple data points,
one for each time the user pressed the "Harmonize" button. Explore
<a class="accent" href="dataset.html">20 random sessions</a> to see
what the actual data looks like.
</p>
</section>
</body>
</html>