diff --git a/.eslintrc.js b/.eslintrc.js
index 2217fac..af92d33 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,9 +9,7 @@ module.exports = {
   ],
   globals: {
     Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
-    d3: 'readonly',
-    dagreD3: 'readonly'
+    SharedArrayBuffer: 'readonly'
   },
   parserOptions: {
     ecmaVersion: 2018,
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 12beec4..3572729 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,6 +5,10 @@ on:
     paths:
       - 'src/**'
       - 'tests/**'
+      - '.github/workflows/test.yml'
+
+env:
+  NODE_VERSION: 16
 
 jobs:
   lint:
@@ -15,7 +19,7 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VERSION }}
 
     - name: Install npm dependencies
       run: |
@@ -38,7 +42,7 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VERSION }}
 
     - name: Install npm dependencies
       run: |
@@ -66,7 +70,7 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: ${{ env.NODE_VERSION }}
 
     - name: Install npm dependencies
       run: |
diff --git a/README.md b/README.md
index 922871d..bae08f1 100644
--- a/README.md
+++ b/README.md
@@ -29,14 +29,11 @@ Place the following `<script>`s near the end of your pages, right before the clo
 
 ### Required Dependencies
 
-* [D3](https://d3js.org/)
-* [dagre-d3](https://github.com/dagrejs/dagre-d3)
 * [Vue.js](https://vuejs.org/)
 * [lodash](https://lodash.com/)
 
 ### Optional Dependencies
 
-* [d3-legend](https://d3-legend.susielu.com/) (__Optional__) - if you want to use the legend.
 * [Milligram](https://milligram.io/) (__Optional__) - for the forms design.
 
 ## Example
diff --git a/docs/_static/examples/edit-mode.html b/docs/_static/examples/edit-mode.html
index 227b8f7..0472921 100644
--- a/docs/_static/examples/edit-mode.html
+++ b/docs/_static/examples/edit-mode.html
@@ -23,10 +23,6 @@
             </div>
         </div>
 
-        <!-- DagreD3 and D3 -->
-        <script src="https://d3js.org/d3.v5.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.min.js"></script>
-
         <!-- VueJS -->
         <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.min.js"></script>
 
diff --git a/docs/_static/examples/view-mode.html b/docs/_static/examples/view-mode.html
index ec24848..3c7fb34 100644
--- a/docs/_static/examples/view-mode.html
+++ b/docs/_static/examples/view-mode.html
@@ -23,10 +23,6 @@
             </div>
         </div>
 
-        <!-- DagreD3 and D3 -->
-        <script src="https://d3js.org/d3.v5.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.min.js"></script>
-
         <!-- VueJS -->
         <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.min.js"></script>
 
diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index 2e3ab88..70aa74b 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -39,15 +39,12 @@ Dependencies
 Required Dependencies
 *********************
 
-* `D3 <https://d3js.org/>`_
-* `dagre-d3 <https://github.com/dagrejs/dagre-d3>`_
 * `Vue.js <https://vuejs.org/>`_
 * `lodash <https://lodash.com/>`_
 
 Optional Dependencies
 *********************
 
-* `d3-legend <https://d3-legend.susielu.com/>`_ (**Optional**) - if you want to use the legend.
 * `Milligram <https://milligram.io/>`_ (**Optional**) - for the forms design.
 
 Initialize the ModelVisualizer
@@ -85,10 +82,6 @@ Put it all together and your pages should look like this:
             <div id="visualizer">
             </div>
 
-            <!-- DagreD3 and D3 -->
-            <script src="https://d3js.org/d3.v5.js"></script>
-            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.min.js"></script>
-
             <!-- VueJS -->
             <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
diff --git a/examples/index.html b/examples/index.html
index 93a8c47..a1e1e7a 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -59,11 +59,6 @@
   <div id="legend"></div>
   <div id="visualizer"></div>
 
-  <!-- D3, DagreD3 and D3 Legend -->
-  <script src="https://d3js.org/d3.v5.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>
-
   <!-- Vue JS -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
@@ -84,4 +79,4 @@
     }
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/tests.html b/examples/tests.html
index b20a87c..1f12e32 100644
--- a/examples/tests.html
+++ b/examples/tests.html
@@ -51,11 +51,6 @@
   <div id="legend"></div>
   <div id="visualizer"></div>
 
-  <!-- D3, DagreD3 and D3 Legend -->
-  <script src="https://d3js.org/d3.v5.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.3/dagre-d3.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>
-
   <!-- Vue JS -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
@@ -68,4 +63,4 @@
     };
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package-lock.json b/package-lock.json
index 0d138ef..4f185f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "model-visualizer",
       "version": "0.0.1",
       "license": "GPL-3.0-only",
+      "dependencies": {
+        "d3-svg-legend": "^2.25.6",
+        "dagre-d3-es": "^7.0.10"
+      },
       "devDependencies": {
         "@babel/core": "^7.10.2",
         "@babel/preset-env": "^7.10.2",
@@ -15,7 +19,6 @@
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",
         "css-loader": "^3.5.3",
-        "dagre-d3": "^0.6.4",
         "eslint": "^6.8.0",
         "eslint-config-standard": "^14.1.1",
         "eslint-plugin-import": "^2.20.2",
@@ -2258,6 +2261,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/d3-selection": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.0.10.tgz",
+      "integrity": "sha512-mHICSFHpIwgTycsvgINYCwItk039eofbGRzVNdeUUtv0S2BD1vXFFUKaeMJN3ARbVl+hlsVOIwdzhzub5tjr6Q=="
+    },
     "node_modules/@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -3721,6 +3729,18 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4582,10 +4602,12 @@
       }
     },
     "node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
     },
     "node_modules/commondir": {
       "version": "1.0.1",
@@ -5242,227 +5264,314 @@
       "dev": true
     },
     "node_modules/d3": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz",
-      "integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==",
-      "dev": true,
-      "dependencies": {
-        "d3-array": "1",
-        "d3-axis": "1",
-        "d3-brush": "1",
-        "d3-chord": "1",
-        "d3-collection": "1",
-        "d3-color": "1",
-        "d3-contour": "1",
-        "d3-dispatch": "1",
-        "d3-drag": "1",
-        "d3-dsv": "1",
-        "d3-ease": "1",
-        "d3-fetch": "1",
-        "d3-force": "1",
-        "d3-format": "1",
-        "d3-geo": "1",
-        "d3-hierarchy": "1",
-        "d3-interpolate": "1",
-        "d3-path": "1",
-        "d3-polygon": "1",
-        "d3-quadtree": "1",
-        "d3-random": "1",
-        "d3-scale": "2",
-        "d3-scale-chromatic": "1",
-        "d3-selection": "1",
-        "d3-shape": "1",
-        "d3-time": "1",
-        "d3-time-format": "2",
-        "d3-timer": "1",
-        "d3-transition": "1",
-        "d3-voronoi": "1",
-        "d3-zoom": "1"
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-array": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==",
-      "dev": true
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.0.1.tgz",
+      "integrity": "sha512-VPS5OH5Xb43tkFkxHEc4r5yWhlDwST47zh1q+qvgTj7xB9xDXn+UEcofhvNC7s8gD55y9Q/MCSPSBUVvnzo3Dw=="
     },
     "node_modules/d3-axis": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz",
-      "integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==",
-      "dev": true
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-brush": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz",
-      "integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
       "dependencies": {
-        "d3-dispatch": "1",
-        "d3-drag": "1",
-        "d3-interpolate": "1",
-        "d3-selection": "1",
-        "d3-transition": "1"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush/node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
       }
     },
     "node_modules/d3-chord": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz",
-      "integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==",
-      "dev": true,
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
       "dependencies": {
-        "d3-array": "1",
-        "d3-path": "1"
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-collection": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
-      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==",
-      "dev": true
+      "integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
     },
     "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==",
-      "dev": true
+      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
     },
     "node_modules/d3-contour": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz",
-      "integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==",
-      "dev": true,
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
       "dependencies": {
-        "d3-array": "^1.1.1"
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "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==",
-      "dev": true
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.1.tgz",
+      "integrity": "sha512-BRTp95mobTSKx8EtpOLbxXuYVtNNr0PmelkH9Uzg5cgcO5O1M0i3+2C0FeM2I95BwQoIlsuZXQTPIoIt5xOtmw=="
     },
     "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==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
       "dependencies": {
-        "d3-dispatch": "1",
-        "d3-selection": "1"
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-dsv": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
-      "integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
-      "dev": true,
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
       "dependencies": {
-        "commander": "2",
-        "iconv-lite": "0.4",
+        "commander": "7",
+        "iconv-lite": "0.6",
         "rw": "1"
       },
       "bin": {
-        "csv2json": "bin/dsv2json",
-        "csv2tsv": "bin/dsv2dsv",
-        "dsv2dsv": "bin/dsv2dsv",
-        "dsv2json": "bin/dsv2json",
-        "json2csv": "bin/json2dsv",
-        "json2dsv": "bin/json2dsv",
-        "json2tsv": "bin/json2dsv",
-        "tsv2csv": "bin/dsv2dsv",
-        "tsv2json": "bin/dsv2json"
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "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==",
-      "dev": true
+      "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ=="
     },
     "node_modules/d3-fetch": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz",
-      "integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==",
-      "dev": true,
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
       "dependencies": {
-        "d3-dsv": "1"
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-force": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz",
-      "integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
       "dependencies": {
-        "d3-collection": "1",
-        "d3-dispatch": "1",
-        "d3-quadtree": "1",
-        "d3-timer": "1"
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "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==",
-      "dev": true
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.0.2.tgz",
+      "integrity": "sha512-VHFdLLjGkeGrRL8T/rlIIDhI3vvVX/oOTM/GaDJfB1sIb4dU5ZgiEjg3EeidJdQ/70u60tM015TSWa1gqqLRhg=="
     },
     "node_modules/d3-geo": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz",
-      "integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==",
-      "dev": true,
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
       "dependencies": {
-        "d3-array": "1"
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/d3-hierarchy": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
-      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==",
-      "dev": true
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-interpolate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
       "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
-      "dev": true,
       "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==",
-      "dev": true
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-polygon": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
-      "integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==",
-      "dev": true
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-quadtree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
-      "integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==",
-      "dev": true
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-random": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
-      "integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==",
-      "dev": true
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
     },
     "node_modules/d3-scale": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
-      "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
-      "dev": true,
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.3.tgz",
+      "integrity": "sha512-ah2Xqywu96gau2iET3T0ZTsu0/X0gfoB8vDTuZ1OaG5F0SgGJLXreBVBknSZf2HKnxjenRvFok3qY2FgY4RpFg==",
       "dependencies": {
-        "d3-array": "^1.2.0",
+        "d3-array": "1",
         "d3-collection": "1",
+        "d3-color": "1",
         "d3-format": "1",
         "d3-interpolate": "1",
         "d3-time": "1",
@@ -5470,41 +5579,56 @@
       }
     },
     "node_modules/d3-scale-chromatic": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz",
-      "integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
       "dependencies": {
-        "d3-color": "1",
-        "d3-interpolate": "1"
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "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==",
-      "dev": true
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.0.2.tgz",
+      "integrity": "sha512-nInNdsdhljkDqkU/83bdWwtiJ7xsX3l57YZMlqsAOMeQROeCv7osPqQgYnao0NmRZEGc11hNakY+EOkaIdsWpQ=="
     },
     "node_modules/d3-shape": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
-      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
-      "dev": true,
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-svg-legend": {
+      "version": "2.25.6",
+      "resolved": "https://registry.npmjs.org/d3-svg-legend/-/d3-svg-legend-2.25.6.tgz",
+      "integrity": "sha512-6dueSjQr3+g9SlQ1SOzc4V58cCjjBeyo4WEcY8PW80i9XD/s562W/4xk05bpky0vzQx+i2XmXj3CYT+9KIRlnw==",
       "dependencies": {
-        "d3-path": "1"
+        "@types/d3-selection": "1.0.10",
+        "d3-array": "1.0.1",
+        "d3-dispatch": "1.0.1",
+        "d3-format": "1.0.2",
+        "d3-scale": "1.0.3",
+        "d3-selection": "1.0.2",
+        "d3-transition": "1.0.3"
       }
     },
     "node_modules/d3-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
-      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
-      "dev": true
+      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
     },
     "node_modules/d3-time-format": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz",
       "integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==",
-      "dev": true,
       "dependencies": {
         "d3-time": "1"
       }
@@ -5512,62 +5636,194 @@
     "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==",
-      "dev": true
+      "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==",
-      "dev": true,
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.0.3.tgz",
+      "integrity": "sha512-Facxcbma0nA2GVrx7B/Mgnn5ju6SwUMzGa9YcYmQjpqmaIq1Zbp5vVJLjtH6b08Lu0vcX7O6a4z+AlLmdCxrCQ==",
       "dependencies": {
         "d3-color": "1",
         "d3-dispatch": "1",
         "d3-ease": "1",
         "d3-interpolate": "1",
-        "d3-selection": "^1.1.0",
+        "d3-selection": "1",
         "d3-timer": "1"
       }
     },
-    "node_modules/d3-voronoi": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
-      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==",
-      "dev": true
-    },
     "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==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
       "dependencies": {
-        "d3-dispatch": "1",
-        "d3-drag": "1",
-        "d3-interpolate": "1",
-        "d3-selection": "1",
-        "d3-transition": "1"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/dagre": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
-      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
-      "dev": true,
+    "node_modules/d3-zoom/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-zoom/node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
       "dependencies": {
-        "graphlib": "^2.1.8",
-        "lodash": "^4.17.15"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
       }
     },
-    "node_modules/dagre-d3": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/dagre-d3/-/dagre-d3-0.6.4.tgz",
-      "integrity": "sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==",
-      "dev": true,
+    "node_modules/d3/node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "dependencies": {
-        "d3": "^5.14",
-        "dagre": "^0.8.5",
-        "graphlib": "^2.1.8",
-        "lodash": "^4.17.15"
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3/node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.10",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
+      "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
+      "dependencies": {
+        "d3": "^7.8.2",
+        "lodash-es": "^4.17.21"
       }
     },
     "node_modules/dashdash": {
@@ -5767,6 +6023,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7064,6 +7328,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/external-editor/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -8006,15 +8282,6 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
-    "node_modules/graphlib": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
-      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.15"
-      }
-    },
     "node_modules/growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -8442,12 +8709,11 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -8729,6 +8995,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -10436,6 +10710,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -13036,6 +13315,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13467,6 +13758,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -13497,8 +13793,7 @@
     "node_modules/rw": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
-      "dev": true
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
     },
     "node_modules/rx": {
       "version": "4.1.0",
@@ -13574,8 +13869,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sane": {
       "version": "4.1.0",
@@ -15051,6 +15345,12 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/test-exclude": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
@@ -16626,6 +16926,18 @@
         "iconv-lite": "0.4.24"
       }
     },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/whatwg-mimetype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
diff --git a/package.json b/package.json
index 73a8b65..8954f37 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.5.3",
-    "dagre-d3": "^0.6.4",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.20.2",
@@ -43,5 +42,8 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "d3-svg-legend": "^2.25.6",
+    "dagre-d3-es": "^7.0.10"
+  }
 }
diff --git a/src/js/Actions.vue b/src/js/ActionsForm.vue
similarity index 93%
rename from src/js/Actions.vue
rename to src/js/ActionsForm.vue
index 4644caf..49ff390 100644
--- a/src/js/Actions.vue
+++ b/src/js/ActionsForm.vue
@@ -3,7 +3,7 @@
     <label for="mv-actions-input">Actions</label>
 
     <div class="mv-help-tooltip">
-      <Info />
+      <InfoIcon />
 
       <span class="mv-help-tooltip-text">{{tooltipMessage}}</span>
     </div>
@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import Info from './icons/Info.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Info },
+  components: { InfoIcon },
 
   props: {
     value: Array,
@@ -77,7 +77,7 @@ export default {
     },
 
     validateActions(actions) {
-      if (!actions || actions === []) {
+      if (!actions || actions.length === 0) {
         this.error = ''
         return true
       }
diff --git a/src/js/Dependency.vue b/src/js/DependencyForm.vue
similarity index 95%
rename from src/js/Dependency.vue
rename to src/js/DependencyForm.vue
index fdd0efb..4cc0fd6 100644
--- a/src/js/Dependency.vue
+++ b/src/js/DependencyForm.vue
@@ -3,7 +3,7 @@
     <label for="mv-edge-dependency-input">Dependency</label>
 
     <div class="mv-help-tooltip">
-      <Info />
+      <InfoIcon />
 
       <span class="mv-help-tooltip-text">
         An integer used by the dependency_edge_coverage stop condition to finish the path when all the edges with dependency higher or equal to the threshold are reached.
@@ -24,10 +24,10 @@
 </template>
 <script>
 import { isDependencyValid } from './models'
-import Info from './icons/Info.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Info },
+  components: { InfoIcon },
 
   props: {
     value: Number
diff --git a/src/js/Edge.vue b/src/js/EdgeForm.vue
similarity index 89%
rename from src/js/Edge.vue
rename to src/js/EdgeForm.vue
index 6206f16..0be001d 100644
--- a/src/js/Edge.vue
+++ b/src/js/EdgeForm.vue
@@ -82,7 +82,7 @@
       <label for="mv-edge-guard-input">Guard</label>
 
       <div class="mv-help-tooltip">
-        <Info />
+        <InfoIcon />
 
         <span class="mv-help-tooltip-text">
           A JavaScript conditional expression that blocks the edge until the condition is met.
@@ -99,15 +99,15 @@
     </div>
 
     <div class="mv-edge-weight">
-      <Weight :value="local.weight" @input="update('weight', $event)" />
+      <WeightForm :value="local.weight" @input="update('weight', $event)" />
     </div>
 
     <div class="mv-edge-dependency">
-      <Dependency :value="local.dependency" @input="update('dependency', $event)" />
+      <DependencyForm :value="local.dependency" @input="update('dependency', $event)" />
     </div>
 
     <div class="mv-edge-actions">
-      <Actions :value="local.actions" :tooltipMessage="this.actionsTooltipMessage" @input="updateActions($event)" />
+      <ActionsForm :value="local.actions" :tooltipMessage="this.actionsTooltipMessage" @input="updateActions($event)" />
     </div>
 
     <div>
@@ -120,13 +120,13 @@
 import { cloneDeep, tap, set, unset } from 'lodash'
 
 import { isKeyword, isIdentifier } from './models'
-import Actions from './Actions.vue'
-import Weight from './Weight.vue'
-import Dependency from './Dependency.vue'
-import Info from './icons/Info.vue'
+import ActionsForm from './ActionsForm.vue'
+import WeightForm from './WeightForm.vue'
+import DependencyForm from './DependencyForm.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Actions, Weight, Dependency, Info },
+  components: { ActionsForm, WeightForm, DependencyForm, InfoIcon },
 
   props: {
     value: Object,
diff --git a/src/js/Editor.vue b/src/js/EditorComponent.vue
similarity index 95%
rename from src/js/Editor.vue
rename to src/js/EditorComponent.vue
index e7a16f0..fd1dba4 100644
--- a/src/js/Editor.vue
+++ b/src/js/EditorComponent.vue
@@ -17,7 +17,7 @@
         <button class="mv-button mv-button-new-model" @click="createModel">New model</button>
       </div>
 
-      <Model
+      <ModelForm
         v-if="editModelMeta && editableModelIndex >=0"
         v-model="editableModels.models[editableModelIndex]"
         :modelNames="allModelNames"
@@ -26,7 +26,7 @@
         v-on:delete="showDeleteModelPopUp"
       />
 
-      <Edge
+      <EdgeForm
         v-if="editableEdgeIndex >= 0"
         v-model="edges[editableEdgeIndex]"
         :vertices="vertices"
@@ -34,7 +34,7 @@
         v-on:delete="removeEdge(edges[editableEdgeIndex].id)"
       />
 
-      <Vertex
+      <VertexForm
         v-if="editableVertexIndex >=0 "
         v-model="vertices[editableVertexIndex]"
         :newVertex="newVertex"
@@ -81,16 +81,19 @@
 </template>
 
 <script>
-import Edge from './Edge.vue'
-import Vertex from './Vertex.vue'
-import Model from './Model.vue'
+import EdgeForm from './EdgeForm.vue'
+import VertexForm from './VertexForm.vue'
+import ModelForm from './ModelForm.vue'
 import UndoRedo from './undoredo'
 import { createGraph, renderTooltips, renderLegend } from './graph'
 import { setupInteraction } from './interaction'
 
+import * as dagreD3 from 'dagre-d3-es'
+import * as d3 from 'd3'
+
 export default {
-  name: 'Editor',
-  components: { Edge, Vertex, Model },
+  name: 'EditorComponent',
+  components: { EdgeForm, VertexForm, ModelForm },
   undoredo: null,
 
   data: function() {
@@ -303,7 +306,7 @@ export default {
 
     paintGraph() {
       const models = [this.editableModels.models[this.editableModelIndex]]
-      var { graph, legendDomain, legendRange } = createGraph(
+      const { graph, legendDomain, legendRange } = createGraph(
         models,
         this.graphLayoutOptions
       )
@@ -424,8 +427,8 @@ export default {
       const edge = {
         id: `e${id}`,
         name: `e${id}`,
-        sourceVertexId: sourceVertexId,
-        targetVertexId: targetVertexId
+        sourceVertexId,
+        targetVertexId
       }
       this.edges.push(edge)
       this.selectEdge(edge.id)
@@ -445,11 +448,11 @@ export default {
 
       const interaction = setupInteraction(this.svg, graph)
 
-      interaction.onUpdateEdge = (edgeid, sourceVertexId, targetVertexId) => {
-        const edge = self.getEdge(edgeid)
+      interaction.onUpdateEdge = (edgeId, sourceVertexId, targetVertexId) => {
+        const edge = self.getEdge(edgeId)
         edge.sourceVertexId = sourceVertexId
         edge.targetVertexId = targetVertexId
-        self.selectEdge(edgeid)
+        self.selectEdge(edgeId)
       }
       interaction.onCreateEdge = (sourceVertexId, targetVertexId) => {
         self.createEdge(sourceVertexId, targetVertexId)
@@ -486,8 +489,8 @@ export default {
       }
 
       // Create the renderer
-      var render = new dagreD3.render() // eslint-disable-line new-cap
-      var inner = svg.select('g#graph')
+      const render = new dagreD3.render() // eslint-disable-line new-cap
+      const inner = svg.select('g#graph')
 
       // Run the renderer. This is what draws the final graph.
       render(inner, graph)
diff --git a/src/js/Model.vue b/src/js/ModelForm.vue
similarity index 92%
rename from src/js/Model.vue
rename to src/js/ModelForm.vue
index b2bb220..0bac16f 100644
--- a/src/js/Model.vue
+++ b/src/js/ModelForm.vue
@@ -36,7 +36,7 @@
       <label for="mv-model-generator-input">Generator</label>
 
       <div class="mv-help-tooltip">
-        <Info />
+        <InfoIcon />
 
         <span class="mv-help-tooltip-text">
           Decides how to walk through the graph and when to stop.
@@ -56,7 +56,7 @@
     </div>
 
     <div class="mv-model-actions">
-      <Actions :value="local.actions" :tooltipMessage="this.actionsTooltipMessage" @input="updateActions($event)" />
+      <ActionsForm :value="local.actions" :tooltipMessage="this.actionsTooltipMessage" @input="updateActions($event)" />
     </div>
 
     <div>
@@ -69,11 +69,11 @@
 import { cloneDeep, tap } from 'lodash'
 
 import { isKeyword, isIdentifier } from './models'
-import Actions from './Actions.vue'
-import Info from './icons/Info.vue'
+import ActionsForm from './ActionsForm.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Actions, Info },
+  components: { ActionsForm, InfoIcon },
 
   props: {
     value: Object,
diff --git a/src/js/ModelVisualizer.js b/src/js/ModelVisualizer.js
index 71d2077..f04ade2 100644
--- a/src/js/ModelVisualizer.js
+++ b/src/js/ModelVisualizer.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
-import Editor from './Editor.vue'
-import Visualizer from './Visualizer.vue'
+import EditorComponent from './EditorComponent.vue'
+import VisualizerComponent from './VisualizerComponent.vue'
 import { ValidationError } from './exceptions'
 import { defaultModels, validateModels } from './models'
 import '../css/style.css'
@@ -19,7 +19,7 @@ class ModelVisualizer {
    * @param {string | HTMLElement} options.container - The container or container id where the model will be rendered.
    * @param {Object} [options.models] - The models to be rendered.
    * @param {Boolean} [options.editMode=true] - Enable or disable editMode.
-   * @param {Function} [options.onModelsChange] - Called when the model changes. Called only if editMode is enabled. It's called with one paramter the new value of the models.
+   * @param {Function} [options.onModelsChange] - Called when the model changes. Called only if editMode is enabled. It's called with one parameter the new value of the models.
    * @param {string} options.legendContainer - The container id where the legend will be rendered.
    * @param {Object} options.graphLayoutOptions - The dagreD3 graph layout options.
    * @param {Object} options.graphLayoutOptions.rankdir - Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
@@ -36,7 +36,7 @@ class ModelVisualizer {
    */
   constructor(options) {
     if (!options) {
-      throw Error('options paramter is required')
+      throw Error('options parameter is required')
     }
     let container = options.container
 
@@ -61,17 +61,17 @@ class ModelVisualizer {
     }
     ModelVisualizer.validate(data.models)
     this.vm = new Vue({
-      components: { Editor, Visualizer },
+      components: { EditorComponent, VisualizerComponent },
       data: data,
       template: `
-  <Editor
+  <EditorComponent
     ref='editor'
     v-if="editMode"
     v-on:change="modelsChanged"
     :models='models'
     :legend-container="legendContainer"
     :graph-layout-options="graphLayoutOptions" />
-  <Visualizer ref='visualizer' v-else :models='models' :legend-container="legendContainer" :graph-layout-options="graphLayoutOptions"/>
+  <VisualizerComponent ref='visualizer' v-else :models='models' :legend-container="legendContainer" :graph-layout-options="graphLayoutOptions"/>
         `,
       methods: {
         modelsChanged: function (models) {
@@ -89,8 +89,8 @@ class ModelVisualizer {
    * Validate the models.
    *
    * @param {Object} models - The models to be validated.
-   * @throws {ValidationError} If the models are invalid but plottaable.
-   * @throws {PlottingError} If the models are invalid and not plottaable.
+   * @throws {ValidationError} If the models are invalid but plottable.
+   * @throws {PlottingError} If the models are invalid and not plottable.
    */
   static validate(models) {
     validateModels(models)
@@ -141,7 +141,7 @@ class ModelVisualizer {
   /**
    * Sets the callback used when models are being updated in edit mode.
    *
-   * @param {Function} onModelsChange - Called when the model changes. Called only if editMode is enabled. It's called with one paramter the new value of the models.
+   * @param {Function} onModelsChange - Called when the model changes. Called only if editMode is enabled. It's called with one parameter the new value of the models.
    */
   setOnModelsChange(callback) {
     this.onModelsChange = callback
diff --git a/src/js/Vertex.vue b/src/js/VertexForm.vue
similarity index 97%
rename from src/js/Vertex.vue
rename to src/js/VertexForm.vue
index 85aca72..58a3acb 100644
--- a/src/js/Vertex.vue
+++ b/src/js/VertexForm.vue
@@ -45,7 +45,7 @@
       <label for="mv-vertex-shared-state-input">Shared state</label>
 
       <div class="mv-help-tooltip">
-        <Info />
+        <InfoIcon />
 
         <span class="mv-help-tooltip-text">
           A common shared state value added to vertexes to link them together, allowing the path to jump from one to another.
@@ -65,7 +65,7 @@
       <label for="mv-vertex-blocked-input">Blocked</label>
 
       <div class="mv-help-tooltip">
-        <Info />
+        <InfoIcon />
 
         <span class="mv-help-tooltip-text">
           A property which filters out the vertex from the path.
@@ -101,10 +101,10 @@
 <script>
 import { cloneDeep, tap, set } from 'lodash'
 import { isKeyword, isIdentifier } from './models'
-import Info from './icons/Info.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Info },
+  components: { InfoIcon },
 
   props: {
     value: Object,
diff --git a/src/js/Visualizer.vue b/src/js/VisualizerComponent.vue
similarity index 84%
rename from src/js/Visualizer.vue
rename to src/js/VisualizerComponent.vue
index 2c3d9fd..47cbbb9 100644
--- a/src/js/Visualizer.vue
+++ b/src/js/VisualizerComponent.vue
@@ -12,8 +12,11 @@
 import { createGraph, renderTooltips, renderLegend } from './graph'
 import { setupZoom } from './interaction'
 
+import * as dagreD3 from 'dagre-d3-es'
+import * as d3 from 'd3'
+
 export default {
-  name: 'Visualizer',
+  name: 'VisualizerComponent',
   data: function() {
     return {
       svg: null
@@ -37,7 +40,7 @@ export default {
   },
   methods: {
     paintGraph() {
-      var { graph, legendDomain, legendRange } = createGraph(
+      const { graph, legendDomain, legendRange } = createGraph(
         this.models.models,
         this.graphLayoutOptions
       )
@@ -50,7 +53,7 @@ export default {
     renderGraph(container, graph) {
       const svg = d3.select(container).select('svg.mv-visualizer')
       const tooltip = d3.select(container).select('div.mv-tooltip')
-      var inner = svg.select('g#graph')
+      const inner = svg.select('g#graph')
 
       const width = container.offsetWidth
       const height = container.offsetHeight
@@ -58,7 +61,7 @@ export default {
       svg.attr('width', width).attr('height', height)
 
       // Create the renderer
-      var render = new dagreD3.render() // eslint-disable-line new-cap
+      const render = new dagreD3.render() // eslint-disable-line new-cap
 
       // Run the renderer. This is what draws the final graph.
       render(inner, graph)
diff --git a/src/js/Weight.vue b/src/js/WeightForm.vue
similarity index 94%
rename from src/js/Weight.vue
rename to src/js/WeightForm.vue
index 254dfd6..4c0c4e3 100644
--- a/src/js/Weight.vue
+++ b/src/js/WeightForm.vue
@@ -3,7 +3,7 @@
     <label for="mv-edge-weight-input">Weight</label>
 
     <div class="mv-help-tooltip">
-      <Info />
+      <InfoIcon />
 
       <span class="mv-help-tooltip-text">
         A number between 0 and 1 used by the weighted_random generator. It represents the probability of an edge getting chosen.
@@ -25,10 +25,10 @@
 
 <script>
 import { isWeightValid } from './models'
-import Info from './icons/Info.vue'
+import InfoIcon from './icons/InfoIcon.vue'
 
 export default {
-  components: { Info },
+  components: { InfoIcon },
 
   props: {
     value: Number
diff --git a/src/js/exceptions.js b/src/js/exceptions.js
index 05fc03c..a68f4b8 100644
--- a/src/js/exceptions.js
+++ b/src/js/exceptions.js
@@ -1,4 +1,3 @@
-
 /**
  * Base error for ModelVisualizer.
  */
diff --git a/src/js/graph.js b/src/js/graph.js
index 015902a..a6e2a54 100644
--- a/src/js/graph.js
+++ b/src/js/graph.js
@@ -1,9 +1,11 @@
-import dagreD3 from 'dagre-d3'
+import * as dagreD3 from 'dagre-d3-es'
+import * as d3 from 'd3'
+import { legendColor } from 'd3-svg-legend'
 import { isEmpty, omit } from 'lodash'
 
 let fakeNodesCount = 0
 
-const commonLegendDommain = ['Start Vertex', 'Blocked Vertex', 'Fake Vertex']
+const commonLegendDomain = ['Start Vertex', 'Blocked Vertex', 'Fake Vertex']
 const commonLegendRange = ['var(--start-vertex-color)', 'var(--blocked-vertex-color)', 'var(--fake-vertex-color)']
 
 function createVertexLabel(vertex, startElementsIds) {
@@ -45,7 +47,7 @@ function createVertexLabel(vertex, startElementsIds) {
   return label
 }
 
-function createEdgeLable(edge) {
+function createEdgeLabel(edge) {
   const label = {
     id: edge.id,
     labelId: 'label_' + edge.id,
@@ -93,7 +95,7 @@ function setStartingEdge(graph, edge, startElementsIds) {
   graph.setEdge(
     fakeVertex.id,
     edge.targetVertexId,
-    createEdgeLable(edge),
+    createEdgeLabel(edge),
     edge.id
   )
 }
@@ -102,13 +104,13 @@ export function createGraph(models, graphOptions) {
   fakeNodesCount = 0
 
   // Create a new directed graph
-  var graph = new dagreD3.graphlib.Graph({ multigraph: true }).setGraph(graphOptions || {})
+  const graph = new dagreD3.graphlib.Graph({ multigraph: true }).setGraph(graphOptions || {})
 
-  var vertices = models.reduce((acc, cur) => acc.concat(cur.vertices), [])
-  var edges = models.reduce((acc, cur) => acc.concat(cur.edges), [])
+  const vertices = models.reduce((acc, cur) => acc.concat(cur.vertices), [])
+  const edges = models.reduce((acc, cur) => acc.concat(cur.edges), [])
 
-  var startElementsIds = models.map(x => x.startElementId)
-  var sharedStates = vertices.reduce((acc, cur) => {
+  const startElementsIds = models.map(x => x.startElementId)
+  const sharedStates = vertices.reduce((acc, cur) => {
     if (cur.sharedState) {
       if (acc[cur.sharedState]) {
         acc[cur.sharedState].push(cur.id)
@@ -120,8 +122,8 @@ export function createGraph(models, graphOptions) {
     return acc
   }, {})
 
-  var sharedStatesNames = Object.keys(sharedStates)
-  var colors = {}
+  const sharedStatesNames = Object.keys(sharedStates)
+  const colors = {}
 
   // Automatically label each of the nodes
   vertices.forEach(function (vertex) {
@@ -134,7 +136,7 @@ export function createGraph(models, graphOptions) {
       graph.setEdge(
         edge.sourceVertexId,
         edge.targetVertexId,
-        createEdgeLable(edge),
+        createEdgeLabel(edge),
         edge.id
       )
     } else {
@@ -155,7 +157,7 @@ export function createGraph(models, graphOptions) {
       )
     )
   graph.nodes().forEach(function (v) {
-    var node = graph.node(v)
+    const node = graph.node(v)
     node.rx = node.ry = 1
 
     sharedStatesNames.forEach(key => {
@@ -167,8 +169,8 @@ export function createGraph(models, graphOptions) {
   })
 
   return {
-    graph: graph,
-    legendDomain: [...commonLegendDommain, ...sharedStatesNames.map(name => `Shared State: ${name}`)],
+    graph,
+    legendDomain: [...commonLegendDomain, ...sharedStatesNames.map(name => `Shared State: ${name}`)],
     legendRange: [
       ...commonLegendRange,
       ...sharedStatesNames.map(name => color(name))
@@ -233,7 +235,7 @@ function generateNodeTooltipHtml(graph, d) {
   return html
 }
 
-function generateEdgeTootipHtml(graph, d) {
+function generateEdgeTooltipHtml(graph, d) {
   const edge = graph.edge(d.v, d.w, d.name)
   let html = `<div>Id: <span>${edge.id}</span></div>`
 
@@ -255,7 +257,7 @@ function generateEdgeTootipHtml(graph, d) {
   return html
 }
 
-function addTootips(svg, tooltip, cssSelector, htlmFunction, graph) {
+function addTooltips(svg, tooltip, cssSelector, htmlFunction, graph) {
   const tooltipOffset = {
     x: 12,
     y: 12
@@ -263,16 +265,16 @@ function addTootips(svg, tooltip, cssSelector, htlmFunction, graph) {
 
   svg
     .selectAll(cssSelector)
-    .on('mouseover.tooltip', d => {
+    .on('mouseover.tooltip', (event, d) => {
       tooltip
         .transition()
         .style('display', 'block')
         .style('opacity', 1)
 
       tooltip
-        .html(htlmFunction(graph, d))
-        .style('left', d3.event.pageX + tooltipOffset.x + 'px')
-        .style('top', d3.event.pageY + tooltipOffset.y + 'px')
+        .html(htmlFunction(graph, d))
+        .style('left', event.pageX + tooltipOffset.x + 'px')
+        .style('top', event.pageY + tooltipOffset.y + 'px')
         .style('cursor', 'pointer')
     })
     .on('mouseout.tooltip', d => {
@@ -287,12 +289,12 @@ function addTootips(svg, tooltip, cssSelector, htlmFunction, graph) {
 export function renderTooltips(svg, graph, tooltip) {
   tooltip.style('display', 'none').style('opacity', 0)
 
-  addTootips(svg, tooltip, '.node', generateNodeTooltipHtml, graph)
-  addTootips(
+  addTooltips(svg, tooltip, '.node', generateNodeTooltipHtml, graph)
+  addTooltips(
     svg,
     tooltip,
     '.edgePath, .edgeLabel',
-    generateEdgeTootipHtml,
+    generateEdgeTooltipHtml,
     graph
   )
 }
@@ -310,11 +312,11 @@ export function renderLegend(legendContainer, legendDomain, legendRange) {
     .attr('class', 'legendQuant')
     .attr('transform', 'translate(20,20)')
 
-  var ordinal = d3.scaleOrdinal()
+  const ordinal = d3.scaleOrdinal()
     .domain(legendDomain)
     .range(legendRange)
 
-  var legend = d3.legendColor()
+  const legend = legendColor()
     .title('Graph Legend')
     .scale(ordinal)
 
diff --git a/src/js/icons/Info.vue b/src/js/icons/InfoIcon.vue
similarity index 100%
rename from src/js/icons/Info.vue
rename to src/js/icons/InfoIcon.vue
diff --git a/src/js/interaction.js b/src/js/interaction.js
index 1788e31..5b17787 100644
--- a/src/js/interaction.js
+++ b/src/js/interaction.js
@@ -1,3 +1,5 @@
+import * as d3 from 'd3'
+
 function createDynamicPath(gInteraction, graph, svg) {
   const dPath = {
     path: gInteraction.select('path.dynamicPath'),
@@ -13,7 +15,7 @@ function createDynamicPath(gInteraction, graph, svg) {
     edgeId: null,
 
     getSvgLocation(x, y) {
-      var pt = svg.node().createSVGPoint()
+      const pt = svg.node().createSVGPoint()
 
       pt.x = x
       pt.y = y
@@ -25,7 +27,7 @@ function createDynamicPath(gInteraction, graph, svg) {
       this.edgeId = edgeId
       const node = d3.select(graph.node(nodeId).elem).node()
       const coords = node.getBoundingClientRect()
-      var location = this.getSvgLocation(coords.x + coords.width / 2, coords.y + coords.height / 2)
+      const location = this.getSvgLocation(coords.x + coords.width / 2, coords.y + coords.height / 2)
 
       this.endx = this.stx = location.x
       this.endy = this.sty = location.y
@@ -95,10 +97,10 @@ class Interaction {
 export function setupInteraction(svg, graph) {
   const interaction = new Interaction()
 
-  var dLine = createDynamicPath(svg.select('g#interaction'), graph, svg)
+  const dLine = createDynamicPath(svg.select('g#interaction'), graph, svg)
 
-  function mousemove() {
-    var coords = d3.mouse(this)
+  function mousemove(event) {
+    const coords = d3.pointer(event)
     dLine.paint(coords)
   }
 
@@ -134,7 +136,7 @@ export function setupInteraction(svg, graph) {
     }
   }
 
-  function mouseover(d) {
+  function mouseover(event, d) {
     if (dLine.active) {
       dLine.endNodeId = d
     }
@@ -146,16 +148,16 @@ export function setupInteraction(svg, graph) {
 
   svg.selectAll('g.node .label').attr('pointer-events', 'none')
   svg.selectAll('g.node')
-    .on('mousedown.interaction', nodeId => {
-      d3.event.stopPropagation()
+    .on('mousedown.interaction', (event, nodeId) => {
+      event.stopPropagation()
       dLine.activate(nodeId)
     })
     .on('mouseout.interaction', mouseout)
     .on('mouseover.interaction', mouseover)
 
   svg.selectAll('.edgePath, .edgeLabel')
-    .on('mousedown.interaction', edge => {
-      d3.event.stopPropagation()
+    .on('mousedown.interaction', (event, edge) => {
+      event.stopPropagation()
       dLine.activate(edge.v, edge.name)
     })
 
@@ -169,11 +171,11 @@ export function setupInteraction(svg, graph) {
 }
 
 export function setupZoom(svg, graph) {
-  var inner = svg.select('g#graph')
-  var zoom = d3.zoom()
+  const inner = svg.select('g#graph')
+  const zoom = d3.zoom()
     .scaleExtent([0.1, 7])
-    .on('zoom', function () {
-      inner.attr('transform', d3.event.transform)
+    .on('zoom', function (event) {
+      inner.attr('transform', event.transform)
     })
   svg.call(zoom)
   if (!inner.attr('transform')) {
diff --git a/src/js/models.js b/src/js/models.js
index 1488732..ef97e31 100644
--- a/src/js/models.js
+++ b/src/js/models.js
@@ -2,7 +2,7 @@ import { isString } from 'lodash'
 
 import { ValidationError, PlottingError } from './exceptions'
 
-export var defaultModels = {
+export const defaultModels = {
   name: 'Default Models',
   models: [
     {
@@ -108,13 +108,13 @@ export function isKeyword(name) {
 export function isIdentifier(name) {
   // The regular expression is based on the python identifiers specification from: https://docs.python.org/3/reference/lexical_analysis.html#identifiers
 
-  /* eslint-disable-next-line no-misleading-character-class */
   let identifierRegex
 
   try {
+    /* eslint-disable-next-line prefer-regex-literals */
     identifierRegex = new RegExp('^[\\p{L}\\p{Nl}\u1885\u1886\u2118\u212E\u309B\u309CA-Za-z_][\\p{L}\\p{Nl}\\p{Mn}\\p{Mc}\\p{Nd}\\p{Pc}\u1885\u1886\u2118\u212E\u309B\u309C\u00B7\u0387\u1369\u1369\u136A\u136B\u136C\u136D\u136E\u136F\u1370\u1371\u19DA0-9A-Za-z_]*$', 'u')
   } catch (error) {
-    identifierRegex = new RegExp('^[_a-zA-Z]\\w*$')
+    identifierRegex = /^[_a-zA-Z]\\w*$/
   }
 
   if (!identifierRegex.test(name)) {
@@ -231,14 +231,14 @@ export function validateModels(json) {
     throw new PlottingError('Models should not be empty.')
   }
 
-  var verticesIds = {}
-  var edgesIds = {}
+  const verticesIds = {}
+  const edgesIds = {}
 
-  var hasStartElement = false
-  var modelNames = []
+  let hasStartElement = false
+  const modelNames = []
 
   models.forEach((model) => {
-    var modelVerticesIds = {}
+    const modelVerticesIds = {}
 
     const vertices = model.vertices || []
     vertices.forEach(vertex => {
@@ -280,8 +280,8 @@ export function validateModels(json) {
     validateModel(model)
     modelNames.push(model.name)
 
-    var modelHasStartElement = false
-    var modelHasSharedState = false
+    let modelHasStartElement = false
+    let modelHasSharedState = false
 
     model.vertices.forEach(vertex => {
       validateVertex(vertex)
diff --git a/webpack.config.js b/webpack.config.js
index 6cadc9a..556c915 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -50,7 +50,6 @@ module.exports = {
     new VueLoaderPlugin()
   ],
   externals: {
-    'dagre-d3': 'dagreD3',
     vue: 'Vue'
   }
 }