Public
Edited
May 12
data = FileAttachment("Negative Thoughts Dataset 1.csv").csv()
color = d3.scaleOrdinal()
.domain([...new Set(data.map(d => d.emotion))])
.range(d3.schemeTableau10)
Plot.plot({
x: { label: "Time of Day", tickRotate: -45 },
y: { label: "Intensity", domain: [0, 10] },
color: { legend: true, label: "Emotion" },
marks: [
Plot.line(data, {
x: "Time",
y: "Intensity",
stroke: "Emotion",
curve: "natural"
}),
Plot.dot(data, {
x: "Time",
y: "Intensity",
fill: "Emotion"
})
]
})
sortedData = data
.slice()
.sort((a, b) => a.Time.localeCompare(b.Time))
.map(d => ({
time: d.Time,
intensity: +d.Intensity,
emotion: d.Emotion
}))
segments1 = sortedData.slice(1).map((d, i) => ({
x1: sortedData[i].time,
y1: sortedData[i].intensity,
x2: d.time,
y2: d.intensity,
emotion: d.emotion
}))
thoughtsData = data.map((d, i) => ({
index: i,
Time: d.Time,
Emotion: d.Emotion,
Intensity: +d.Intensity
}));
maxIntensity = Math.max(...thoughtsData.map(d => d.Intensity));
Plot.plot({
marginLeft: 60,
marginBottom: 80,
x: {
label: "Time",
tickRotate: -45
},
y: {
label: "Intensity",
domain: [0, maxIntensity]
},
marks: [
Plot.line(thoughtsData, {x: "Time", y: "Intensity", sort: null}),
Plot.dot(thoughtsData, {x: "Time", y: "Intensity"})
]
});
timeOrder = thoughtsData.map(d => d.Time);
Plot.plot({
marginLeft: 60,
marginBottom: 80,
x: {
label: "Time",
type: "band",
domain: timeOrder,
tickRotate: -45 // Rotate labels for readability
},
y: {
label: "Intensity",
domain: [0, maxIntensity]
},
marks: [
Plot.line(thoughtsData, {x: "Time", y: "Intensity", sort: null}),
Plot.dot(thoughtsData, {x: "Time", y: "Intensity"})
]
});
Plot.plot({
marginLeft: 60,
marginBottom: 80,
x: {
label: "Time",
type: "band",
domain: timeOrder,
tickRotate: -45
},
y: {
label: "Intensity",
domain: [0, maxIntensity]
},
color: {
legend: true,
label: "Emotion"
},
marks: [
Plot.line(thoughtsData, {x: "Time", y: "Intensity", stroke: "Emotion", sort: null}),
Plot.dot(thoughtsData, {x: "Time", y: "Intensity", fill: "Emotion"})
]
});
segments2 = thoughtsData.slice(1).map((d, i) => ({
x1: thoughtsData[i].Time,
y1: thoughtsData[i].Intensity,
x2: d.Time,
y2: d.Intensity,
Emotion: d.Emotion
}));
Plot.plot({
marginLeft: 60,
marginBottom: 80,
x: {
label: "Time",
type: "band",
domain: timeOrder,
tickRotate: -45
},
y: {
label: "Intensity",
domain: [0, maxIntensity]
},
color: {
legend: true,
label: "Emotion"
},
marks: [
Plot.link(segments2, {x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "Emotion"}),
Plot.dot(thoughtsData, {x: "Time", y: "Intensity", fill: "Emotion"})
]
});
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.
