data = FileAttachment("aefreq@2.csv").csv({typed: true})
colorScale = d3.scaleOrdinal()
.domain(['Grade 1', 'Grade 2', 'Grade 3', 'Grade 4', 'Grade 5'])
.range(['green', 'gold', 'orange', 'red', 'black']);
filteredData = data.filter(d => d.treatment == 'Xanomeline Low Dose').sort((a, b) => b.total - a.total).sort((a, b) => {
if (a.term === b.term) {
return a.grade.localeCompare(b.grade);
} else {
return 0;
}
});
Plot.plot({
marginLeft: 400,
marginRight: 300,
width: 2005,
height: 300,
x: {
insetRight: 10,
domain: [ 0, 25 ]
},
style: { fontSize: 25 },
y: {
label: [],
lineWidth: 50,
grid: true,
domain: filteredData.map(d => d.term), // Set y domain based on sorted term values for this treatment
},
marks: [
Plot.barX(
filteredData,
{
x: "n",
y: "term",
fill: d => colorScale(d.grade),
tip: true,
title: d => `${d.grade}\nCount: ${d.n}\nTotal Count: ${d.total}`,
stacked: false
}
)
]
});
Plot.plot({
marginLeft: 400,
marginRight: 300,
width: 2005,
height: 1000,
style: { fontSize: 25 },
y: {
ticks: [],
label: null
},
facet: {
data: filteredData,
y: d => d.term,
marginRight: 100,
},
fy: {
axis: 'left',
labelAnchor: 'center',
domain: filteredData.map(d => d.term)
},
marks: [
Plot.barX(filteredData, {x: "n", y: "grade", fill: d => colorScale(d.grade) , tip: true}),
Plot.ruleX([0]),
Plot.axisX({ tickFormat: d => Number.isInteger(d) ? d : "" })
//Plot.axisX({tickValues: d3.range(0, 10, 1)})
]
})
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.
