Platform
Resources
Pricing
Sign in
Get started
H Scheidl
Passionate about art, creativity, data... and programming! Using ObservableHQ for data visualizations with p5js, SVG and d3.
Workspace
Fork
Published
Spotify APIs
By
H Scheidl
Edited
Jun 30, 2022
CC BY-SA 4.0
Fork of
3 - Spotify API: Danceability (SVG version)
Spotify APIs
1 - Spotify API Basics
2 - Spotify API: Danceability (p5.js version)
3 - Spotify API: Danceability (SVG version)
4 - Spotify API: Danceability (d3 charts)
5 - Spotify API: My top songs vs Global top
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
top50MyOwn
=
{
let
data
;
let
tracks
=
await
spotifyApi
.
getMyTopTracks
(
{
limit
:
50
,
time_range
:
selectedRange
[
0
]
}
)
;
tracks
=
tracks
.
items
.
map
(
(
d
)
=>
(
{
id
:
d
.
id
,
name
:
d
.
name
}
)
)
;
return
await
features
(
tracks
)
;
}
Insert cell
featuresTop50Global
=
features
(
top50Global
)
Insert cell
Insert cell
featuresKeys
=
Object
.
keys
(
top50Combined
[
0
]
)
.
slice
(
1
,
11
)
.
filter
(
(
i
)
=>
i
!=
"key"
&&
i
!=
"loudness"
)
Insert cell
featuresPivot
=
featuresKeys
.
flatMap
(
(
feature
)
=>
top50Combined
.
map
(
(
d
)
=>
(
{
scope
:
d
.
scope
,
feature
,
value
:
d
[
feature
]
}
)
)
)
//using flatMap to pivot the feature values so that we can use it in d3
Insert cell
import
{
StackedBarChart
}
from
"@d3/stacked-bar-chart"
Insert cell
import
{
GroupedBarChart
}
from
"@d3/grouped-bar-chart"
Insert cell
import
{
Legend
,
Swatches
}
from
"@d3/color-legend"
Insert cell
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
selectedRange
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
key
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chart
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
accessToken
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tile
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SpotifyWebApi
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
spotifyApi
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
features
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
featureList
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
top50Global
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
top50MyOwn
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
featuresTop50Global
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
top50Combined
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
featuresKeys
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
featuresPivot
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML