got basic d3js graph to work

4 files changed, 720 insertions, 97 deletions

diff --git a/package-lock.json b/package-lock.json
index 731599c73..0a340b73a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1173,6 +1173,50 @@
             "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz",
             "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw=="
         },
+        "@types/d3": {
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
+            "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-array": "*",
+                "@types/d3-axis": "*",
+                "@types/d3-brush": "*",
+                "@types/d3-chord": "*",
+                "@types/d3-color": "*",
+                "@types/d3-contour": "*",
+                "@types/d3-delaunay": "*",
+                "@types/d3-dispatch": "*",
+                "@types/d3-drag": "*",
+                "@types/d3-dsv": "*",
+                "@types/d3-ease": "*",
+                "@types/d3-fetch": "*",
+                "@types/d3-force": "*",
+                "@types/d3-format": "*",
+                "@types/d3-geo": "*",
+                "@types/d3-hierarchy": "*",
+                "@types/d3-interpolate": "*",
+                "@types/d3-path": "*",
+                "@types/d3-polygon": "*",
+                "@types/d3-quadtree": "*",
+                "@types/d3-random": "*",
+                "@types/d3-scale": "*",
+                "@types/d3-scale-chromatic": "*",
+                "@types/d3-selection": "*",
+                "@types/d3-shape": "*",
+                "@types/d3-time": "*",
+                "@types/d3-time-format": "*",
+                "@types/d3-timer": "*",
+                "@types/d3-transition": "*",
+                "@types/d3-zoom": "*"
+            }
+        },
+        "@types/d3-array": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
+            "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
+            "dev": true
+        },
         "@types/d3-axis": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-2.1.3.tgz",
@@ -1181,11 +1225,138 @@
                 "@types/d3-selection": "^2"
             }
         },
+        "@types/d3-brush": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
+            "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-chord": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
+            "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==",
+            "dev": true
+        },
         "@types/d3-color": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.3.tgz",
             "integrity": "sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w=="
         },
+        "@types/d3-contour": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
+            "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
+            "dev": true,
+            "requires": {
+                "@types/d3-array": "*",
+                "@types/geojson": "*"
+            }
+        },
+        "@types/d3-delaunay": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
+            "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
+            "dev": true
+        },
+        "@types/d3-dispatch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+            "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==",
+            "dev": true
+        },
+        "@types/d3-drag": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
+            "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-dsv": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
+            "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==",
+            "dev": true
+        },
+        "@types/d3-ease": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+            "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
+            "dev": true
+        },
+        "@types/d3-fetch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
+            "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
+            "dev": true,
+            "requires": {
+                "@types/d3-dsv": "*"
+            }
+        },
+        "@types/d3-force": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
+            "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==",
+            "dev": true
+        },
+        "@types/d3-format": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+            "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+            "dev": true
+        },
+        "@types/d3-geo": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
+            "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
+            "dev": true,
+            "requires": {
+                "@types/geojson": "*"
+            }
+        },
+        "@types/d3-hierarchy": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz",
+            "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==",
+            "dev": true
+        },
+        "@types/d3-interpolate": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+            "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+            "dev": true,
+            "requires": {
+                "@types/d3-color": "*"
+            }
+        },
+        "@types/d3-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+            "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
+            "dev": true
+        },
+        "@types/d3-polygon": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
+            "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==",
+            "dev": true
+        },
+        "@types/d3-quadtree": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
+            "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==",
+            "dev": true
+        },
+        "@types/d3-random": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
+            "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==",
+            "dev": true
+        },
         "@types/d3-scale": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
@@ -1194,16 +1365,62 @@
                 "@types/d3-time": "^2"
             }
         },
+        "@types/d3-scale-chromatic": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+            "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
+            "dev": true
+        },
         "@types/d3-selection": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.1.tgz",
             "integrity": "sha512-3mhtPnGE+c71rl/T5HMy+ykg7migAZ4T6gzU0HxpgBFKcasBrSnwRbYV1/UZR6o5fkpySxhWxAhd7yhjj8jL7g=="
         },
+        "@types/d3-shape": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz",
+            "integrity": "sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==",
+            "dev": true,
+            "requires": {
+                "@types/d3-path": "*"
+            }
+        },
         "@types/d3-time": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
             "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
         },
+        "@types/d3-time-format": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
+            "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==",
+            "dev": true
+        },
+        "@types/d3-timer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
+            "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==",
+            "dev": true
+        },
+        "@types/d3-transition": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
+            "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
+            "dev": true,
+            "requires": {
+                "@types/d3-selection": "*"
+            }
+        },
+        "@types/d3-zoom": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
+            "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
+            "dev": true,
+            "requires": {
+                "@types/d3-interpolate": "*",
+                "@types/d3-selection": "*"
+            }
+        },
         "@types/dom-speech-recognition": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz",
@@ -5079,6 +5296,170 @@
                 "type": "^1.0.1"
             }
         },
+        "d3": {
+            "version": "7.6.1",
+            "resolved": "https://registry.npmjs.org/d3/-/d3-7.6.1.tgz",
+            "integrity": "sha512-txMTdIHFbcpLx+8a0IFhZsbp+PfBBPt8yfbmukZTQFroKuFqIwqswF0qE5JXWefylaAVpSXFoKm3yP+jpNLFLw==",
+            "requires": {
+                "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"
+            },
+            "dependencies": {
+                "d3-array": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+                    "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+                    "requires": {
+                        "internmap": "1 - 2"
+                    }
+                },
+                "d3-axis": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+                    "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+                },
+                "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=="
+                },
+                "d3-dispatch": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+                    "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+                },
+                "d3-drag": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+                    "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+                    "requires": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-selection": "3"
+                    }
+                },
+                "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=="
+                },
+                "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=="
+                },
+                "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==",
+                    "requires": {
+                        "d3-color": "1 - 3"
+                    }
+                },
+                "d3-path": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+                    "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w=="
+                },
+                "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==",
+                    "requires": {
+                        "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"
+                    }
+                },
+                "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=="
+                },
+                "d3-shape": {
+                    "version": "3.1.0",
+                    "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.1.0.tgz",
+                    "integrity": "sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==",
+                    "requires": {
+                        "d3-path": "1 - 3"
+                    }
+                },
+                "d3-time": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+                    "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+                    "requires": {
+                        "d3-array": "2 - 3"
+                    }
+                },
+                "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==",
+                    "requires": {
+                        "d3-time": "1 - 3"
+                    }
+                },
+                "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=="
+                },
+                "d3-transition": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+                    "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+                    "requires": {
+                        "d3-color": "1 - 3",
+                        "d3-dispatch": "1 - 3",
+                        "d3-ease": "1 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-timer": "1 - 3"
+                    }
+                },
+                "d3-zoom": {
+                    "version": "3.0.0",
+                    "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+                    "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+                    "requires": {
+                        "d3-dispatch": "1 - 3",
+                        "d3-drag": "2 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-selection": "2 - 3",
+                        "d3-transition": "2 - 3"
+                    }
+                }
+            }
+        },
         "d3-array": {
             "version": "2.12.1",
             "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
@@ -5092,11 +5473,76 @@
             "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
             "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
         },
+        "d3-brush": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+            "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+            "requires": {
+                "d3-dispatch": "1 - 3",
+                "d3-drag": "2 - 3",
+                "d3-interpolate": "1 - 3",
+                "d3-selection": "3",
+                "d3-transition": "3"
+            },
+            "dependencies": {
+                "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=="
+                },
+                "d3-transition": {
+                    "version": "3.0.1",
+                    "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+                    "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+                    "requires": {
+                        "d3-color": "1 - 3",
+                        "d3-dispatch": "1 - 3",
+                        "d3-ease": "1 - 3",
+                        "d3-interpolate": "1 - 3",
+                        "d3-timer": "1 - 3"
+                    }
+                }
+            }
+        },
+        "d3-chord": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+            "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+            "requires": {
+                "d3-path": "1 - 3"
+            }
+        },
         "d3-color": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
             "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
         },
+        "d3-contour": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.0.tgz",
+            "integrity": "sha512-7aQo0QHUTu/Ko3cP9YK9yUTxtoDEiDGwnBHyLxG5M4vqlBkO/uixMRele3nfsfj6UXOcuReVpVXzAboGraYIJw==",
+            "requires": {
+                "d3-array": "^3.2.0"
+            },
+            "dependencies": {
+                "d3-array": {
+                    "version": "3.2.0",
+                    "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.0.tgz",
+                    "integrity": "sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==",
+                    "requires": {
+                        "internmap": "1 - 2"
+                    }
+                }
+            }
+        },
+        "d3-delaunay": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+            "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+            "requires": {
+                "delaunator": "5"
+            }
+        },
         "d3-dispatch": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
@@ -5111,16 +5557,64 @@
                 "d3-selection": "2"
             }
         },
+        "d3-dsv": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+            "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+            "requires": {
+                "commander": "7",
+                "iconv-lite": "0.6",
+                "rw": "1"
+            },
+            "dependencies": {
+                "commander": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+                    "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+                }
+            }
+        },
         "d3-ease": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
             "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
         },
+        "d3-fetch": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+            "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+            "requires": {
+                "d3-dsv": "1 - 3"
+            }
+        },
+        "d3-force": {
+            "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==",
+            "requires": {
+                "d3-dispatch": "1 - 3",
+                "d3-quadtree": "1 - 3",
+                "d3-timer": "1 - 3"
+            }
+        },
         "d3-format": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
             "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
         },
+        "d3-geo": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.0.1.tgz",
+            "integrity": "sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==",
+            "requires": {
+                "d3-array": "2.5.0 - 3"
+            }
+        },
+        "d3-hierarchy": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+            "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+        },
         "d3-interpolate": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
@@ -5134,6 +5628,21 @@
             "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
             "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
         },
+        "d3-polygon": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+            "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+        },
+        "d3-quadtree": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+            "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+        },
+        "d3-random": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+            "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+        },
         "d3-scale": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
@@ -5146,6 +5655,15 @@
                 "d3-time-format": "2 - 3"
             }
         },
+        "d3-scale-chromatic": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+            "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+            "requires": {
+                "d3-color": "1 - 3",
+                "d3-interpolate": "1 - 3"
+            }
+        },
         "d3-selection": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
@@ -5493,6 +6011,14 @@
                 }
             }
         },
+        "delaunator": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+            "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+            "requires": {
+                "robust-predicates": "^3.0.0"
+            }
+        },
         "delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -18614,6 +19140,11 @@
                 "glob": "^7.1.3"
             }
         },
+        "robust-predicates": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+            "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g=="
+        },
         "rope-sequence": {
             "version": "1.3.3",
             "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz",
@@ -18650,6 +19181,11 @@
                 }
             }
         },
+        "rw": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+            "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+        },
         "rxjs": {
             "version": "6.6.7",
             "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
diff --git a/package.json b/package.json
index 1e43390d8..4a61f09a9 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "@types/connect-flash": "0.0.34",
         "@types/cookie-parser": "^1.4.2",
         "@types/cookie-session": "^2.0.44",
+        "@types/d3": "^7.4.0",
         "@types/dotenv": "^6.1.1",
         "@types/exif": "^0.6.3",
         "@types/express": "^4.17.13",
@@ -66,17 +67,17 @@
         "@types/prosemirror-view": "^1.23.1",
         "@types/rc-switch": "^1.9.2",
         "@types/react": "^18.0.15",
-        "@types/react-icons": "^3.0.0",
-        "@types/react-reconciler": "^0.26.4",
-        "@types/react-transition-group": "^4.4.5",
         "@types/react-autosuggest": "^9.3.14",
         "@types/react-color": "^2.17.6",
         "@types/react-datepicker": "^3.1.8",
         "@types/react-dom": "^18.0.6",
         "@types/react-grid-layout": "^1.3.2",
+        "@types/react-icons": "^3.0.0",
         "@types/react-measure": "^2.0.8",
+        "@types/react-reconciler": "^0.26.4",
         "@types/react-select": "^3.1.2",
         "@types/react-table": "^6.8.9",
+        "@types/react-transition-group": "^4.4.5",
         "@types/request": "^2.48.8",
         "@types/request-promise": "^4.1.48",
         "@types/rimraf": "^2.0.5",
@@ -180,6 +181,7 @@
         "cookie-parser": "^1.4.6",
         "cookie-session": "^2.0.0",
         "cors": "^2.8.5",
+        "d3": "^7.6.1",
         "depcheck": "^0.9.2",
         "equation-editor-react": "github:bobzel/equation-editor-react#useLocally",
         "exif": "^0.6.0",
diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index 42bd8a7f6..36d23d30e 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -6,81 +6,37 @@ import { Doc } from '../../../../fields/Doc';
 import { ChartJSOrUndefined } from 'react-chartjs-2/dist/types';
 import { action, computed, observable } from 'mobx';
 import { Cast, StrCast } from '../../../../fields/Types';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+// import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
+import { LineChart } from './LineChart';
 
 export interface ChartBoxProps {
     rootDoc: Doc;
     pairs: { x: number; y: number }[];
 }
 
-export interface ChartJsData {
-    labels: number[];
-    datasets: {
-        label: string;
-        data: number[];
-        backgroundColor: string[];
-    }[];
-}
-
-// ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement, LineElement);
-
 const primaryColor = 'rgba(53, 162, 235, 0.5)';
 const selectedColor = 'rgba(255, 99, 132, 0.5)';
 
-const data = [
-    {
-        name: 'Page A',
-        uv: 4000,
-        pv: 2400,
-        amt: 2400,
-    },
-    {
-        name: 'Page B',
-        uv: 3000,
-        pv: 1398,
-        amt: 2210,
-    },
-    {
-        name: 'Page C',
-        uv: 2000,
-        pv: 9800,
-        amt: 2290,
-    },
-    {
-        name: 'Page D',
-        uv: 2780,
-        pv: 3908,
-        amt: 2000,
-    },
-    {
-        name: 'Page E',
-        uv: 1890,
-        pv: 4800,
-        amt: 2181,
-    },
-    {
-        name: 'Page F',
-        uv: 2390,
-        pv: 3800,
-        amt: 2500,
-    },
-    {
-        name: 'Page G',
-        uv: 3490,
-        pv: 4300,
-        amt: 2100,
-    },
-];
-
 export interface RechartData {
     name: string | number;
     y: number;
 }
 
+export interface DataPoints {
+    x: number;
+    y: number;
+}
+
+export interface ChartData {
+    xLabel: string;
+    yLabel: string;
+    data: DataPoints[];
+}
+
 @observer
 export class ChartBox extends React.Component<ChartBoxProps> {
-    @observable private _chartData: RechartData[] = [];
+    @observable private _chartData: ChartData | undefined = undefined;
 
     @computed get currView() {
         if (this.props.rootDoc._dataVizView) {
@@ -104,16 +60,22 @@ export class ChartBox extends React.Component<ChartBoxProps> {
             return;
         }
 
-        // generate the chart data according to the RechartData type from the pairs prop
-        const chartData: RechartData[] = [];
-        this.props.pairs.forEach(pair => {
-            chartData.push({
-                name: pair.x,
-                y: pair.y,
+        const data: ChartData = {
+            xLabel: '',
+            yLabel: '',
+            data: [],
+        };
+
+        if (this.props.pairs && this.props.pairs.length > 0) {
+            data.xLabel = 'x';
+            data.yLabel = 'y';
+            this.props.pairs.forEach(pair => {
+                data.data.push({ x: pair.x, y: pair.y });
             });
-        });
+        }
 
-        this._chartData = chartData;
+        this._chartData = data;
+        this.props.rootDoc._chartData = JSON.stringify(data);
     }
 
     // @action
@@ -200,35 +162,35 @@ export class ChartBox extends React.Component<ChartBoxProps> {
     //     console.log(e);
     // }
 
-    @computed get reLineChart() {
-        return (
-            <ResponsiveContainer width="80%" height="80%">
-                <LineChart
-                    width={500}
-                    height={300}
-                    data={this._chartData}
-                    margin={{
-                        top: 5,
-                        right: 30,
-                        left: 20,
-                        bottom: 5,
-                    }}
-                    onMouseDown={e => console.log(e)}
-                    onMouseMove={e => this.onMouseMove(e)}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="name" onMouseDown={e => console.log(e)} />
-                    <YAxis />
-                    <Tooltip />
-                    <Legend />
-                    <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} />
-                    {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
-                </LineChart>
-            </ResponsiveContainer>
-        );
-    }
+    // @computed get reLineChart() {
+    //     return (
+    //         // <ResponsiveContainer width="80%" height="80%">
+    //         <LineChart
+    //             width={500}
+    //             height={300}
+    //             data={this._chartData}
+    //             margin={{
+    //                 top: 5,
+    //                 right: 30,
+    //                 left: 20,
+    //                 bottom: 5,
+    //             }}
+    //             onMouseDown={e => console.log(e)}
+    //             onMouseMove={e => this.onMouseMove(e)}>
+    //             <CartesianGrid strokeDasharray="3 3" />
+    //             <XAxis dataKey="name" onMouseDown={e => console.log(e)} />
+    //             <YAxis />
+    //             <Tooltip />
+    //             <Legend />
+    //             <Line type="monotone" dataKey="y" stroke="#8884d8" activeDot={{ r: 8, onClick: this.handleDotClick }} />
+    //             {/* <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> */}
+    //         </LineChart>
+    //         // </ResponsiveContainer>
+    //     );
+    // }
 
     render() {
-        if (this.props.pairs && this._chartData.length > 0) {
+        if (this.props.pairs && this._chartData) {
             return (
                 <div>
                     <div>
@@ -237,7 +199,8 @@ export class ChartBox extends React.Component<ChartBoxProps> {
                         ) : (
                             <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={e => this.onClick(e)} />
                         )} */}
-                        {this.reLineChart}
+                        {/* {this.reLineChart} */}
+                        <LineChart width={500} height={300} data={this._chartData} />
                     </div>
                     <button onClick={e => this.onClickChangeChart(e)} value="line">
                         Line
diff --git a/src/client/views/nodes/DataVizBox/LineChart.tsx b/src/client/views/nodes/DataVizBox/LineChart.tsx
new file mode 100644
index 000000000..2d2e67d4f
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/LineChart.tsx
@@ -0,0 +1,122 @@
+import { computed, IReactionDisposer, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { ChartData, DataPoints } from './ChartBox';
+// import d3
+import * as d3 from 'd3';
+
+interface LineChartProps {
+    data: ChartData;
+    width: number;
+    height: number;
+}
+
+@observer
+export class LineChart extends React.Component<LineChartProps> {
+    private _dataReactionDisposer: IReactionDisposer | undefined = undefined;
+
+    componentDidMount() {
+        console.log('Getting to line chart');
+        this.drawChart();
+        this._dataReactionDisposer = reaction(() => this.props.data, this.drawChart);
+    }
+
+    componentWillUnmount() {
+        if (this._dataReactionDisposer) {
+            this._dataReactionDisposer();
+        }
+    }
+
+    drawChart() {
+        console.log('Getting called');
+        console.log(this.props.data);
+        const margin = { top: 50, right: 50, bottom: 50, left: 50 };
+        const { data } = this.props;
+
+        const yMin = d3.min(data.data, d => d.y);
+        const yMax = d3.max(data.data, d => d.y);
+
+        // TODO: nda - modify data.x to support strings
+
+        const xMin = d3.min(data.data, d => d.x);
+        const xMax = d3.max(data.data, d => d.x);
+
+        // adding svg
+        const svg = d3.select('#chart-container').append('svg').attr('width', '100%').attr('height', '100%').append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
+
+        // adding tooltip
+        // const tooltip = d3.select('#chart-container').append('div').attr('class', 'tooltip');
+
+        if (!xMin || !xMax || !yMin || !yMax) {
+            // TODO: nda - error handle
+            return;
+        }
+        // adding x axis
+        const xScale = d3.scaleLinear().domain([xMin, xMax]).range([0, this.props.width]);
+
+        const yScale = d3.scaleLinear().domain([yMin, yMax]).range([this.props.height, 0]);
+
+        // create a line function that takes in the data.data.x and data.data.y
+        // TODO: nda - fix the types for the d here
+        const lineGen = d3
+            .line<DataPoints>()
+            .x(d => xScale(d.x))
+            .y(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+        // adding the line to the svg
+        svg.append('g')
+            .attr('class', 'grid')
+            .attr('transform', `translate(0,${this.props.height})`)
+            .call(
+                d3
+                    .axisBottom(xScale)
+                    .tickSize(-this.props.height)
+                    .tickFormat((a, b) => '')
+            );
+        svg.append('g')
+            .attr('class', 'grid')
+            .call(
+                d3
+                    .axisLeft(yScale)
+                    .tickSize(-this.props.width)
+                    .tickFormat((a, b) => '')
+            );
+        svg.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${this.props.height})`).call(d3.axisBottom(xScale).tickSize(15));
+        svg.append('g').attr('class', 'y-axis').call(d3.axisLeft(yScale));
+
+        // draw the line
+        svg.append('path').datum(data.data).attr('fill', 'none').attr('stroke', '#f6c3d0').attr('stroke-width', 4).attr('class', 'line').attr('d', lineGen);
+
+        const focus = svg.append('g').attr('class', 'focus').style('display', 'none');
+        focus.append('circle').attr('r', 5).attr('class', 'circle');
+        // const tooltip = d3.select('#container').append('div').attr('class', 'tooltip').style('opacity', 0);
+
+        // const mousemove = (event) => {
+        //     const bisect = d3.bisector((d: DataPoints) => d.x).left;
+        //     const xPos = d3.pointer(this)[0];
+        //     const x0 = bisect(data.data, xScale.invert(xPos));
+        //     const d0 = data.data[x0];
+        //     focus.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`);
+        //     tooltip.transition().duration(300).style('opacity', 0.9);
+        //     tooltip.html(d0.tooltipContent || d0.label).style('transform', `translate(${xScale(d0.label) + 30}px,${yScale(d0.value) - 30}px)`);
+        // }
+
+        // svg.append('rect')
+        //     .attr('class', 'overlay')
+        //     .attr('width', this.props.width)
+        //     .attr('height', this.props.height)
+        //     .style('opacity', 0)
+        //     .on('mouseover', () => {
+        //         focus.style('display', null);
+        //     })
+        //     .on('mouseout', () => {
+        //         tooltip.transition().duration(300).style('opacity', 0);
+        //     })
+        //     .on('mousemove', mousemove);
+    }
+
+    render() {
+        return <div id="chart-container"></div>;
+    }
+}