Public
Edited
May 31, 2023
pts = [
{x: 3, y: 1, centroid: false, label: 2},
{x: 6, y: 2, centroid: false, label: 2},
{x: 0, y: 4, centroid: false, label: 1},
{x: 2, y: 1, centroid: false, label: 2},
{x: 4, y: 8, centroid: false, label: 1},
{x: 5, y: 0, centroid: false, label: 2},
{x: 3, y: 10/3, centroid: true, label: 1, round: "1st round"},
{x: 11/3, y: 2, centroid: true, label: 2, round: "1st round"},
{x: 2, y: 6, centroid: true, label: 1, round: "2nd round"},
{x: 4, y: 1, centroid: true, label: 2, round: "2nd round"}
];
{
const plot1 = vl.markPoint({filled: true, size: 100})
.data(pts)
.transform(
vl.filter('!datum.centroid')
)
.encode(
vl.x().fieldQ('x').title('X1'),
vl.y().fieldQ('y').title('X2'),
vl.color().fieldN('label').title('Label')
)
const plot2 = vl.markSquare({size: 100})
.data(pts)
.transform(
vl.filter('datum.centroid')
)
.encode(
vl.x().fieldQ('x').title('X1'),
vl.y().fieldQ('y').title('X2'),
vl.color().fieldN('label').title('Label')
)
const plot3 = vl.markText({dy: 15})
.data(pts)
.transform(
vl.filter('datum.centroid')
)
.encode(
vl.x().fieldQ('x').title('X1'),
vl.y().fieldQ('y').title('X2'),
vl.color().fieldN('label').title('Label'),
vl.text().fieldN('round')
)
return vl.layer(plot1, plot2, plot3)
.title("K-mean clustering")
.width(400)
.height(400)
.render()
}
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.
