Public
Edited
May 28
data = [
{
song: "🎶 I'm Yours – Jason Mraz",
score: 10,
lyric: "There's no need to complicate, our time is short."
},
{
song: "🎸 Do I Wanna Know – Arctic Monkeys",
score: 9,
lyric: "Crawling back to you..."
},
{
song: "💔 Undressed – sombr",
score: 9,
lyric: "I don't wanna get undressed for a new person all over again."
},
{
song: "👁️ Iris – Goo Goo Dolls",
score: 8,
lyric: "I just want you to know who I am."
},
{
song: "🖤 Somebody Else – The 1975",
score: 8,
lyric: "I don't want your body but I hate to think about you with somebody else."
},
{
song: "🧣 Sweater Weather – The Neighbourhood",
score: 7,
lyric: "'Cause it's too cold for you here..."
}
]
funFactChart = {
const chart = Plot.plot({
x: {
label: "Emotional Score",
domain: [0, 10],
labelAnchor: "center"
},
y: { label: null },
marginLeft: 320,
style: {
fontSize: "14px",
background: "#0d1117",
color: "#c9d1d9",
fontFamily: "monospace"
},
marks: [
Plot.barX(data, {
x: "score",
y: "song",
fill: "#58a6ff",
rx: 6,
channels: { lyric: "lyric" },
pointerenter(event, d) {
tooltip.style.display = "block";
tooltip.textContent = d.lyric;
},
pointermove(event) {
tooltip.style.left = `${event.clientX + 10}px`;
tooltip.style.top = `${event.clientY + 10}px`;
},
pointerleave() {
tooltip.style.display = "none";
}
}),
Plot.text(data, {
x: "score",
y: "song",
text: d => d.score,
dx: 8,
anchor: "start",
fill: "#f0f6fc",
fontWeight: "bold"
})
]
});
return chart;
}
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.
