Public
Edited
Sep 6, 2023
Insert cell
Insert cell
import { aq, op } from '@uwdata/arquero'
Insert cell
dt = aq.table({
u: ['pos', 'pos', 'neg', 'pos'],
label: ['this is some text for a', 'this is other text for a', 'this is some text for b', 'this is other text for b'],
value: [5, 6, -6, 8]
})
Insert cell
dt.derive({ col3: d => d.value > 0 ? 1000 : d.value }).view()
Insert cell
dt.numRows()*100
Insert cell
Plot.plot({
marks: [
Plot.barX(dt, {
y: "label",
x: "value",
fill: "u"
})
]}
)
Insert cell
Plot.plot({
marks: [
Plot.barX(dt, {
y: "label",
x: "value",
fill: "u"
}),
Plot.axisY({x: 0})
]}
)
Insert cell
Plot.plot({
axis: null,
x: {
axis: "bottom"
},
marks: [
Plot.barX(dt, {
y: "label",
x: "value",
fill: "u"
}),
Plot.text(dt, {
x: 0,
y: "label",
filter: d => d.value >= 0,
text: "label",
textAnchor: "start",
dx: 0,
fontSize: 11
}
),
Plot.text(dt, {
x: "value",
y: "label",
filter: d => d.value < 0,
text: "label",
textAnchor: "start",
dx: 0,
fontSize: 11
}
)
]}
)
Insert cell
Plot.plot({
axis: null,
x: {
axis: "bottom",
labelAnchor: "center"
},
marks: [
Plot.barX(dt, {
y: "label",
x: "value",
fill: (d) => d.value > 0,
sort: { y: "x" }
}),
d3
.groups(dt, (d) => d.value > 0)
.map(([posneg, dat]) => [
Plot.axisY({
x: 0,
ticks: dat.map((d) => d.label),
tickSize: 0,
anchor: posneg ? "left" : "right"
}),
]),
]}
)
Insert cell
Plot.plot({
axis: null,
x: {
axis: "bottom",
labelAnchor: "center"
},
marks: [
Plot.barX(dt, {
y: "label",
x: "value",
fill: (d) => d.value > 0,
sort: { y: "x" }
}),
d3
.groups(dt, (d) => d.value > 0)
.map(([posneg, dat]) => [
Plot.axisY({
x: 0,
ticks: dat.map((d) => d.label),
tickSize: 0,
anchor: posneg ? "left" : "right"
}),
]),
]}
)
Insert cell
foo = [1, 2]
Insert cell
foo[0]
Insert cell

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.
Learn more