function labeledDot(genre) {
const slug = genre.replaceAll(" ", "");
return `<a href="https://everynoise.com/engenremap-${slug}.html" style="white-space: nowrap"><span style="color:${
noises.find((n) => n.genre === genre).color
}">⬤</span> ${genre}</a> `;
}
md`${labeledDot("escape room")}`
everyNoiseAtOnce = FileAttachment("every_noise_at_once@2.html").html()
children = everyNoiseAtOnce.getElementsByClassName("canvas")[0].children
stripArrowSuffix = (str) => str.substring(0, str.length - 2)
stripArrowSuffix(children[0].innerText)
stripPxSuffix(children[0].style.left)
rawNoises = Array.from(
everyNoiseAtOnce.getElementsByClassName("canvas")[0].children
).map((child) => ({
genre: stripArrowSuffix(child.innerText),
x: parseInt(stripPxSuffix(child.style.left)),
y: -parseInt(stripPxSuffix(child.style.top)), // top = -y; we have to flip
color: child.style.color,
link: child.getElementsByClassName("navlink")[0].href
}))
xExtent = Math.max(...rawNoises.map((child) => child.x))
yExtent = -Math.min(...rawNoises.map((noise) => noise.y))
noises = rawNoises.map((noise) => ({
...noise,
y: noise.y + yExtent
}))
yScale = ({
label: "← organic, mechanical & electric →",
labelAnchor: "center",
// https://observablehq.com/@observablehq/plot-cheatsheets-scales
tickFormat: "0s",
labelOffset: 50
})
hull = Plot.hull(noises, {
x: "x",
y: "y",
strokeOpacity: 0.1
})
genreHighlights = highlightedGenres.flatMap((facet) => {
// We need to precompile as early as possible or we'll tank the performance.
const regex = new RegExp(facet);
return noises.map((noise) => ({
...noise,
facet,
highlighted: regex.test(noise.genre)
}));
})
hyperlinkGenre = (genre) => {
// strip spaces from the genre name and tack it onto the prefix
const slug = genre.split(" ").join("");
return htl.html`<a href="https://everynoise.com/engenremap-${slug}.html">${genre}</a>, `;
}
renderNoise = (genre) => {
return md`[${genre}](${hyperlinkGenre(genre)}) <span style="color:${
noises.find((n) => n.genre === genre).color
}">⬤</span>`;
}
renderNoise("shoegaze")
chroma = require("https://bundle.run/chroma-js@2.1.2")
response
mutable jumped = false
handleJumping = {
if (jumped) {
return;
}
await Promises.delay(2000);
if (response.access_token) {
mutable jumped = true;
const elem = document.getElementById("step-2");
console.log("Jumping to ", elem);
scrollToElem(elem);
await Promises.delay(500);
scrollToElem(elem);
}
}
function scrollToElem(elem) {
elem.scrollIntoView();
}
SpotifyWebApi = require('https://bundle.run/spotify-web-api-node@5.0.2');
api = {
const api = new SpotifyWebApi({
clientId,
redirectUri: "https://observablehq.com/@mjbo/genre-map-explorer-for-spotify"
});
api.setAccessToken(token);
return api;
}
me = (await api.getMe()).body
paginate = async (f) => {
const pageSize = 50;
const allItems = [];
function requestPage(offset, limit = pageSize) {
return f({ limit, offset })
.then((response) => {
mutable paginationMonitoring = [
...mutable paginationMonitoring,
{ itemCount: response.body.items.length, time: Date.now() }
];
return response;
})
.catch((error) => {
console.error(error);
mutable paginationMonitoring = [
...mutable paginationMonitoring,
{ error, time: Date.now() }
];
return {
body: {
items: [],
total: 0
}
};
});
}
const head = await requestPage(/*offset=*/ 0);
allItems.push(head.body.items);
const pages = Math.floor(head.body.total / pageSize);
const offsets = Array(pages)
.fill(0)
.map((e, i) => i + 1)
.map((x) => x * pageSize);
const pageResponses = offsets.map((offset) => requestPage(offset));
for await (const pageResponse of pageResponses) {
allItems.push(pageResponse.body.items);
}
return allItems.flat();
}
mutable paginationMonitoring = []
playlists = paginate((pageInfo) => api.getUserPlaylists(targetUserId, pageInfo))
selectedPlaylists = settle(viewof playlistTable, /*delay=*/ 3000)
examplePlaylist = selectedPlaylists[0]
getTracksForPlaylistAsync = async ({ playlistId }) => {
return await paginate((pageInfo) =>
api.getPlaylistTracks(playlistId, pageInfo)
);
}
exampleTracks = getTracksForPlaylistAsync({ playlistId: examplePlaylist.id })
minByAddedAt = ({ tracks }) => {
if (!tracks.length) {
return new Date()
}
const dateString = _(tracks).minBy("added_at").added_at;
return new Date(dateString);
}
maxByAddedAt = ({ tracks }) => {
if (!tracks.length) {
return new Date();
}
const dateString = _(tracks).maxBy("added_at").added_at;
return new Date(dateString);
}
minByAddedAt({
tracks: exampleTracks
})
extractArtistIdsFromTracks = ({ tracks }) => {
const ids = tracks.flatMap((track) =>
track.track.album.artists.map((artist) => artist.id)
);
// Remove duplicates
return [...new Set(ids)];
}
extractArtistIdsFromTracks({ tracks: exampleTracks })
chunks = (arr, n) => {
const chunks = new Array()
for (let i = 0; i < arr.length; i += n) {
chunks.push(arr.slice(i, i + n))
}
return chunks
}
getArtistsAsync = async ({ artistIds }) => {
const chunkedIds = chunks(artistIds, ARTIST_API_CHUNK_SIZE);
const callApi = (chunkIds) => {
return (
api
.getArtists(chunkIds)
.then((response) => response.body.artists)
// We don't care if we don't get all pages,
// so long as we don't break the chart.
.catch((error) => {
console.error(error);
return [];
})
);
};
const chunkedResults = await Promise.all(chunkedIds.map(callApi));
return chunkedResults.flat();
}
getArtistsAsync({ artistIds: extractArtistIdsFromTracks({ tracks: exampleTracks }) })
hydratePlaylistAsync({ playlist: examplePlaylist })
hydratedPlaylists = Promise.all(selectedPlaylists.map(playlist => hydratePlaylistAsync({ playlist })))
genresInPlaylists = new Set(hydratedPlaylists.flatMap(playlist => playlist.artists).flatMap(artist => artist.genres))
artistsInPlaylists = new Set(hydratedPlaylists.flatMap(playlist => playlist.artists).map(artist => artist.name))
searchedNoisesSet = new Set(searchedNoises)
searchedGenresSet = new Set(searchedGenres)
searchedArtistsSet = new Set(searchedArtists)
hydratedArtists = hydratedPlaylists.flatMap((playlist) =>
playlist.artists.map((artist) => {
const artistTracks = playlist.tracks.filter(
(track) =>
// tracks may be created by uncredited artists
[...track.track.artists, ...track.track.album.artists].filter(
(a) => a.name === artist.name
).length
);
const artistAlbums = _(artistTracks)
.map((track) => track.track.album)
.uniqBy((album) => album.id)
.value();
if (artistTracks.length === 0) {
console.log(artist);
}
return {
albums: artistAlbums,
tracks: artistTracks,
// There's an odd scenario where an artist will be a coartist on an album
// but none of the tracks, e.g. Kids See Ghosts
discovery_date:
artistTracks.length && minByAddedAt({ tracks: artistTracks }),
center_of_mass: calcCenterOfMass({ genres: artist.genres }),
from_playlist: playlist,
// for performance
genres_set: new Set(artist.genres),
...artist
};
})
)
exampleArtist = hydratedArtists[0]
getGenreArtists = ({ genre }) =>
hydratedArtists.filter((artist) => artist.genres.includes(genre))
getGenreArtists({ genre: exampleGenre })
makeClusterTooltip = ({ cluster }) => {
const groups = getArtistsGroupedByGenre({ genre: cluster.genre });
let acc = cluster.genre;
for (const [playlist, artists] of Object.entries(groups)) {
const artistNames = artists
.map((artist) => artist.name)
.filter((name) => searchedArtistsSet.has(name));
if (artistNames.length === 0) {
continue;
}
if (condensedTooltips) {
acc += `\n--- ${playlist} ---`;
for (const chunk of _.chunk(artistNames, 5)) {
acc += "\n" + chunk.join(", ");
}
} else {
for (const artistName of artistNames) {
acc += `\n${artistName} from ${playlist}`;
}
}
}
return acc;
}
exampleCluster = hydratedClusters[0]
makeClusterTooltip({ cluster: exampleCluster })
getArtistsGroupedByGenre = ({ genre }) => {
const artists = getGenreArtists({ genre });
if (artists.length === 0) {
return undefined;
}
return _(artists)
.groupBy((artist) => artist.from_playlist.name)
.entries()
.sortBy(([genre, artists]) => artists.length)
.reverse()
.fromPairs()
.value();
}
getArtistsGroupedByGenre({ genre: exampleGenre })
getMostCommonPlaylistOrigin({ genre: exampleGenre })
genresInPlaylists
clusters = aq
.table({ genre: [...genresInPlaylists] })
.join(aq.from(noises), "genre")
.objects()
hydratedClusters = clusters.map((cluster) => {
const artists = getGenreArtists({ genre: cluster.genre });
return {
...cluster,
artists,
radius: artists.length,
representative_playlist_name: getMostCommonPlaylistOrigin({
genre: cluster.genre
})
};
})
exampleArtist.genres
calcCenterOfMass({ genres: exampleArtist.genres })
exampleArtist
makeArtistTooltip({ artist: exampleArtist })
comSearchedArtistsSet = new Set(comSearchedArtists)
minAddedAt = minByAddedAt({ tracks: hydratedTracks })
maxAddedAt = maxByAddedAt({ tracks: hydratedTracks })
artistsToSmooth = hydratedArtists.filter(
(artist) =>
artist.from_playlist.name === playlistToSmooth && artist.center_of_mass
)
noiseMap.scale("y")
noiseMap.scale("x")
artistsToSmoothPoints = artistsToSmooth.map((artist) => {
const point = [
noiseMap.scale("x").apply(artist.center_of_mass.x),
noiseMap
.scale("y")
.apply(noiseMap.scale("y").domain[0] - artist.center_of_mass.y) // gotta invert
];
// squirrel away the artist so we're able to identify the points that come back later on
// putting the artist in index 2 breaks things so we're forced to do this instead
point.artist = artist;
return point;
})
optimize
sortedPoints = {
let iterations = 0;
for (const points of order_by_distance(artistsToSmoothPoints)) {
iterations++;
if (iterations > 40) {
console.warn(
"Failed to stabilize path optimisation. Stopping further refinement."
);
return points;
}
yield points;
}
console.info(`Path took ${iterations} iterations to optimise`);
}
smoothedArtists = sortedPoints.map((point) => point.artist)
plotPathMap = ({ artists }) => {
return addTooltips(
Plot.plot({
caption: "Click to open artist on Spotify",
width,
height: height * 0.8,
color: {
legend: true,
domain: [...clusterMap.scale("color").domain, "#0000FF"]
},
x: xScale,
y: yScale,
marks: [
hull,
Plot.density(
hydratedArtists.filter((a) => a.center_of_mass),
{
x: (d) => d.center_of_mass.x,
y: (d) => d.center_of_mass.y,
fill: (d) => d.from_playlist.name,
fillOpacity: 0.03,
clip: true
}
),
Plot.line(artists, {
x: (d) => d.center_of_mass.x,
y: (d) => d.center_of_mass.y,
curve: "catmull-rom",
marker: "arrow"
}),
on(
Plot.image(artists, {
x: (d) => d.center_of_mass.x,
y: (d) => d.center_of_mass.y,
// last is typically the smallest
src: (d) => (_.last(d.images) ? _.last(d.images).url : undefined),
width: (d) => 24,
title: (artist) => makeArtistTooltip({ artist })
}),
{
click: (event, d) =>
window.open(d.datum.external_urls.spotify, "_blank")
}
),
Plot.text(artists, {
x: (d) => d.center_of_mass.x,
y: (d) => d.center_of_mass.y,
fill: "blue",
href: (d) => d.external_urls.spotify,
target: () => "_blank",
text: (d) => d.name,
dy: -15
})
]
})
);
}
renderArtistsTable = ({ artists }) => {
const data = artists.map((artist) => {
return {
...artist,
Name: artist.name,
Genres: artist.genres,
Albums: artist.albums,
Link: "OPEN SPOTIFY"
};
});
return Inputs.table(data, {
columns: ["Name", "Link", "Genres", "Albums"],
format: {
Name: (name, i) =>
html`<a href=${artists[i].external_urls.spotify}>${name}</a>`,
Genres: (genres) =>
html`<div style="white-space: normal">${genres.map(
hyperlinkGenre
)}</div>`,
Albums: (albums) =>
html`<div>${albums.map((album) => {
return html`
<div>
<a href=${album.external_urls.spotify} target="_blank">
<img src="${album.images[2].url}" height="64" width="64" loading="lazy"/>
</a>
<a style="display: block" href=${album.external_urls.spotify}>${album.name}</a>
<a style="display: inline-block" class="spotify" href=${album.external_urls.spotify}>OPEN SPOTIFY</a>
</div>`;
})}</div>`,
Link: (link, i) =>
html`<a class="spotify" href=${artists[i].external_urls.spotify}>${link}</a>`
}
});
}
urlBlob = smoothedArtists
.flatMap((artist) => artist.tracks)
.map((track) => track.track.external_urls.spotify)
.join("\n")
enao_genres
bt_genres
chart_param = ({ ...chart_param_init, width: width / 2, height: width / 2 })
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.