I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
plot = Plot.plot({
height: 500,
width: 640,
color: {
legend: true
},
marginLeft: 50,
marginBottom: 300,
y: {
domain: [0, 2]
},
x: {
nice: true,
tickRotate: -90,
label: ""
},
marks: [
Plot.barY(data, {
x: "case",
y: "value",
fill: "description"
// sort: { x: "case" }
}),
// Draw the line with the x coordinates determined by the cases
// and the y coordinates from our computation at the bottom.
Plot.line(
[
{
x: cases[2],
y: ys.y2
},
{
x: cases[2],
y: 2
},
{
x: cases[3],
y: 2
},
{
x: cases[3],
y: ys.y3
}
],
{ x: "x", y: "y", strokeWidth: 3 }
),
// Draw the arrow, which expects different input.
Plot.arrow([{ x1: cases[3], x2: cases[3], y1: 2, y2: ys.y3 }], {
x1: "x1",
x2: "x2",
y1: "y1",
y2: "y2"
// strokeWidth: 3
}),
// Draw the text
Plot.text([{ x: cases[2], y: 2, text: "-1.5" }], {
x: "x",
y: "y",
text: "text",
fontSize: 22,
dx: 65,
dy: -11
})
]
})
grouped = d3.group(data, (o) => o.case)
cases = Array.from(grouped.keys())
ys = {
let y2 = d3.sum(grouped.get(cases[2]).map((o) => +o.value));
let y3 = d3.sum(grouped.get(cases[3]).map((o) => +o.value));
return { y2, y3 };
}
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.
