Public
Edited
Sep 10, 2023
spotify_songs_2008_2023_v21 = FileAttachment("spotify_songs_2008_2023_v2 (1).json").json()
top_tracks_global_2008_2023= FileAttachment("top_tracks_global_2008_2023_COMMA.txt").tsv()
top_tracks_global_2008_2023
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
viewof bandwith = Inputs.range([0, 50], {label: "bandwith", step: 1})
viewof threshold = Inputs.range([0, 100], {label: "threshold", step: 1})
Plot.plot({
margin: 40,
inset: 20,
width:750,
height: 500,
style: {
color: "black"
},
x: {label: "Durée du morceau",
grid: true},
y: {label: "Popularité"},
marks: [
Plot.dot(top_tracks_global_2008_2023, {
x: (d) => parseInt(d["Duration (seconds)"]),
y: (d) => parseInt(d["Popularity"]),
fill: color,
fillOpacity: 0.5
}),
Plot.density(top_tracks_global_2008_2023, {
x: (d) => parseInt(d["Duration (seconds)"]),
y: (d) => parseInt(d["Popularity"]),
stroke: "Density",
thresholds: threshold,
bandwidth : bandwith
}),
]
})
Plot.plot({
marks: [
Plot.auto(top_tracks_global_2008_2023, {
x: (d) => parseInt(d["Duration (seconds)"]),
y: (d) => parseInt(d["Popularity"]),
color: "count"})
]
})
Plot
.dot(top_tracks_global_2008_2023, Plot.hexbin({fill: "count"}, {
x: (d) => parseInt(d["Duration (seconds)"]),
y: (d) => parseInt(d["Popularity"])
}))
.plot({color: {scheme: "YlGnBu"}})
top_tracks_global = FileAttachment("top_tracks_global_2008_2023_v2.json").json()
count_genre = top_tracks_global.map(d => d.Genre.split(",")).flat(1).map(d => d.trim())
count = count_genre.reduce(function (value, value2) {
return (
value[value2] ? ++value[value2] :(value[value2] = 1),
value
);
}, {});
Plot.plot({
height: 500,
width: 1000,
marginLeft: 225,
style: {
fontSize: '20px'
},
x: { axis: null },
y: { label: null},
marks: [
Plot.barX(count_genre_object, {
x: "count",
y: 0,
y: "name",
sort: { y: "x", reverse: true, limit: 10 },
fill: "#79f067",
}),
Plot.text(count_genre_object, {
text: d => `${d.count}`,
y: "name",
x: "count",
textAnchor: "end",
dx: -10,
fill: "black"
})
]
})
count_genre_object = Object.entries(count).map(d => {
return {name: d[0], count: d[1]}})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(top_tracks_global_2008_2023, Plot.windowY({
x: "Year",
y: (d) => parseInt(d["Duration (seconds)"]),
k: 1,
reduce: "mean"}))
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(Plot.group({x: "Year"}), {x: "Year", y: (d) => parseInt(d["Duration (seconds)"])})
]
})
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.
