Plot.plot({
marginLeft: 70,
marks: [
Plot.link([...sorted.slice(0, 10), ...sorted.slice(-11, -1)], {
x1: "q1",
x2: "q3",
y: (d) => String(d["zip5"]),
stroke: "grey"
}),
Plot.dot([...sorted.slice(0, 10), ...sorted.slice(-11, -1)], {
x: "q1",
fill: "grey",
stroke: "white",
y: (d) => String(d["zip5"]),
sort: { y: "x", reverse: true },
title: "zip5"
}),
Plot.dot([...sorted.slice(0, 10), ...sorted.slice(-11, -1)], {
x: "q3",
fill: "grey",
stroke: "white",
y: (d) => String(d["zip5"]),
sort: { y: "x", reverse: true },
title: "zip5"
}),
Plot.dot([...sorted.slice(0, 10), ...sorted.slice(-11, -1)], {
x: "median",
y: (d) => String(d["zip5"]),
sort: { y: "x", reverse: true },
title: "zip5"
}),
Plot.text([...sorted.slice(0, 10), ...sorted.slice(-11, -1)], {
y: (d) => String(d["zip5"]),
x: "median",
text: function (d) {
return d3.format("$.3s")(d["median"]);
},
dy: -6,
dx: 5
}),
Plot.ruleX([0])
]
})