Public
Edited
Dec 30, 2022
import { vl } from "@vega/vega-lite-api"
data = await d3
.json(
"https://raw.githubusercontent.com/chekos/my-recently-played-tracks/main/top5ArtistsTracks.json"
)
.then((data) =>
data.map((d) => {
const playedAt = new Date(d.played_at);
const timeOfDay =
playedAt.getHours() < 5
? "Late night"
: playedAt.getHours() < 10
? "Early morning"
: playedAt.getHours() < 13
? "Morning"
: playedAt.getHours() < 17
? "Afternoon"
: playedAt.getHours() < 20
? "Late afternoon"
: "Evening";
const track = d.track;
const artistsNames = d.track.artists.map((v) => v.name);
const song = d.track.name;
const albumName = d.track.album.name;
const mainArtist = d.track.artists[0].name;
return {
timeOfDay,
track,
playedAt,
artistsNames,
song,
albumName,
mainArtist
};
})
)
vl
.markPoint({ opacity: 0.2, color: "black" })
.data(data)
.encode({
x: {
field: "playedAt",
type: "temporal",
timeUnit: { unit: "hoursminutes", step: 5 },
axis: { orient: "top", domain: false },
title: "time played"
},
size: { aggregate: "count", legend: null },
y: {
field: "mainArtist",
scale: { domain: top5 },
title: "",
axis: { domain: false }
}
})
.width(width)
.render()
vl
.markPoint({ opacity: 0.2, color: "black" })
.data(data)
.encode({
x: {
field: "playedAt",
type: "temporal",
timeUnit: { unit: "monthdate", step: 1 },
axis: { orient: "top", domain: false },
title: ""
},
size: { aggregate: "count", legend: null },
row: {
field: "mainArtist",
type: "nominal",
scale: { domain: top5 }
},
y: {
field: "playedAt",
title: "",
axis: { domain: false },
timeUnit: { unit: "hoursminutes", step: 15 }
}
})
.width((width * 7) / 8)
.height(200)
.render()
top5 = ["La Plebada", "La Banda Baston", "Fntxy", "Yoga Fire", "Aleman"]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
