I learn new things everyday. Now focusing on AI and NLP.
Public
Edited
Nov 24, 2022
Plot.dot(sales, {x: "units", y: "fruit"}).plot()
// ป้อนเป็น function ก็ได้
Plot.dot(sales, {x: d => d.units * 1000, y: d => d.fruit}).plot()
// ถ้าใช้ function ก็ต้องระบุ label เอง
Plot.dot(sales,
{x: d => d.units, y: d => d.fruit}
).plot({
x: {label: "units →"}
})
{
let index = [0, 1, 2, 3]
let units = [10, 20, 40, 30]
let fruits = ["fig", "date", "plum", "plum"]
return Plot.dot(index, {x: units, y: fruits}).plot()
}
{ // use default (x,y) data
let xy = [
[10, "fig"], // x₁, y₁
[20, "date"], // x₂, y₂
[40, "plum"], // etc.
[30, "plum"]
]
return Plot.dot(xy).plot()
}
// มี marks หลายๆ layer ก็ได้
Plot.plot({
marks: [
Plot.dot([[10, "fig"]]), // x₁, y₁
Plot.dot([[20, "date"]]), // x₂, y₂
Plot.dot([[40, "plum"]]), // etc.
Plot.dot([[30, "plum"]])
]
})
// ใช้สร้าง เส้นตั้ง
Plot.plot({
marks: [
Plot.dot(sales, {x: "units", y: "fruit"}),
Plot.ruleX([0, 45]) // a rule at x = 0
]
})
// barX, barY ก็ได้
Plot.barY(sales, {y: "units", x: "fruit"}).plot() // bars extends from x = 0
// plum มีซ้อนกัน แสดงด้วย opacity ได้
Plot.barX(sales, {x1: 0, x2: "units", y: "fruit", fillOpacity: 0.5}).plot()
// ใช้ group แล้ว sum แทน
Plot.barX(sales, Plot.groupY({x: "sum"}, {x: "units", y: "fruit"})).plot()
// เปลี่ยนสีตาม fruit
Plot.plot({
marks: [
Plot.barX(sales, {x: "units", y: "fruit", fill: "fruit"}),
Plot.ruleX([0])
]
})
// abstract color ได้, แถมได้ legend ด้วย
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])
]
})
Plot.formatIsoDate(new Date("2020-01-01"))
Plot.formatWeekday("es-MX", "long")(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.
