Monthly_Ease@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = monthly_ease1
emoji = ({ Relaxed: "😎", Solid: "🙂", Challenging: "😒", MaximumEffort: "😖" })
Plot.plot({
title: `Ease By Month - (${monthdrop}) `,
width: width,
height: 200,
y: {
label: null,
domain: d3.sort(filterMonth, d => -d.Month).map(d => d.Month)
},
x: {
domain: [0.5, 1],
axis: null
},
marks: [
Plot.text(filterMonth, {
text: d => emoji["Relaxed"].repeat(d.Relaxed),
y: "Month",
fontSize: 25,
frameAnchor: "left"
}),
Plot.text(filterMonth, Plot.stackX({
text: d => emoji["Solid"].repeat(d.Solid),
y: "Month",
fontSize: 25,
frameAnchor: "left",
dx: 0,
dy: 30
})),
Plot.text(filterMonth, Plot.stackX({
text: d => emoji["Challenging"].repeat(d.Challenging),
y: "Month",
fontSize: 25,
frameAnchor: "left",
dx: 0,
dy: 60,
}))
]
})
import {createMatrixData} from "@datavizstudio/person-isotype-matrix"
moodMatrixData = data.map((month) => createMatrixData(10,month.Total).map((d, i) => {
let type = "Challenging";
if(i > month.Total - month.MaximumEffort){
type="MaximumEffort"
} else if(i > month.Relaxed) {
type="Relaxed"
}
return ({
x: d.x,
y: d.y,
mood: type,
month: month.Month
})
})).flat()
Plot.plot({
height: 120,
width,
y: {
reverse: true,
domain: [0, 5]
},
x: {
domain: [0, 11]
},
fx: {
domain: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]
},
marks: [
Plot.frame(),
Plot.text(moodMatrixData, {
x: "x",
y: "y",
fx: "month",
text: d => emoji[d.mood]
})
]
})
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.
