Dodata je komponenta za vizuelizaciju veštačke neuronske mreže.

6 files changed, 382 insertions, 2 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8c025c8b..3d909d7a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,6 +26,7 @@
         "bootstrap": "^5.1.3",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
+        "d3-graphviz": "^2.6.1",
         "mdb-angular-ui-kit": "^2.0.0",
         "ng-uikit-pro-standard": "^1.0.0",
         "ng2-charts": "^3.0.8",
@@ -33,7 +34,7 @@
         "ngx-cookie-service": "^13.1.2",
         "ngx-csv-parser": "^0.0.7",
         "rxjs": "~7.5.0",
-        "tslib": "^2.3.0",
+        "tslib": "^2.3.1",
         "websocket-ts": "^1.1.1",
         "zone.js": "~0.11.4"
       },
@@ -42,6 +43,7 @@
         "@angular/cli": "~13.2.5",
         "@angular/compiler-cli": "~13.2.0",
         "@types/crypto-js": "^4.1.1",
+        "@types/d3-graphviz": "^2.6.7",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
         "jasmine-core": "~4.0.0",
@@ -2743,6 +2745,57 @@
       "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
       "dev": true
     },
+    "node_modules/@types/d3-color": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz",
+      "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-graphviz": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-graphviz/-/d3-graphviz-2.6.7.tgz",
+      "integrity": "sha512-dKJjD5HiFvAmC0FL/c70VB1diie8FCpyiCZfxMlf6TwYBqUyFvS4XJt6MoxjIuQTJhKDBGzrIvDOgM8gYMLSVA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "^1",
+        "@types/d3-transition": "^1",
+        "@types/d3-zoom": "^1"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz",
+      "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-color": "^1"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.3.tgz",
+      "integrity": "sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==",
+      "dev": true
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-J+a3SuF/E7wXbOSN19p8ZieQSFIm5hU2Egqtndbc54LXaAEOpLfDx4sBu/PKAKzHOdgKK1wkMhINKqNh4aoZAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-selection": "^1"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-3kHkL6sPiDdbfGhzlp5gIHyu3kULhtnHTTAl3UBZVtWB1PzcLL8vdmz5mTx7plLiUqOA2Y+yT2GKjt/TdA2p7Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-interpolate": "^1",
+        "@types/d3-selection": "^1"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -4565,6 +4618,99 @@
       "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
+    "node_modules/d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "node_modules/d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "node_modules/d3-graphviz": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/d3-graphviz/-/d3-graphviz-2.6.1.tgz",
+      "integrity": "sha512-878AFSagQyr5tTOrM7YiVYeUC2/NoFcOB3/oew+LAML0xekyJSw9j3WOCUMBsc95KYe9XBYZ+SKKuObVya1tJQ==",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3",
+        "d3-format": "^1.2.0",
+        "d3-interpolate": "^1.1.5",
+        "d3-path": "^1.0.5",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "^1.0.6",
+        "d3-transition": "^1.1.1",
+        "d3-zoom": "^1.5.0",
+        "viz.js": "^1.8.2"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "dependencies": {
+        "d3-color": "1"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "node_modules/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "dependencies": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "node_modules/date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.4.tgz",
@@ -11042,6 +11188,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/viz.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/viz.js/-/viz.js-1.8.2.tgz",
+      "integrity": "sha512-W+1+N/hdzLpQZEcvz79n2IgUE9pfx6JLdHh3Kh8RGvLL8P1LdJVQmi2OsDcLdY4QVID4OUy+FPelyerX0nJxIQ==",
+      "deprecated": "no longer supported"
+    },
     "node_modules/void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
@@ -13445,6 +13597,57 @@
       "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==",
       "dev": true
     },
+    "@types/d3-color": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz",
+      "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==",
+      "dev": true
+    },
+    "@types/d3-graphviz": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-graphviz/-/d3-graphviz-2.6.7.tgz",
+      "integrity": "sha512-dKJjD5HiFvAmC0FL/c70VB1diie8FCpyiCZfxMlf6TwYBqUyFvS4XJt6MoxjIuQTJhKDBGzrIvDOgM8gYMLSVA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "^1",
+        "@types/d3-transition": "^1",
+        "@types/d3-zoom": "^1"
+      }
+    },
+    "@types/d3-interpolate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz",
+      "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-color": "^1"
+      }
+    },
+    "@types/d3-selection": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.3.tgz",
+      "integrity": "sha512-GjKQWVZO6Sa96HiKO6R93VBE8DUW+DDkFpIMf9vpY5S78qZTlRRSNUsHr/afDpF7TvLDV7VxrUFOWW7vdIlYkA==",
+      "dev": true
+    },
+    "@types/d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-J+a3SuF/E7wXbOSN19p8ZieQSFIm5hU2Egqtndbc54LXaAEOpLfDx4sBu/PKAKzHOdgKK1wkMhINKqNh4aoZAg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "^1"
+      }
+    },
+    "@types/d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-3kHkL6sPiDdbfGhzlp5gIHyu3kULhtnHTTAl3UBZVtWB1PzcLL8vdmz5mTx7plLiUqOA2Y+yT2GKjt/TdA2p7Q==",
+      "dev": true,
+      "requires": {
+        "@types/d3-interpolate": "^1",
+        "@types/d3-selection": "^1"
+      }
+    },
     "@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -14874,6 +15077,99 @@
       "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
+    "d3-color": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
+    },
+    "d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ=="
+    },
+    "d3-graphviz": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/d3-graphviz/-/d3-graphviz-2.6.1.tgz",
+      "integrity": "sha512-878AFSagQyr5tTOrM7YiVYeUC2/NoFcOB3/oew+LAML0xekyJSw9j3WOCUMBsc95KYe9XBYZ+SKKuObVya1tJQ==",
+      "requires": {
+        "d3-dispatch": "^1.0.3",
+        "d3-format": "^1.2.0",
+        "d3-interpolate": "^1.1.5",
+        "d3-path": "^1.0.5",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "^1.0.6",
+        "d3-transition": "^1.1.1",
+        "d3-zoom": "^1.5.0",
+        "viz.js": "^1.8.2"
+      }
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-zoom": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
+      "integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "date-format": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.4.tgz",
@@ -19594,6 +19890,11 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "viz.js": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/viz.js/-/viz.js-1.8.2.tgz",
+      "integrity": "sha512-W+1+N/hdzLpQZEcvz79n2IgUE9pfx6JLdHh3Kh8RGvLL8P1LdJVQmi2OsDcLdY4QVID4OUy+FPelyerX0nJxIQ=="
+    },
     "void-elements": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8cd6db58..975c740f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "bootstrap": "^5.1.3",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
+    "d3-graphviz": "^2.6.1",
     "mdb-angular-ui-kit": "^2.0.0",
     "ng-uikit-pro-standard": "^1.0.0",
     "ng2-charts": "^3.0.8",
@@ -35,7 +36,7 @@
     "ngx-cookie-service": "^13.1.2",
     "ngx-csv-parser": "^0.0.7",
     "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.1",
     "websocket-ts": "^1.1.1",
     "zone.js": "~0.11.4"
   },
@@ -44,6 +45,7 @@
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
     "@types/crypto-js": "^4.1.1",
+    "@types/d3-graphviz": "^2.6.7",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.css
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html
new file mode 100644
index 00000000..6dd3b3ae
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.html
@@ -0,0 +1,5 @@
+<div style="text-align: center; width: 100%;" >
+    <button (click)="d3()">Prikaz veštačke neuronske mreže</button>
+    <div id="graph"></div>
+  </div>
+
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
new file mode 100644
index 00000000..cb07ef1d
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnvisualComponent } from './annvisual.component';
+
+describe('AnnvisualComponent', () => {
+  let component: AnnvisualComponent;
+  let fixture: ComponentFixture<AnnvisualComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnvisualComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnvisualComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts
new file mode 100644
index 00000000..ff5b45d6
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit,Input } from '@angular/core';
+import Model from 'src/app/_data/Model';
+import { graphviz }  from 'd3-graphviz';
+
+@Component({
+  selector: 'app-annvisual',
+  templateUrl: './annvisual.component.html',
+  styleUrls: ['./annvisual.component.css']
+})
+export class AnnvisualComponent implements OnInit {
+  ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  @Input() model: Model = new Model();
+
+  d3(){
+    let inputlayerstring:string='';
+    let hiddenlayerstring:string='';
+    let digraphstring:string='digraph {';
+
+    for(let i=0;i<this.model.inputNeurons;i++)
+    {
+      inputlayerstring=inputlayerstring+'i'+i+',';
+    }
+    inputlayerstring=inputlayerstring.slice(0,-1);
+
+    digraphstring=digraphstring+'->';
+
+    for(let j=0;j<this.model.hiddenLayers;j++)
+    {
+      for(let i=0;i<this.model.hiddenLayerNeurons;i++)
+      {
+        hiddenlayerstring=hiddenlayerstring+'h'+j+'_'+i+',';
+      }
+      hiddenlayerstring=hiddenlayerstring.slice(0,1);
+      digraphstring=digraphstring+hiddenlayerstring+'->';
+      hiddenlayerstring='';
+    }
+    digraphstring=digraphstring+'o}';
+    alert(digraphstring);
+    
+    graphviz('#graph').renderDot(digraphstring);
+    }
+
+
+}