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