File size: 1,995 Bytes
8765030
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import React from 'react';
import Plot from 'react-plotly.js';

export default function EmbeddingPlot({words}) {
  const vector1 = [2, 4, 5];
  const vector2 = [-1, 3, 4];

  return (
    <Plot
      data={[
        {
          // Vector path
          x: [0, 2], // Start at origin and end at (2, -1, 0)
          y: [0, -1],
          z: [0, 0],
          type: "scatter3d",
          mode: "lines+markers",
          line: {
            width: 6, // Line width
            color: "red",
          },
          marker: {
            size: 5,
            color: "red",
          },
        },
        {
          // Cone at the end of the vector
          type: "cone",
          x: [2], // Position of the cone
          y: [-1],
          z: [0],
          u: [2], // Direction of the cone
          v: [-1],
          w: [0],
          sizemode: "absolute",
          sizeref: 0.2,
          showscale: false,
          color: "red",
        },
        {
          // Vector path
          x: [0, -2], // Start at origin and end at (-2, 1, 0)
          y: [0, 1],
          z: [0, 0],
          type: "scatter3d",
          mode: "lines+markers",
          line: {
            width: 6, // Line width
            color: "blue",
          },
          marker: {
            size: 5,
            color: "blue",
          },
        },
        {
          // Cone at the end of the vector
          type: "cone",
          x: [-2], // Position of the cone
          y: [1],
          z: [0],
          u: [-2], // Direction of the cone
          v: [1],
          w: [0],
          sizemode: "absolute",
          sizeref: 0.2,
          showscale: false,
          color: "blue",
        },
      ]}
      
      layout={{
        width: 400,
        height: 400,
        title: "3D Plot of Vectors",
        scene: {
          xaxis: { title: "X Axis" },
          yaxis: { title: "Y Axis" },
          zaxis: { title: "Z Axis" },
        },
        autosize: true,
      }}
    />
  );
};