File size: 32,103 Bytes
d0a6b4f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 |
{% extends "layout.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic DBSCAN Clustering Visualization</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
/* styles/style.css content goes here */
/* No specific custom CSS needed for this basic example, Tailwind handles most of it. */
body {
font-family: sans-serif;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center p-6">
<h1 class="text-4xl font-bold text-gray-800 mb-8 text-center">Dynamic DBSCAN Clustering Visualization</h1>
<div class="container mx-auto bg-white shadow-lg rounded-lg p-6 mb-8 w-full max-w-6xl">
<h2 class="text-3xl font-bold text-gray-800 mb-4">Understanding DBSCAN</h2>
<p class="mb-4 text-gray-700">
DBSCAN is a <strong class="font-semibold">density-based clustering algorithm</strong> that groups data points that are closely packed together and marks outliers as noise based on their density in the feature space. It identifies clusters as dense regions in the data space separated by areas of lower density. Unlike K-Means or hierarchical clustering which assumes clusters are compact and spherical, DBSCAN performs well in handling real-world data irregularities such as:
</p>
<ul class="list-disc list-inside mb-4 text-gray-700 ml-4">
<li><strong class="font-semibold">Arbitrary-Shaped Clusters:</strong> Clusters can take any shape, not just circular or convex.</li>
<li><strong class="font-semibold">Noise and Outliers:</strong> It effectively identifies and handles noise points without assigning them to any cluster.</li>
</ul>
<p class="mb-4 text-gray-700">
The figure below shows a dataset with clustering algorithms: K-Means and Hierarchical handling compact, spherical clusters with varying noise tolerance while DBSCAN manages arbitrary-shaped clusters and noise handling.
</p>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Key Parameters in DBSCAN</h3>
<p class="mb-2 text-gray-700">
<strong class="font-semibold">1. eps ($$\epsilon$$):</strong> This defines the radius of the neighborhood around a data point. If the distance between two points is less than or equal to $$\epsilon$$, they are considered neighbors. A common method to determine $\epsilon$ is by analyzing the <strong class="font-semibold">k-distance graph</strong>. Choosing the right $\epsilon$ is important:
</p>
<ul class="list-disc list-inside mb-4 text-gray-700 ml-4">
<li>If $$\epsilon$$ is too small, most points will be classified as noise.</li>
<li>If $$\epsilon$$ is too large, clusters may merge and the algorithm may fail to distinguish between them.</li>
</ul>
<p class="mb-2 text-gray-700">
<strong class="font-semibold">2. MinPts:</strong> This is the minimum number of points required within the $\epsilon$ radius to form a dense region. A general rule of thumb is to set MinPts $$$\ge D+1$$, where $$D$$ is the number of dimensions in the dataset.
</p>
<h3 class="text-2xl font-bold text-gray-800 mb-3">How Does DBSCAN Work?</h3>
<p class="mb-4 text-gray-700">
DBSCAN works by categorizing data points into three types:
</p>
<ul class="list-disc list-inside mb-4 text-gray-700 ml-4">
<li><strong class="font-semibold">Core points:</strong> which have a sufficient number of neighbors within a specified radius (epsilon).</li>
<li><strong class="font-semibold">Border points:</strong> which are near core points but lack enough neighbors to be core points themselves.</li>
<li><strong class="font-semibold">Noise points:</strong> which do not belong to any cluster.</li>
</ul>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Steps in the DBSCAN Algorithm</h3>
<ul class="list-decimal list-inside mb-4 text-gray-700 ml-4">
<li><strong class="font-semibold">Identify Core Points:</strong> For each point in the dataset, count the number of points within its $\epsilon$ neighborhood. If the count meets or exceeds MinPts, mark the point as a core point.</li>
<li><strong class="font-semibold">Form Clusters:</strong> For each core point that is not already assigned to a cluster, create a new cluster. Recursively find all <strong class="font-semibold">density-connected points</strong> (i.e., points within the $\epsilon$ radius of the core point) and add them to the cluster.</li>
<li><strong class="font-semibold">Density Connectivity:</strong> Two points $a$ and $b$ are <strong class="font-semibold">density-connected</strong> if there exists a chain of points where each point is within the $\epsilon$ radius of the next, and at least one point in the chain is a core point. This chaining process ensures that all points in a cluster are connected through a series of dense regions.</li>
<li><strong class="font-semibold">Label Noise Points:</strong> After processing all points, any point that does not belong to a cluster is labeled as <strong class="font-semibold">noise</strong>.</li>
</ul>
<h3 class="text-2xl font-bold text-gray-800 mb-3">How this DBSCAN Visualization Handles User-Added Data</h3>
<p class="mb-4 text-gray-700">
In this interactive visualization, when you click the "Add New Point & Cluster" button, the new point you specify is appended to the existing dataset. Importantly, the entire DBSCAN clustering algorithm is then <strong class="font-semibold">re-run from scratch</strong> on this updated dataset. This means that:
</p>
<ul class="list-disc list-inside mb-4 text-gray-700 ml-4">
<li>The new point is treated as part of the original data, and its type (core, border, or noise) and cluster assignment are determined by the algorithm based on its density relative to all other points.</li>
<li>The cluster assignments and even the types (core/border/noise) of previously existing points might change, as the addition of a new point can alter the density landscape and connectivity.</li>
<li>The visualization dynamically updates to reflect these new cluster structures, showing the real-time effect of adding data on the DBSCAN clustering process.</li>
</ul>
</div>
<a href="/kmeans-Dbscan-image">
<button class="inline-block bg-gray-200 hover:bg-gray-300 centre text-gray-800 px-4 py-2 rounded shadow">🖼️ KMeans + DBSCAN Image Clustering</button>
</a>
<div class="container mx-auto bg-white shadow-lg rounded-lg p-6 w-full max-w-6xl">
<div class="controls grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
<div class="flex flex-col">
<label for="dimensions" class="text-gray-700 text-sm font-semibold mb-1">Dimensions:</label>
<select id="dimensions" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="2D">2D</option>
<option value="3D">3D</option>
</select>
</div>
<div class="flex flex-col">
<label for="eps" class="text-gray-700 text-sm font-semibold mb-1">Epsilon (eps):</label>
<input type="number" id="eps" value="1.5" step="0.1" min="0.1" max="5" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex flex-col">
<label for="min-pts" class="text-gray-700 text-sm font-semibold mb-1">Min. Points (minPts):</label>
<input type="number" id="min-pts" value="5" min="2" max="20" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex flex-col">
<label for="data-points-total" class="text-gray-700 text-sm font-semibold mb-1">Total Data Points:</label>
<input type="number" id="data-points-total" value="150" min="50" max="1000" step="10" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex flex-col">
<label for="new-point-x" class="text-gray-700 text-sm font-semibold mb-1">New Point X:</label>
<input type="number" id="new-point-x" value="0" step="0.1" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex flex-col" id="new-point-y-wrapper">
<label for="new-point-y" class="text-gray-700 text-sm font-semibold mb-1">New Point Y:</label>
<input type="number" id="new-point-y" value="0" step="0.1" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="flex flex-col hidden" id="new-point-z-wrapper">
<label for="new-point-z" class="text-gray-700 text-sm font-semibold mb-1">New Point Z:</label>
<input type="number" id="new-point-z" value="0" step="0.1" class="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button id="add-point-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
Add New Point & Cluster
</button>
<button id="reset-data-btn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
Reset Data & Recluster
</button>
</div>
<div id="plotly-graph" class="w-full h-96 md:h-[500px] lg:h-[600px] border border-gray-300 rounded-lg"></div>
</div>
<script>
// src/dbscan.js content goes here
class DBSCAN {
constructor(eps, minPts) {
this.eps = eps; // Maximum distance between two samples for one to be considered as in the neighborhood of the other.
this.minPts = minPts; // The number of samples (or total weight) in a neighborhood for a point to be considered as a core point.
this.clusters = []; // Stores arrays of point indices for each cluster
this.noisePoints = new Set(); // Stores indices of noise points
this.pointLabels = []; // Stores cluster ID for each point (or -1 for noise)
this.X = []; // Store data internally for easier access
}
/**
* Calculates Euclidean distance between two points.
* @param {Array<number>} p1
* @param {Array<number>} p2
* @returns {number} Distance
*/
_euclideanDistance(p1, p2) {
let sum = 0;
for (let i = 0; i < p1.length; i++) {
sum += Math.pow(p1[i] - p2[i], 2);
}
return Math.sqrt(sum);
}
/**
* Finds all neighbors of a given point within eps distance.
* @param {number} pointIndex - Index of the point in X.
* @returns {Array<number>} Array of indices of neighbor points.
*/
_getNeighbors(pointIndex) {
const neighbors = [];
const currentPoint = this.X[pointIndex];
for (let i = 0; i < this.X.length; i++) {
if (i === pointIndex) continue;
if (this._euclideanDistance(currentPoint, this.X[i]) <= this.eps) {
neighbors.push(i);
}
}
return neighbors;
}
/**
* Performs DBSCAN clustering.
* @param {Array<Array<number>>} X - Array of feature vectors.
* @returns {Array<number>} An array where each element is the cluster ID of the corresponding point, or -1 for noise.
*/
fit(X) {
if (X.length === 0) {
console.warn("No data for DBSCAN clustering.");
this.clusters = [];
this.noisePoints = new Set();
this.pointLabels = [];
this.X = [];
return [];
}
this.X = X;
this.pointLabels = Array(X.length).fill(0); // 0: unvisited, -1: noise, >=1: cluster ID
this.clusters = [];
this.noisePoints = new Set();
let clusterId = 0;
for (let i = 0; i < X.length; i++) {
if (this.pointLabels[i] !== 0) { // Already visited or assigned
continue;
}
const neighbors = this._getNeighbors(i);
if (neighbors.length < this.minPts) {
this.pointLabels[i] = -1; // Mark as noise (initially)
this.noisePoints.add(i);
} else {
clusterId++;
this.pointLabels[i] = clusterId;
this.clusters.push(new Set([i])); // Start new cluster
let seedSet = [...neighbors];
while (seedSet.length > 0) {
const currentNeighborIndex = seedSet.shift(); // Get next neighbor from seed set
if (this.pointLabels[currentNeighborIndex] === -1) {
this.pointLabels[currentNeighborIndex] = clusterId; // Noise becomes border point
this.noisePoints.delete(currentNeighborIndex);
this.clusters[clusterId - 1].add(currentNeighborIndex);
}
if (this.pointLabels[currentNeighborIndex] !== 0) {
// Already visited and assigned to another cluster (border point) or same cluster
continue;
}
this.pointLabels[currentNeighborIndex] = clusterId;
this.clusters[clusterId - 1].add(currentNeighborIndex);
const currentNeighborNeighbors = this._getNeighbors(currentNeighborIndex);
if (currentNeighborNeighbors.length >= this.minPts) {
// Current neighbor is a core point, add its neighbors to the seed set
for (const n of currentNeighborNeighbors) {
if (this.pointLabels[n] === 0 || this.pointLabels[n] === -1) { // Only add unvisited or noise points
seedSet.push(n);
}
}
}
}
}
}
return this.pointLabels;
}
/**
* Determines the cluster label for a single new observation.
* This is an "after-the-fact" prediction, not part of the core DBSCAN algorithm.
* A new point is assigned if it's a border point to an existing cluster.
* Otherwise, it's considered noise relative to the current clusters.
* @param {Array<number>} observation - The new data point's features.
* @returns {number} The cluster ID, or -1 if noise.
*/
predict(observation) {
if (this.clusters.length === 0) {
return -1; // No clusters formed yet
}
// Check if it's within eps of any existing core point
for (let i = 0; i < this.X.length; i++) {
if (this._euclideanDistance(observation, this.X[i]) <= this.eps) {
const label = this.pointLabels[i];
if (label !== -1) { // It's part of a cluster (core or border)
// We can assign it to this cluster. In a strict sense,
// DBSCAN doesn't have a direct 'predict' function.
// This is an approximation: assign to the cluster of the nearest point within eps.
return label;
}
}
}
return -1; // Noise
}
// Helper to get point types for visualization
getPointTypes() {
const types = Array(this.X.length).fill(null); // 0: core, 1: border, 2: noise
for (let i = 0; i < this.X.length; i++) {
if (this.pointLabels[i] === -1) {
types[i] = 2; // Noise
} else {
const neighbors = this._getNeighbors(i);
if (neighbors.length >= this.minPts) {
types[i] = 0; // Core point
} else {
types[i] = 1; // Border point
}
}
}
return types;
}
}
// src/main.js content goes here
document.addEventListener('DOMContentLoaded', () => {
const plotlyGraph = document.getElementById('plotly-graph');
const dimensionsSelect = document.getElementById('dimensions');
const epsInput = document.getElementById('eps');
const minPtsInput = document.getElementById('min-pts');
const dataPointsTotalInput = document.getElementById('data-points-total');
const addPointBtn = document.getElementById('add-point-btn');
const resetDataBtn = document.getElementById('reset-data-btn');
const newPointXInput = document.getElementById('new-point-x');
const newPointYInput = document.getElementById('new-point-y');
const newPointZInput = document.getElementById('new-point-z');
const newPointYWrapper = document.getElementById('new-point-y-wrapper');
const newPointZWrapper = document.getElementById('new-point-z-wrapper');
let currentData = []; // Stores { x, y, (z) }
let dbscanModel;
let currentDimensions = dimensionsSelect.value; // "2D" or "3D"
// Use a colorscale that can represent different clusters. Noise will be a distinct color.
const clusterColorscale = 'Plotly3';
const noiseColor = '#808080'; // Grey for noise points
// --- Helper Functions ---
function generateRandomData(totalPoints, dimensions, numClustersHint = 3, spread = 2) {
const data = [];
// Generate points around 'numClustersHint' distinct centers to make clustering visible
const centers = Array.from({ length: numClustersHint }, () => ({
x: (Math.random() - 0.5) * 15, // Wider spread for clusters
y: (Math.random() - 0.5) * 15,
z: (Math.random() - 0.5) * 15
}));
for (let i = 0; i < totalPoints; i++) {
// Assign points to 'hint' clusters for initial visual separation
const center = centers[Math.floor(Math.random() * numClustersHint)];
const x = center.x + (Math.random() - 0.5) * spread;
const y = center.y + (Math.random() - 0.5) * spread;
if (dimensions === "2D") {
data.push({ x: x, y: y });
} else { // 3D
const z = center.z + (Math.random() - 0.5) * spread;
data.push({ x: x, y: y, z: z });
}
}
return data;
}
function prepareDataForModel(data) {
return data.map(d => {
if (currentDimensions === "2D") {
return [d.x, d.y];
} else {
return [d.x, d.y, d.z];
}
});
}
function createPlotlyTraces(data, clusterAssignments, pointTypes, type) {
const traces = [];
const uniqueClusters = [...new Set(clusterAssignments)].filter(id => id !== -1).sort((a,b)=>a-b);
const maxClusterId = Math.max(...uniqueClusters, 0); // For colorscale range
// 0: core, 1: border, 2: noise
const symbolMap = { 0: 'circle', 1: 'square', 2: 'diamond' }; // Different shapes for point types
const sizeMap = { 0: 10, 1: 8, 2: 6 }; // Different sizes
const opacityMap = { 0: 1.0, 1: 0.8, 2: 0.6 };
// Trace for each cluster (and noise)
uniqueClusters.forEach(clusterId => {
const clusterData = data.filter((_, i) => clusterAssignments[i] === clusterId);
const clusterPointTypes = pointTypes.filter((_, i) => clusterAssignments[i] === clusterId);
// Group by point type within each cluster for distinct symbols/sizes
[0, 1].forEach(pointType => { // Core (0) and Border (1)
const filteredData = clusterData.filter((_, i) => clusterPointTypes[i] === pointType);
if (filteredData.length === 0) return;
if (type === "2D") {
traces.push({
x: filteredData.map(d => d.x),
y: filteredData.map(d => d.y),
mode: 'markers',
type: 'scatter',
name: `Cluster ${clusterId} (${pointType === 0 ? 'Core' : 'Border'})`,
marker: {
color: clusterId, // Color by cluster
colorscale: clusterColorscale,
cmin: 0, cmax: maxClusterId,
symbol: symbolMap[pointType],
size: sizeMap[pointType],
opacity: opacityMap[pointType],
line: { color: 'white', width: 1 }
},
legendgroup: `cluster${clusterId}`, // Group in legend
showlegend: true
});
} else { // 3D
traces.push({
x: filteredData.map(d => d.x),
y: filteredData.map(d => d.y),
z: filteredData.map(d => d.z),
mode: 'markers',
type: 'scatter3d',
name: `Cluster ${clusterId} (${pointType === 0 ? 'Core' : 'Border'})`,
marker: {
color: clusterId,
colorscale: clusterColorscale,
cmin: 0, cmax: maxClusterId,
symbol: symbolMap[pointType],
size: sizeMap[pointType],
opacity: opacityMap[pointType],
line: { color: 'white', width: 1 }
},
legendgroup: `cluster${clusterId}`,
showlegend: true
});
}
});
});
// Trace for Noise Points
const noiseData = data.filter((_, i) => clusterAssignments[i] === -1);
if (noiseData.length > 0) {
if (type === "2D") {
traces.push({
x: noiseData.map(d => d.x),
y: noiseData.map(d => d.y),
mode: 'markers',
type: 'scatter',
name: 'Noise Points',
marker: {
color: noiseColor,
symbol: symbolMap[2], // Diamond for noise
size: sizeMap[2],
opacity: opacityMap[2],
line: { color: 'white', width: 1 }
},
showlegend: true
});
} else { // 3D
traces.push({
x: noiseData.map(d => d.x),
y: noiseData.map(d => d.y),
z: noiseData.map(d => d.z),
mode: 'markers',
type: 'scatter3d',
name: 'Noise Points',
marker: {
color: noiseColor,
symbol: symbolMap[2],
size: sizeMap[2],
opacity: opacityMap[2],
line: { color: 'white', width: 1 }
},
showlegend: true
});
}
}
return traces;
}
function getAxisRanges(data, dimensions) {
if (data.length === 0) {
return {
x: [-10, 10],
y: [-10, 10],
z: [-10, 10]
};
}
const minX = Math.min(...data.map(d => d.x)) - 2;
const maxX = Math.max(...data.map(d => d.x)) + 2;
const minY = Math.min(...data.map(d => d.y)) - 2;
const maxY = Math.max(...data.map(d => d.y)) + 2;
if (dimensions === "2D") {
return {
x: [minX, maxX],
y: [minY, maxY]
};
} else { // 3D
const minZ = Math.min(...data.map(d => d.z)) - 2;
const maxZ = Math.max(...data.map(d => d.z)) + 2;
return {
x: [minX, maxX],
y: [minY, maxY],
z: [minZ, maxZ]
};
}
}
function updateGraph() {
const X = prepareDataForModel(currentData);
if (X.length === 0) {
Plotly.purge(plotlyGraph); // Clear graph if no data
return;
}
dbscanModel = new DBSCAN(
parseFloat(epsInput.value),
parseInt(minPtsInput.value)
);
const clusterAssignments = dbscanModel.fit(X);
const pointTypes = dbscanModel.getPointTypes(); // Get core/border/noise info
const plotlyTraces = createPlotlyTraces(currentData, clusterAssignments, pointTypes, currentDimensions);
let layout;
const ranges = getAxisRanges(currentData, currentDimensions);
if (currentDimensions === "2D") {
layout = {
title: 'DBSCAN Clustering (2D)',
xaxis: { title: 'Feature 1', range: ranges.x },
yaxis: { title: 'Feature 2', range: ranges.y },
hovermode: 'closest',
showlegend: true
};
Plotly.newPlot(plotlyGraph, plotlyTraces, layout);
} else { // 3D
layout = {
title: 'DBSCAN Clustering (3D)',
scene: {
xaxis: { title: 'Feature 1', range: ranges.x },
yaxis: { title: 'Feature 2', range: ranges.y },
zaxis: { title: 'Feature 3', range: ranges.z },
},
hovermode: 'closest',
showlegend: true
};
Plotly.newPlot(plotlyGraph, plotlyTraces, layout);
}
}
// --- Event Listeners ---
dimensionsSelect.addEventListener('change', (event) => {
currentDimensions = event.target.value;
if (currentDimensions === "2D") {
newPointZWrapper.classList.add('hidden');
} else {
newPointZWrapper.classList.remove('hidden');
}
// Regenerate initial data for new dimensions
currentData = generateRandomData(
parseInt(dataPointsTotalInput.value),
currentDimensions
);
updateGraph();
});
epsInput.addEventListener('change', updateGraph);
minPtsInput.addEventListener('change', updateGraph);
dataPointsTotalInput.addEventListener('change', () => {
currentData = generateRandomData(
parseInt(dataPointsTotalInput.value),
currentDimensions
);
updateGraph();
});
addPointBtn.addEventListener('click', () => {
const x = parseFloat(newPointXInput.value);
const y = parseFloat(newPointYInput.value);
let newPointFeatures;
if (currentDimensions === "2D") {
newPointFeatures = { x: x, y: y };
} else { // 3D
const z = parseFloat(newPointZInput.value);
newPointFeatures = { x: x, y: y, z: z };
}
currentData.push(newPointFeatures);
updateGraph(); // This will re-run DBSCAN on the updated data
});
resetDataBtn.addEventListener('click', () => {
currentData = generateRandomData(
parseInt(dataPointsTotalInput.value),
currentDimensions
);
updateGraph();
});
// Initial setup
currentData = generateRandomData(
parseInt(dataPointsTotalInput.value),
currentDimensions
);
updateGraph();
});
</script>
</body>
</html>
{% endblock %} |