albumData = FileAttachment("spotify.csv").csv({typed: false})
songData = FileAttachment("songs.csv").csv({typed: false});
Plot.plot({
height: 750,
width: 1250,
marginLeft: 50,
grid: true,
x: {
domain: [new Date("2001-01-01"), new Date("2030-12-01")]
},
y: {
domain: [60, 100]
},
marks: [
Plot.text(albumData, {
x: "date",
y: "album_pop",
text: "album",
textAnchor: "start",
dx: 5,
fontSize: d => d.album_speechiness * 300,
fill: "album"
}),
Plot.dot(albumData, {
x: "date",
y: "album_pop",
fill: "album"
})
],
// color: {
// legend: true,
// },
})
Plot.plot({
height: 750,
width: 1000,
marginLeft: 100,
grid: true,
x: {
domain: [0, .50]
},
y: {
domain: [60, 90]
},
marks: [
Plot.text(albumData, {
x: "album_speechiness",
y: "album_pop",
text: "album",
textAnchor: "start",
dx: 10,
fill: "album",
fontSize: 20
}),
Plot.dot(albumData, {x: "album_speechiness", y: "album_pop", text: "album", fill: "album" })
],
// color: {
// legend: true,
// }
})
Plot.plot({
height: 750,
width: 1250,
marginLeft: 100,
// grid: true,
x: {
domain: [0.0, 1]
},
y: {
domain: [10, 90]
},
marks: [
Plot.text(songData, {
x: "speechiness",
y: "popularity",
text: "title",
textAnchor: "start",
dx: 5,
// fontSize: d => d.album_speechiness * 100,
fill: "album"
}),
Plot.dot(songData, {
x: "speechiness",
y: "popularity",
fill: "album"
}),
Plot.ruleX([.33], {stroke: "red"}),
],
color: {
legend: true,
},
})
topSongs = FileAttachment("experiment.csv").csv({typed: false})
Plot.plot({
height: 750,
width: 1250,
grid: true,
x: {
domain: [0, .6]
},
y: {
domain: [40, 96]
},
marks: [
Plot.dot(topSongs, {x: "speechiness", y: "popularity", fill: "top"}),
Plot.text(topSongs, {x: "speechiness", y: "popularity", fill: "top", text: "title", textAnchor: "start", dx: 10}),
],
color: {
legend: true,
},
})
billboard = FileAttachment("Beyonce_Billboard.csv").csv({typed: false})
Plot.plot({
marginLeft: 175,
marginRight: 0,
width: 1000,
marks: [
Plot.barX(billboard, {x: "weeks-on-board", y:"song", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
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.
