Public
Edited
Nov 29, 2023
temp@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data
X
zvalue
Y
label
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marginTop: 15,
color: { legend: true },
y: {axis: null},
marks: [
Plot.barX(data, {
x: "zvalue",
y: "label",
fill: "direction",
channels: {
"Query ID": "query_id",
url: "url"
},
tip: {
format: {
direction: true,
query_id: true,
zvalue: (d) => `${d}m`,
}
}
}),
Plot.textX(data, {
filter: (d) => d.direction == "improvement",
x: "zvalue", y: "label", text: "query_id",
textAnchor: "end",
dx: -4
}),
Plot.textX(data, {
filter: (d) => d.direction == "regression",
x: "zvalue", y: "label", text: "query_id",
textAnchor: "start",
dx: 4
}),
Plot.arrow(data, Plot.stackX(Plot.selectMaxX({
x: "zvalue",
insetStart:10,
x: "zvalue",
y: () => "label1",
dy: -20
}))),
Plot.arrow(data, Plot.stackX(Plot.selectMinX({
x: "zvalue",
insetStart:10,
x: "zvalue",
y: () => "label1",
dy: -20
}))),
Plot.textX(data, Plot.stackX(Plot.selectMaxX({
filter: (d) => d.direction == "improvement",
x: "zvalue",
insetStart:10,
x: (d) => Math.max(d.zvalue),
y: () => "label1",
dy: -20,
}))),
Plot.textX(data, {
filter: (d) => d.zvalue == Math.max(d.zvalue) && d.direction == "improvement",
x: (d) => Math.max(d.zvalue),
y: () => "label1",
text: "direction",
textAnchor: "start",
dy: -20
}),
Plot.ruleX([0])
]
})
Plot.plot({
marginTop: 0,
// marginBottom: 0,
marginLeft: 2,
marks: [
Plot.arrow(data, {
filter: (d) => d.direction == "improvement",
x1: 1,
x2: (d) => Math.max(d.zvalue),
y: 1
}),
Plot.textX(data, {
filter: (d) => d.direction == "improvement",
x: (d) => Math.max(d.zvalue),
y: 1,
text: "direction",
textAnchor: "end",
dy: -15
}),
Plot.textX(data, {
filter: (d) => d.direction == "regression",
x: (d) => Math.min(d.zvalue),
y: 1,
text: "direction",
textAnchor: "start",
dy: -15
}),
Plot.arrow(data, {
filter: (d) => d.direction == "regression",
x1: -1,
x2: (d) => Math.min(d.zvalue),
y: 1
}),
Plot.axisY({label: null})
]
})
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.
