Plot.plot({
x: {tickFormat: Math.abs},
color: {domain: likert.order, scheme: "RdBu", legend: true},
marks: [
Plot.barX(
survey,
Plot.groupZ({x: "count"}, {fy: "Question", fill: "Response", ...likert})
),
Plot.ruleX([0])
]
})
likert = Likert([
["Strongly Disagree", -1],
["Disagree", -1],
["Neutral", 0],
["Agree", 1],
["Strongly Agree", 1]
])
Plot.plot({
x: { tickFormat: Math.abs, label: "# of answers" },
y: { tickSize: 0 },
color: {
legend: true,
domain: [
"Strongly Disagree",
"Disagree",
"Neutral",
"Agree",
"Strongly Agree"
],
scheme: "RdBu"
},
marks: [
Plot.barX(
survey,
Plot.groupY(
{ x: "count" },
{
fill: "Response",
order: [
"Strongly Disagree",
"Disagree",
"Neutral",
"Agree",
"Strongly Agree"
],
y: "Question"
}
)
)
]
})
sign = (label) => label.match(/neutral/i) ? 0 : label.match(/disagree/i) ? -1 : 1
Plot.plot({
color: {
domain: [
"Strongly Disagree",
"Disagree",
"Neutral",
"Agree",
"Strongly Agree"
],
scheme: "RdBu"
},
marks: [
Plot.barX(
survey,
Plot.groupY(
{ x: (d) => d.length * sign(d[0].Response) },
{
fill: "Response",
order: [
"Strongly Disagree",
"Disagree",
"Neutral",
"Agree",
"Strongly Agree"
],
y: "Question"
}
)
)
]
})
{
const { order, offset } = Likert([
["Strongly Disagree", -1],
["Disagree", -1],
["Neutral", 0],
["Agree", 1],
["Strongly Agree", 1]
]);
return Plot.plot({
x: normalize
? { tickFormat: "%", label: "answers (%)" }
: { tickFormat: Math.abs, label: "# of answers" },
y: { tickSize: 0 },
facet: { data: survey, y: "Question" },
color: { domain: order, scheme: "RdBu" },
marks: [
Plot.barX(
survey,
Plot.groupZ(
{ x: normalize ? "proportion-facet" : "count" },
{
fill: "Response",
stroke: "#777",
strokeWidth: 0.5,
order,
offset
}
)
),
Plot.textX(
survey,
Plot.stackX(
Plot.groupZ(
{ x: normalize ? "proportion-facet" : "count", text: "first" },
{
text: (d) => d.Response.replace(/[^A-Z]/g, ""),
z: "Response",
order,
offset
}
)
)
)
]
});
}
{
const { order, offset } = Likert([
["Strongly Disagree", -1],
["Disagree", -1],
["Neutral", 0],
["Agree", 1],
["Strongly Agree", 1]
]);
return Plot.plot({
x: normalize
? { tickFormat: "%", label: "answers (%)" }
: { tickFormat: Math.abs, label: "# of answers" },
y: { tickSize: 0 },
facet: { data: phobias, y: "Question" },
color: { domain: order, scheme: "RdBu" , legend: true},
marks: [
Plot.barX(
phobias,
Plot.groupZ(
{ x: normalize ? "proportion-facet" : "count" },
{
fill: "Response",
stroke: "#777",
strokeWidth: 0.5,
order,
offset
}
)
),
Plot.textX(
phobias,
Plot.stackX(
Plot.groupZ(
{ x: normalize ? "proportion-facet" : "count", text: "first" },
{
text: (d) => d.Response.replace(/[^A-Z]/g, ""),
z: "Response",
order,
offset
}
)
)
),
],
marginLeft: 120,
title: "Do you have a phobia of...",
subtitle: "#30DayChartChallenge Day 27 - Good/Bad",
caption: "https://observablehq.com/@dddanieltan/30daychartchallenge-day27-good-bad",
width: 800,
height: 300,
});
}
function Likert(responses) {
const map = new Map(responses);
return {
order: Array.from(map.keys()),
offset(I, X1, X2, Z) {
for (const stacks of I) {
for (const stack of stacks) {
const k = d3.sum(stack, (i) => (X2[i] - X1[i]) * (1 - map.get(Z[i]))) / 2;
for (const i of stack) {
X1[i] -= k;
X2[i] -= k;
}
}
}
}
};
}
survey = FileAttachment("survey.json").json()
phobias = FileAttachment("phobias@7.csv").csv({typed: true})
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.
