Published
Edited
Nov 15, 2021
Insert cell
Insert cell
Insert cell
sales = [
{units: 10, fruit: "fig"},
{units: 20, fruit: "date"},
{units: 40, fruit: "plum"},
{units: 30, fruit: "plum"}
]
Insert cell
Insert cell
Plot.dot(sales, {x: "units", y: "fruit"}).plot()
Insert cell
Insert cell
Insert cell
Plot.dot(sales, {x: d => d.units * 1000, y: d => d.fruit}).plot()
Insert cell
Insert cell
Plot.dot(sales, {x: d => d.units, y: d => d.fruit}).plot({x: {label: "units →"}})
Insert cell
Insert cell
index = [0, 1, 2, 3] // any array of suitable length
Insert cell
units = [10, 20, 40, 30] // x₁, x₂, …
Insert cell
fruits = ["fig", "date", "plum", "plum"] // y₁, y₂, …
Insert cell
Plot.dot(index, {x: units, y: fruits}).plot()
Insert cell
Insert cell
xy = [
[10, "fig"], // x₁, y₁
[20, "date"], // x₂, y₂
[40, "plum"], // etc.
[30, "plum"]
]
Insert cell
Plot.dot(xy).plot()
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot([[10, "fig"]]), // x₁, y₁
Plot.dot([[20, "date"]]), // x₂, y₂
Plot.dot([[40, "plum"]]), // etc.
Plot.dot([[30, "plum"]])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(sales, {x: "units", y: "fruit"}),
Plot.ruleX([0]) // a rule at x = 0
]
})
Insert cell
Insert cell
Plot.barX(sales, {x: "units", y: "fruit"}).plot() // bars extends from x = 0
Insert cell
Insert cell
Insert cell
Plot.barX(sales, {x1: 0, x2: "units", y: "fruit"}).plot()
Insert cell
Insert cell
Plot.barX(sales, {x1: 0, x2: "units", y: "fruit", fillOpacity: 0.5}).plot()
Insert cell
Insert cell
Plot.barX(sales, Plot.groupY({x: "sum"}, {x: "units", y: "fruit"})).plot()
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: "steelblue"}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: "fruit"}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: d => d.fruit}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: d => d.units > 20 ? "black" : "red"}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Plot.plot({
color: {
domain: ["small", "big"],
range: ["red", "black"]
},
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: d => d.units > 20 ? "big" : "small"}),
Plot.ruleX([0])
]
})
Insert cell
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