draft 1 of tutorial - Getting Started with Vector Search Using Redis in NodeJS

Author: PrasanKumar93

docs/howtos/solutions/vector/getting-started-vector/chart/common.js

@@ -0,0 +1,30 @@
+// Sample data
+const products = [
+  {
+    name: 'Puma Men Race Black Watch',
+    price: 150,
+    quality: 5,
+    popularity: 8,
+  },
+  {
+    name: 'Puma Men Top Fluctuation Red Black Watch',
+    price: 180,
+    quality: 7,
+    popularity: 6,
+  },
+  {
+    name: 'Inkfruit Women Behind Cream Tshirt',
+    price: 5,
+    quality: 9,
+    popularity: 7,
+  },
+];
+
+const dataWithAttributes = products.map((product) => ({
+  x: product.price,
+  y: product.quality,
+  label: product.name,
+}));
+
+const product1Point = { x: products[0].price, y: products[0].quality };
+const product2Point = { x: products[1].price, y: products[1].quality };

docs/howtos/solutions/vector/getting-started-vector/chart/cosine.js

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+
+const ctxCosine = document
+  .getElementById('productChartCosine')
+  .getContext('2d');
+
+function cosineSimilarity(point1, point2) {
+  let dotProduct = point1.x * point2.x + point1.y * point2.y;
+  let magnitudePoint1 = Math.sqrt(
+    Math.pow(point1.x, 2) + Math.pow(point1.y, 2),
+  );
+  let magnitudePoint2 = Math.sqrt(
+    Math.pow(point2.x, 2) + Math.pow(point2.y, 2),
+  );
+  return dotProduct / (magnitudePoint1 * magnitudePoint2);
+}
+
+const cosineSim = cosineSimilarity(product1Point, product2Point);
+
+const scatterChartCosine = new Chart(ctxCosine, {
+  type: 'scatter',
+  data: {
+    datasets: [
+      {
+        label: 'Products',
+        data: dataWithAttributes,
+        pointBackgroundColor: ['black', 'red', 'bisque'],
+        pointRadius: 5,
+      },
+      {
+        label: 'Vector for Product-1',
+        data: [{ x: 0, y: 0 }, product1Point],
+        showLine: true,
+        fill: false,
+        borderColor: 'black',
+        pointRadius: [0, 5],
+        lineTension: 0,
+      },
+      {
+        label: 'Vector for Product-2',
+        data: [{ x: 0, y: 0 }, product2Point],
+        showLine: true,
+        fill: false,
+        borderColor: 'red',
+        pointRadius: [0, 5],
+        lineTension: 0,
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: `Cosine Similarity between Product-1 and Product-2 is ${cosineSim}`,
+      },
+    },
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        title: {
+          display: true,
+          text: 'Price ($)',
+        },
+        ticks: {
+          beginAtZero: true,
+        },
+        min: 0, // Ensure it starts from 0
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Quality (1-10)',
+        },
+        ticks: {
+          beginAtZero: true,
+        },
+        min: 0, // Ensure it starts from 0
+      },
+    },
+    tooltips: {
+      callbacks: {
+        title: function (tooltipItem, data) {
+          return data.datasets[0].data[tooltipItem[0].index].label;
+        },
+      },
+    },
+  },
+});

docs/howtos/solutions/vector/getting-started-vector/chart/euclidean.js

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const ctx = document.getElementById('productChartEuclidean').getContext('2d');
+
+function euclideanDistance(point1, point2) {
+  return Math.sqrt(
+    Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2),
+  );
+}
+
+const distance = euclideanDistance(product1Point, product2Point);
+
+const scatterChart = new Chart(ctx, {
+  type: 'scatter',
+  data: {
+    datasets: [
+      {
+        label: 'Products',
+        data: dataWithAttributes,
+        pointBackgroundColor: ['black', 'red', 'bisque'],
+        pointRadius: 5,
+      },
+      {
+        label: `Euclidean Distance: ${distance.toFixed(2)}`,
+        data: [product1Point, product2Point],
+        showLine: true,
+        fill: false,
+        borderColor: 'green',
+        pointRadius: 0,
+        lineTension: 0,
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: `Euclidean Distance between Product-1 and Product-2`,
+      },
+    },
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        title: {
+          display: true,
+          text: 'Price ($)',
+        },
+        ticks: {
+          beginAtZero: true,
+        },
+        min: 0, // Ensure it starts from 0
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Quality (1-10)',
+        },
+        ticks: {
+          beginAtZero: true,
+        },
+        min: 0, // Ensure it starts from 0
+      },
+    },
+    tooltips: {
+      callbacks: {
+        title: function (tooltipItem, data) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          return data.datasets[0].data[tooltipItem[0].index].label;
+        },
+      },
+    },
+  },
+});

docs/howtos/solutions/vector/getting-started-vector/chart/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Product Attributes Visualization</title>
+    <style>
+      .test {
+        background-color: bisque;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.3"></script>
+
+    <div style="height: 300px">
+      <canvas id="productChartEuclidean"></canvas>
+    </div>
+    <br />
+    <br />
+    <div style="height: 300px">
+      <canvas id="productChartCosine"></canvas>
+    </div>
+
+    <script src="./common.js"></script>
+    <script src="./euclidean.js"></script>
+    <script src="./cosine.js"></script>
+  </body>
+</html>