Published unlisted
Edited
Oct 3, 2021
2 stars
Plot.plot({
width: 1000,
x: {
padding: 0.83,
tickFormat: d3.timeFormat("%b")
},
y: {
transform: (d) => d / 1000000
},
marks: [
Plot.ruleY([200000000], { strokeDasharray: 5, stroke: "lightgrey" }),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y1",
fill: "orange",
dx: -21
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y2",
fill: "lightgreen",
dx: -7
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y3",
fill: "lightgrey",
dx: 7
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y4",
fill: "lightblue",
dx: 21
}
)
),
Plot.line(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y6",
stroke: "green",
curve: "monotone-x"
}
)
),
Plot.dot(
data,
Plot.groupX(
{ y: "sum" },
{ x: (d) => d3.utcMonth(d.x), y: "y6", fill: "green", stroke: "green" }
)
),
Plot.line(
data,
Plot.groupX(
{ y: "sum" },
{ x: (d) => d3.utcMonth(d.x), y: "y7", stroke: "red", curve: "step" }
)
),
Plot.ruleY([0])
]
})
Plot.plot({
marginBottom: 100,
x: {
grid: true,
tickRotate: -90,
padding: 0.8
},
y: {
grid: true,
transform: (d) => d / 1000000
},
marks: [
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{ x: (d) => d3.utcMonth(d.x), y: "y5", fill: "pink" }
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y1",
fill: "red",
dx: -15
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y2",
fill: "green",
dx: -5
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y3",
fill: "lightblue",
dx: 5
}
)
),
Plot.barY(
data,
Plot.groupX(
{ y: "sum" },
{
x: (d) => d3.utcMonth(d.x),
y: "y4",
fill: "orange",
dx: 15
}
)
),
Plot.line(
data,
Plot.groupX(
{ y: "sum" },
{ x: (d) => d3.utcMonth(d.x), y: "y5", stroke: "black" }
)
),
Plot.dot(
data,
Plot.groupX(
{ y: "sum" },
{ x: (d) => d3.utcMonth(d.x), y: "y5", stroke: "black" }
)
),
Plot.ruleY([0])
]
}).scale("x")
Plot.plot({
x: { grid: true },
y: {
grid: true,
transform: (d) => d / 1000000
},
marks: [
Plot.rectY(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y5", fill: "pink" }
)
),
Plot.rectY(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y1", fill: "red", insetRight: 40, dx: -20 }
)
),
Plot.rectY(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y2", fill: "green", insetRight: 40, dx: -10 }
)
),
Plot.rectY(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y3", fill: "lightblue", insetRight: 40, dx: 0 }
)
),
Plot.rectY(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y4", fill: "orange", insetRight: 40, dx: 10 }
)
),
Plot.line(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y5", stroke: "black" }
)
),
Plot.dot(
data,
Plot.binX(
{ y: "sum" },
{ x: (d) => d.x, thresholds: d3.utcMonth, y: "y5", stroke: "black" }
)
),
Plot.ruleY([0])
]
})
summarize({
data: data,
transform: "binX",
outputs: { y: "sum" },
options: { x: (d) => d.x, thresholds: d3.utcMonth, y: "y5" }
})
import { summarize } from "@ee2dev/plot-party"
import { Plot, d3 } from "@observablehq/plot"
data = (await FileAttachment("test_data.txt").json()).map((d) => ({
...d,
x: new Date(d.x)
}))
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.
