Unlisted
Edited
Oct 25, 2024
tickArray = Array.from(
{ length: ticks + 1 },
(_, i) => (i / ticks) * customXDomain[1]
);
Plot.plot({
marginLeft: 300,
x: {
domain: customXDomain,
},
marks: [
Plot.ruleX([0]),
Plot.barX(data, {
x: (d) => customXDomain[1],
y: "Response_in_Text",
fill: "slategrey",
opacity: 0.25,
}),
Plot.barX(data, {
x: "count",
y: "Response_in_Text",
sort: { y: "x", reverse: true },
}),
Plot.text(data, {
x: (d) => customXDomain[1],
y: "Response_in_Text",
text: (d) => `${((d.count / customXDomain[1]) * 100).toFixed(0)}%`,
dx: -5,
textAnchor: "end",
fill: "black",
}),
Plot.axisX({
ticks: tickArray,
tickFormat: (d) => `${((d / customXDomain[1]) * 100).toFixed(0)}%`,
}),
],
})
Plot.plot({
marginLeft: 300,
x: {
domain: customXDomain,
},
marks: [
Plot.ruleX([0]),
Plot.barX(data, {
x: (d) => customXDomain[1],
y: "Response_in_Text",
fill: "slategrey",
opacity: 0.25,
}),
Plot.barX(data, {
x: "count",
y: "Response_in_Text",
sort: { y: "x", reverse: true },
}),
Plot.text(data, {
x: (d) => customXDomain[1],
y: "Response_in_Text",
text: (d) => `${((d.count / customXDomain[1]) * 100).toFixed(0)}%`,
dx: -5,
textAnchor: "end",
fill: "black",
}),
Plot.axisX({
tickFormat: (d) => `${((d / customXDomain[1]) * 100).toFixed(0)}%`,
}),
],
})
Plot.plot({
marginLeft: 300,
width: 1000,
x: {
percent: true
},
marks: [
Plot.ruleX([0]),
Plot.barX(data, {
x: 1,
y: "Response_in_Text",
fill: "slategrey",
opacity: 0.25
}),
Plot.barX(data, {
x: (d) => d.count / n,
y: "Response_in_Text",
sort: { y: "x", reverse: true }
}),
Plot.text(data, {
x: 1,
y: "Response_in_Text",
text: (d) => `${((d.count / n) * 100).toFixed(0)}%`,
dx: -5,
textAnchor: "end",
fill: "black"
}),
Plot.axisX({
tickFormat: (d) => `${d.toFixed(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.
