Platform
Resources
Pricing
Sign in
Get started
taylen
Workspace
Fork
Public
By
taylen
and
Joy
Edited
Dec 13, 2022
2
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
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
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
Insert cell
Insert cell
Insert cell
Insert cell
SpotifyMultiRegionDecember
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/3daad051d03d4ecd6ffc4014db986c07/raw/92d9e3ec2f1ac9cb24180ef5f8c7b4cebc00de91/SpotifyMultiRegionEndDec2021.csv'
)
Insert cell
HolidaySongsSpotify
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/2e924a7c1e80e760769401d0d14a5aa5/raw/c8397d2a0735f30b24787867c669a626ef875836/HolidaySongsSpotify.csv'
)
Insert cell
SpotifyUSANovember
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/f6f7c6dc891284165c8d2b1f9b83ab37/raw/1ba14481b0a1f46fa4a255a32866622c2be62d3b/SpotifyUSANovember.csv'
)
Insert cell
CountriesAIWFC
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/fa91ffb234fbdbc6651dd95927808c7e/raw/ad16abaa6a48c149f1f1d638f1949803a03d75fc/CountriesAIWFC.csv'
)
Insert cell
AIWFCByRegion
=
FileAttachment
(
"AIWFCByRegion.geojson"
)
.
json
(
)
Insert cell
AIWFCByRegionCSV
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/bf0b64038bdb44a8bb7ae00eb6eb30ed/raw/cb97a4ea4770770db2b80aa78c49afe9a473a524/AIFWCByRegion.csv'
)
Insert cell
SongNamesCSV
=
d3
.
csv
(
'https://gist.githubusercontent.com/xtayzx/79ba8d74a5e88fd004b3dc872481492a/raw/5435f19b1dbc508aa51f1c058ad8e8be288fe6dd/SongNamesOrder.csv'
)
Insert cell
Insert cell
AustraliaData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'Australia'
}
)
;
Insert cell
CanadaData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'Canada'
}
)
;
Insert cell
SwedenData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'Sweden'
}
)
;
Insert cell
HongKongData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'Hong Kong'
}
)
;
Insert cell
USAData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'USA'
}
)
;
Insert cell
UKData
=
SpotifyMultiRegionDecember
.
filter
(
function
(
d
)
{
return
d
.
region
==
'United Kingdom'
}
)
;
Insert cell
JustAIWFCUSA
=
SpotifyUSANovember
.
filter
(
function
(
d
)
{
return
d
.
uri
==
'spotify:track:0bYg9bo50gSsH3LtXe2SQn'
}
)
Insert cell
TopChristmasSongs
=
SpotifyUSANovember
.
filter
(
function
(
d
)
{
return
d
.
peak_rank
<=
'20'
}
)
;
Insert cell
AIWFCRegion
=
uniqueValid
(
AIWFCByRegionCSV
,
d
=>
d
.
Region
)
Insert cell
AIWFCStreamSize
=
uniqueValid
(
AIWFCByRegionCSV
,
d
=>
d
.
Streams
)
Insert cell
StarSizeBySong
=
uniqueValid
(
HolidaySongsSpotify
,
d
=>
d
.
popularity
)
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
L
=
require
(
'leaflet@1.2.0'
)
//Leaflet
Insert cell
<
link
href
=
'${resolve('
leaflet
@1.2.0/dist/leaflet.css')}' rel='stylesheet' /> Leaflet
Insert cell
import
{
toc
}
from
"@nebrius/indented-toc"
// This component generates the Table of Contents
Insert cell
d3
=
require
(
"d3@7"
)
Insert cell
VegaLite
=
require
(
"vega-embed@5"
)
Insert cell
import
{
fromColumns
,
printTable
}
from
'@uwdata/data-utilities'
Insert cell
import
{
uniqueValid
}
from
'@uwdata/data-utilities'
//Taken from Tutorial 6 with selection of data
Insert cell
cartoDark
=
'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png'
//Dark map
Insert cell
cartoAttr
=
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>'
//Attribution
Insert cell
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
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
map
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SpotifyMultiRegionDecember
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
HolidaySongsSpotify
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SpotifyUSANovember
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
CountriesAIWFC
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
AIWFCByRegion
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
AIWFCByRegionCSV
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SongNamesCSV
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
AustraliaData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
CanadaData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SwedenData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
HongKongData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
USAData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
UKData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
JustAIWFCUSA
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
TopChristmasSongs
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
AIWFCRegion
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
AIWFCStreamSize
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
StarSizeBySong
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
SongNames
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
style
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
getRadius
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
streamSize
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
getDensColor
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
keyColors
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
modeColors
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colors
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
regionsColors
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
L
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
VegaLite
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
cartoDark
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cartoAttr
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