Public
Edited
Dec 22, 2022
data = d3
.csv(
"https://raw.githubusercontent.com/chekos/git-scraping-spotify/main/markdown/tracks_long.csv",
d3.autoType
)
.then((data) =>
data.map((d) => ({
played_at: d.played_at,
artist: d.artists,
song: d.track_name,
album_artist: d.album_artist_name,
album_name: d.album_name,
album_type: d.album_type,
popularity: d.track_popularity,
duration_ms: d.track_duration_ms,
uri: d.track_uri,
played_date: d3.timeFormat("%Y-%m-%d")(d.played_at)
}))
)
artists = new Map(
[...d3.group(data, (d) => d.artist).entries()].sort(
(a, b) => b[1].length - a[1].length
)
)
Inputs.table(data)
artists.get("A.C.O").length
new Map([...artists.entries()].sort((a, b) => b[1].length - a[1].length))
viewof artist = Inputs.select(artists, { label: "Artist: " })
Plot.plot({
marks: [
Plot.barX(
artist,
Plot.groupY(
{ x: "count" },
{
y: "song",
sort: { y: "x", reverse: true, limit: 10 },
fill: "album_type"
}
)
),
Plot.ruleX([0])
],
color: {
legend: true
},
marginLeft: 150
})
Plot.plot({
x: { type: "time" },
y: { label: "" },
grid: true,
color: { legend: true },
marks: [
Plot.dot(
artist,
Plot.binX(
{ r: "count" },
{
x: "played_date",
y: "song",
stroke: "album_name",
thresholds: d3.timeDay,
sort: { y: "stroke" }
}
)
)
],
marginLeft: 150
})
Plot.plot({
x: { type: "time", label: "" },
y: { label: "" },
grid: true,
marks: [
Plot.dot(
artist,
Plot.binX(
{ r: "count" },
{
x: "played_date",
y: "album_name",
fill: "steelblue",
fillOpacity: 0.5,
thresholds: d3.timeDay,
sort: { y: "y" }
}
)
)
],
marginLeft: 150
})
Plot.plot({
x: { type: "time", label: "" },
y: { label: "" },
grid: true,
marks: [
Plot.tickX(artist, {
x: "played_date",
y: "album_name",
sort: { y: "y" }
})
],
marginLeft: 150
})
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.
