-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (151 loc) · 8.85 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Interactive iTunes Analytics Made Beautiful" />
<meta name="twitter:creator" content="@TheConn_Man">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="iTunes Analysis">
<meta name="twitter:description" content="Interactive iTunes Analytics Made Beautiful">
<meta name="twitter:image" content="http://theconnman.com/iTunesAnalysis/images/iTunes-Analysis.png">
<meta property="og:title" content="iTunes Analysis">
<meta property="og:description" content="Interactive iTunes Analytics Made Beautiful">
<meta property="og:image" content="http://theconnman.com/iTunesAnalysis/images/iTunes-Analysis.png">
<link href="./css/theconnman.css" type="text/css" rel="stylesheet" />
<link href="./css/iTunes.css" type="text/css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css">
<title>iTunes Analysis</title>
</head>
<body>
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/d3.v3.min.js" charset="utf-8"></script>
<script src="./js/iTunes.js" charset="utf-8"></script>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48858955-1', 'theconnman.com');
ga('send', 'pageview');
</script>
<div>
<div id="content">
<h1>iTunes Analysis</h1>
<h2>Interactive iTunes Analytics Made Beautiful</h2>
<p>
A small project to help analyze your iTunes library, all online by uploading a single file. The default data is mine and I will most likely by embarrassed by some of the results.
Once your data is uploaded it will be stored in your browser so you don't have to reload it. Click <b>Default Data</b> to revert back to my data.
</p>
<input type="file" id="file">
<button onclick="upload()">Upload</button>
<button onclick="reset()">Default Data</button>
<p>
Upload your <b>iTunes Library.xml</b> file located in your iTunes music folder to begin analysis on your own library.
</p>
<h2>Motivation</h2>
<p>
I love analytics. Sometimes I search for data sets just so I can perform some analytics on them. I've been especially excited about
analytics since I was introduced to the <a href="http://d3js.org">D3</a> JavaScript library because I've wanted to use it to create
interesting and interactive visualizations.
</p>
<p>
I also love music. I use iTunes fairly religiously and make sure to rate songs and fill in as much information about them as I can.
I even make sure to not skip songs which are almost over so the play count is increased.
</p>
<h2>Top 25 Songs</h2>
<p>
Below are the top 25 songs in your library as well as the top 10 genres. Click on a genre to filter by it and see the new top 25.
Each song's color is that of its genre. Songs whose genre is not in the top 10 are black. Click on a rectangle to query YouTube for the song.
</p>
<div id="topPlay" class="svg"></div>
<h2>Old Gems</h2>
<p>
Here is a chart of how many songs were last played on any given day. There seems to be at least a few each day for the last year. I often listen to playlists,
but sometimes get bored and listen to all my five star music on shuffle. I bet that's where a lot of the random songs come up. It looks like a lot of music got
played on May 26th.
</p>
<p>
Old Gems becomes especially interesting when you click a day. To the right the top songs (some are cut off if there is not enough space) that were
last played on that day are displayed. I've been using this to look for old gems that have been lost in the depths of my library. Click on a song to
link to YouTube.
</p>
<div id="lastGenre" class="svg"></div>
<h2>Average Plays per Day</h2>
<p>
This is average plays per day since the song was added. Recent songs you've binged on will be heavily weighed, while oldies will still show up (but
only if you truly love them).
</p>
<div id="averagePlays" class="svg"></div>
<h2>Top 25 Skipped Songs</h2>
<p>
Now let's take a quick look at the most skipped songs. Can't say I'm surprised by that first one...
</p>
<div id="topSkip" class="svg"></div>
<h2>Play Count Distribution</h2>
<p>
At first glance this graph isn't terribly interesting. Who's surprised that I haven't listened to a large portion of my library more than
five times? Not I. The data becomes more interesting through some filtering, though. It looks like I'm more selective in adding Electronic
and Hip-Hop music, leading to fewer songs I don't really listen to.
</p>
<div id="playDistribution" class="svg"></div>
<h2>Rating Distribution</h2>
<p>
The Rating Distribution shows how songs are rated filtered on genre. My library isn't that interesting because I only rate my songs 0, 4, or 5 stars,
but your library might have some more useful results. Each column is inclusive of its lower bound on the x-axis, so the bar spanning 5-6 stars is how
many songs have a 5 star rating.
</p>
<div id="ratingDistribution" class="svg"></div>
<h2>Song Length Distribution</h2>
<p>
Here we explore the song length distribution. It looks fairly <a href="http://en.wikipedia.org/wiki/Poisson_distribution">Poisson</a>
for those interested in statistics. For the rest of you, that song on the far right is the entire soundtrack from
<a href="http://en.wikipedia.org/wiki/Age_of_Empires_II:_The_Conquerors#Soundtrack">Age of Empires II: The Conquerors</a>. What a classic.
</p>
<p>
Again, some interesting conclusions fall out of filtering. The median Pop song in my library is around 3:15 long while the median Alternative
song comes in about a half minute longer. I was expecting Classic Rock songs to average out around 4:30, but the distribution fell short. I'm
not surprised there were a few long outliers. I bet that can be attributed to The Eagles and Meat Loaf.
</p>
<div id="timeDistribution" class="svg"></div>
<h2>Artist Rating Distribution</h2>
<p>
The Artist Rating Distribution is the same as the Rating Distribution except it filters on artist instead of genre. My library is still fairly
uninteresting.
</p>
<div id="artistRatingDistribution" class="svg"></div>
<h2>Bit Rate Distribution</h2>
<p>
I thought bit rates would have more consistent values, but by the looks of it they're all over the place. I wonder if that is just a result of the
different sources of my music or if it is some other reason.
</p>
<div id="bitRateDistribution" class="svg"></div>
<h2>Top Artists</h2>
<p>
Here is play count again by top album. It's interesting that to make it into the top 6 an artist has to have at least a few solid hits. Foo Fighters
is the first where there are two clear outliers followed by about 14 others that have over 20 plays.
</p>
<div id="topArtist" class="svg"></div>
<h2>Date Added</h2>
<p>
Date Added isn't very helpful for songs before November 15th, 2010 because that's when I migrated my iTunes from one machine to another, wiping all
metadata. After that date it looks like I've pretty consistently added a few songs a week. This chart might be more interesting when looking at your
own data.
</p>
<div id="addedGenre" class="svg"></div>
<h2>Last Play Hour</h2>
<p>
Last Play Hour shows the distribution of how many songs were last played in a certain hour. This chart says some interesting things about my work day.
I normally get into work around 7:30 and have a couple hours before the rest of my team gets in. We usually have a bit of a staff meeting when they get
in (around 9-10) and it looks like that shows up here with a drop off of music.
</p>
<div id="intraday" class="svg"></div>
</div>
<div id="footer">
Created by Brian Conn. Contact me at <a href="mailto:[email protected]">[email protected]</a> or see more at <a href="/">theconnman.com</a>.
</div>
</div>
</body>
</html>