In [1]:
%run startup.ipy
In [2]:
performer_name = 'Dino Ciani'
In [3]:
def data(performer_name):
df = sql("""
SELECT r.name AS album,
ac.name AS artists,
to_date(to_char(ev.date_year, '9999') ||
to_char(COALESCE(ev.date_month, 1), '99') ||
to_char(COALESCE(ev.date_day, 1), '99'), 'YYYY MM DD') AS date,
rg.gid AS mbid
FROM artist AS a
JOIN artist_credit_name AS acn ON a.id = acn.artist
JOIN artist_credit AS ac ON ac.id = acn.artist_credit
JOIN release_group AS rg ON rg.artist_credit = ac.id
JOIN release AS r ON r.release_group = rg.id
JOIN release_event AS ev ON ev.release = r.id
WHERE a.name = %(performer_name)s
;""", performer_name=performer_name)
return df
covers = data(performer_name)
covers
Out[3]:
In [4]:
cover_url_template = 'https://coverartarchive.org/release-group/%s/front-250.jpg'
rg_url_template = 'https://musicbrainz.org/release-group/%s'
# Transform into JSON
data = [{'start': line.date.isoformat(),
'album': line.album,
'artists': line.artists,
'cover_url': cover_url_template % line.mbid,
'rg_url': rg_url_template % line.mbid,
} for _, line in covers.iterrows()]
# Send to Javascript
import json
from IPython.display import Javascript
Javascript("""window.albumData={};""".format(json.dumps(data)))
Out[4]:
In [5]:
%%javascript
element.append('<div id="timeline" style="width: 100%; height: 100%;"></div>');
requirejs.config({
paths: {
vis: '//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis',
handlebar: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars'
}
});
require(['handlebar', 'vis'], function (handlebar, vis) {
var template = handlebar.compile(`
<div>
<a href="{{rg_url}}">{{album}}</a>
<br />
{{artists}}
<img src="{{cover_url}}" width="150" height="150">
</div>
`);
var timeline = new vis.Timeline(
document.getElementById('timeline'), // container,
new vis.DataSet(window.albumData), // data
{
template: template,
editable: false
} // options
);
})
In [6]:
%%html
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>