Public
Edited
Apr 4, 2023
featureNames = ['x','y']
{
// Generate XOR dataset
const numSamples = 1000;
const data = [];
for (let i = 0; i < numSamples; i++) {
const x = Math.random() < 0.5 ? Math.random() * 0.5 : Math.random() * 0.5 + 0.5;
const y = Math.random() < 0.5 ? Math.random() * 0.5 : Math.random() * 0.5 + 0.5;
const label = x < 0.5 ^ y < 0.5 ? 1 : 0;
data.push({ x, y, target: label });
}
const colorMap = {
0: "orange", // set color for target 0 to orange
1: "blue", // set color for target 1 to blue
}
// Plot dataset
return Plot.plot({
marks: [
Plot.dot(data, {
x: featureNames[0],
y: featureNames[1],
fill: (datum) => colorMap[datum.target] // use color map to set point color
})
]
});
}
{
// Generate dataset
const numSamples = 1000;
const circleRadius = 5;
const noise = 0.01;
const data = [];
for (let i = 0; i < numSamples; i++) {
// Generate random point in circle
const radius = Math.random() * circleRadius;
const angle = Math.random() * 2 * Math.PI;
const x = radius * Math.cos(angle) + (Math.random() - 0.5) * noise;
const y = radius * Math.sin(angle) + (Math.random() - 0.5) * noise;
// Assign label based on distance from center
const distanceFromCenter = Math.sqrt(x ** 2 + y ** 2);
const label = distanceFromCenter > circleRadius / 2 ? 1 : 0;
// Add point to dataset
data.push({ x, y, target: label });
}
const colorMap = {
0: "orange", // set color for target 0 to orange
1: "blue", // set color for target 1 to blue
}
// Plot dataset
return Plot.plot({
marks: [
Plot.dot(data, {
x: featureNames[0],
y: featureNames[1],
fill: (datum) => colorMap[datum.target] // use color map to set point color
})
]
});
}
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.
