From 12a814365c65029eb8943850b0b5069a6d005df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?= <gessfred@protonmail.com>
Date: Mon, 22 Jan 2024 23:19:38 +0000
Subject: [PATCH] visualize as bar chart with visx

---
 app/package-lock.json        | 347 +++++++++++++++++++++++++++++++++--
 app/package.json             |   5 +
 app/src/components/Chart.jsx |  75 ++++++++
 app/src/components/Code.jsx  |  13 +-
 app/src/pages/Notebook.jsx   |  22 +--
 5 files changed, 427 insertions(+), 35 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index efab387..41228f7 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -13,6 +13,11 @@
         "@heroicons/react": "^2.1.1",
         "@uiw/codemirror-themes": "^4.21.21",
         "@uiw/react-codemirror": "^4.21.21",
+        "@visx/gradient": "^3.3.0",
+        "@visx/group": "^3.3.0",
+        "@visx/mock-data": "^3.3.0",
+        "@visx/scale": "^3.5.0",
+        "@visx/shape": "^3.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "uniqid": "^5.4.0"
@@ -1405,23 +1410,103 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@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=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
+    },
+    "node_modules/@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=="
+    },
+    "node_modules/@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=="
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw=="
+    },
+    "node_modules/@types/d3-random": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.3.tgz",
+      "integrity": "sha512-Ghs4R3CcgJ3o6svszRzIH4b8PPYex/COo+rhhZjDAs+bVducXwjmVSi27WcDOaLLCBV2t3tfVH9bYXAL76IvQA=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.13",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.13.tgz",
+      "integrity": "sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ=="
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
       "version": "18.2.47",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.47.tgz",
       "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1440,8 +1525,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@uiw/codemirror-extensions-basic-setup": {
       "version": "4.21.21",
@@ -1518,6 +1602,105 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@visx/curve": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.3.0.tgz",
+      "integrity": "sha512-G1l1rzGWwIs8ka3mBhO/gj8uYK6XdU/3bwRSoiZ+MockMahQFPog0bUkuVgPwwzPSJfsA/E5u53Y/DNesnHQxg==",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "d3-shape": "^1.0.6"
+      }
+    },
+    "node_modules/@visx/gradient": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@visx/gradient/-/gradient-3.3.0.tgz",
+      "integrity": "sha512-t3vqukahDQsJ64/fcm85woFm2XPpSPMBz92gFvaY4J8EJY3e6rFOg382v5Dm17fgNsLRKJA0Vqo7mUtDe2pWOw==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/group": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.3.0.tgz",
+      "integrity": "sha512-yKepDKwJqlzvnvPS0yDuW13XNrYJE4xzT6xM7J++441nu6IybWWwextyap8ey+kU651cYDb+q1Oi6aHvQwyEyw==",
+      "dependencies": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/mock-data": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-3.3.0.tgz",
+      "integrity": "sha512-yb5R/tAU8fjwRSc5VL1UPYbkD+BoYjXUorblE3/oDcSfFrOvpRMZzSaYCBbZ6jtllge3Ks6QVzwyUUj1/xweqQ==",
+      "dependencies": {
+        "@types/d3-random": "^2.2.0",
+        "d3-random": "^2.2.2"
+      }
+    },
+    "node_modules/@visx/scale": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.5.0.tgz",
+      "integrity": "sha512-xo3zrXV2IZxrMq9Y9RUVJUpd93h3NO/r/y3GVi5F9AsbOzOhsLIbsPkunhO9mpUSR8LZ9TiumLEBrY+3frRBSg==",
+      "dependencies": {
+        "@visx/vendor": "3.5.0"
+      }
+    },
+    "node_modules/@visx/shape": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.5.0.tgz",
+      "integrity": "sha512-DP3t9jBQ7dSE3e6ptA1xO4QAIGxO55GrY/6P+S6YREuQGjZgq20TLYLAsiaoPEzFSS4tp0m12ZTPivWhU2VBTw==",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "3.3.0",
+        "@visx/group": "3.3.0",
+        "@visx/scale": "3.5.0",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/vendor": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@visx/vendor/-/vendor-3.5.0.tgz",
+      "integrity": "sha512-yt3SEZRVmt36+APsCISSO9eSOtzQkBjt+QRxNRzcTWuzwMAaF3PHCCSe31++kkpgY9yFoF+Gfes1TBe5NlETiQ==",
+      "dependencies": {
+        "@types/d3-array": "3.0.3",
+        "@types/d3-color": "3.1.0",
+        "@types/d3-delaunay": "6.0.1",
+        "@types/d3-format": "3.0.1",
+        "@types/d3-geo": "3.1.0",
+        "@types/d3-interpolate": "3.0.1",
+        "@types/d3-scale": "4.0.2",
+        "@types/d3-time": "3.0.0",
+        "@types/d3-time-format": "2.1.0",
+        "d3-array": "3.2.1",
+        "d3-color": "3.1.0",
+        "d3-delaunay": "6.0.2",
+        "d3-format": "3.1.0",
+        "d3-geo": "3.1.0",
+        "d3-interpolate": "3.0.1",
+        "d3-scale": "4.0.2",
+        "d3-time": "3.1.0",
+        "d3-time-format": "4.1.0",
+        "internmap": "2.0.3"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
@@ -1960,6 +2143,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2049,8 +2237,122 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "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-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-random": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+    },
+    "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-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "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-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/debug": {
       "version": "4.3.4",
@@ -2106,6 +2408,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3089,6 +3399,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/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -3602,6 +3920,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3749,7 +4072,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4198,7 +4520,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4260,8 +4581,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.0",
@@ -4386,6 +4706,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "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/rollup": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.4.tgz",
diff --git a/app/package.json b/app/package.json
index 6feedc6..ac29e53 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,6 +15,11 @@
     "@heroicons/react": "^2.1.1",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
+    "@visx/gradient": "^3.3.0",
+    "@visx/group": "^3.3.0",
+    "@visx/mock-data": "^3.3.0",
+    "@visx/scale": "^3.5.0",
+    "@visx/shape": "^3.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "uniqid": "^5.4.0"
diff --git a/app/src/components/Chart.jsx b/app/src/components/Chart.jsx
index e69de29..07bc893 100644
--- a/app/src/components/Chart.jsx
+++ b/app/src/components/Chart.jsx
@@ -0,0 +1,75 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react'
+import { Bar } from '@visx/shape'
+import { Group } from '@visx/group'
+import { GradientTealBlue } from '@visx/gradient'
+import { scaleBand, scaleLinear } from '@visx/scale'
+
+const verticalMargin = 120
+
+function useSvgDimensions() {
+  const ref = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+  }, []);
+
+  return [ref, dimensions];
+}
+
+export default function Chart({ data }) {
+  const data_ = data || []
+  const [svgRef, dimensions] = useSvgDimensions()
+  const xMax = dimensions.width;
+  const yMax = dimensions.height - verticalMargin;
+  // scales, memoize for performance
+  const xScale = useMemo(
+    () => scaleBand({
+      range: [0, xMax],
+      round: true,
+      domain: data_?.map(x => x.x),
+      padding: 0.4,
+    }),
+    [xMax, JSON.stringify(data)]
+  )
+  const yScale = useMemo(
+    () => scaleLinear({
+      range: [yMax, 0],
+      round: true,
+      domain: [0, Math.max(...data_?.map(x => x.y))],
+    }),
+    [yMax, JSON.stringify(data)],
+  )
+  console.log("drawing", data_, dimensions)
+  if(!data) return null
+  return (
+    <svg className='w-full h-200' ref={svgRef}>
+      <GradientTealBlue id="teal" />
+      <rect height="150px" width="100%" fill="url(#teal)" rx={14} />
+      <Group top={verticalMargin / 2}>
+        {data_?.map(({x, y}) => {
+          const barWidth = xScale.bandwidth();
+          const barHeight = yMax - (yScale(y) ?? 0);
+          const barX = xScale(x);
+          const barY = yMax - barHeight;
+          return (
+            <Bar
+              key={`bar-${x}`}
+              x={barX}
+              y={barY}
+              width={barWidth}
+              height={barHeight}
+              fill="rgba(23, 233, 217, .5)"
+              onClick={() => {
+                console.log("clicked graph")
+              }}
+            />
+          );
+        })}
+      </Group>
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/app/src/components/Code.jsx b/app/src/components/Code.jsx
index c834e46..e928428 100644
--- a/app/src/components/Code.jsx
+++ b/app/src/components/Code.jsx
@@ -41,22 +41,16 @@ const mainTheme = createTheme({
 })
 
 export function CodeEditor({code, setCode, onCtrlEnter}) {
-  const editor = useRef()
   const handleCmdEnter = (event) => {
-    console.log('cut @', window.getSelection())
     const {keyCode, ctrlKey}  = event
     if(ctrlKey && keyCode == 13) {
-      console.log(window.getSelection().toString())
       const execode = extractTextBetweenSemicolons(code, window.getSelection().baseOffset)
-      console.log("EXEC", execode)
       onCtrlEnter()
     } else {
       console.log(keyCode)
     }
   }
-  useEffect(() => {
-    console.log('REF', editor.current)
-  }, [editor])
+  const onStatistics = () => {}
   return (
     <CodeMirror 
       value={code}
@@ -67,8 +61,7 @@ export function CodeEditor({code, setCode, onCtrlEnter}) {
       }}
       style={{outline: 'none', border: 'none'}}
       className='border-transparent'
-      ref={editor}
-      minHeight='100px'
+      minHeight='40px'
       basicSetup={{
         lineNumbers: false,
         highlightActiveLine: false,
@@ -84,7 +77,7 @@ export function CodeEditor({code, setCode, onCtrlEnter}) {
       onKeyDown={handleCmdEnter}
         onSelect={e => console.log('SELECT', e)}
       autoFocus={true}
-      onStatistics={(s) => console.log('statistics', s)}
+      onStatistics={onStatistics}
     />
   )
 }
\ No newline at end of file
diff --git a/app/src/pages/Notebook.jsx b/app/src/pages/Notebook.jsx
index 61b6861..7d1c625 100644
--- a/app/src/pages/Notebook.jsx
+++ b/app/src/pages/Notebook.jsx
@@ -16,6 +16,7 @@ import {
 } from '@heroicons/react/20/solid'
 import { Menu, Transition } from '@headlessui/react'
 import Dropdown from '../components/Dropdown'
+import Chart from '../components/Chart'
 function execSql(api, query, datasource, onSuccess, onError) {
   console.log(query, datasource, {"query": query, datasource_id: datasource})
   api.post('/query', {"query": query, datasource_id: datasource}, {
@@ -192,7 +193,7 @@ function CellContainer({children}) {
   return (
     <div className="mx-auto max-w-7xl px-8 sm:px-6 lg:px-8 py-12 shadow-lg rounded-lg">
       {/* We've used 3xl here, but feel free to try other max-widths based on your needs */}
-      <div className="mx-auto max-w-7xl space-y-16">
+      <div className="mx-auto max-w-7xl space-y-8">
         {children}
       </div>
     </div>
@@ -200,13 +201,12 @@ function CellContainer({children}) {
 }
 
 function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onRun}) {
-  const [state, setState] = useState({isComputing: false}) 
-  console.log('NotebookCell', cell, state, datasource)
+  const [state, setState] = useState({isComputing: false})
   const onQueryResult = res => {
-    console.log("RECEIVED result", res)
     setResult(res)
     setState({isComputing: false})
   }
+  const chartData = ((cell?.result?.rows) || []).map(row => Object.fromEntries(cell.result.columns.map((column, k) => [column, k > 0 ? Number.parseInt(row[k]) : row[k]])))
   return (
     <CellContainer>
       <CodeEditor 
@@ -225,6 +225,9 @@ function NotebookCell({api, datasource, setQuery, setResult, setStyle, cell, onR
         columns={cell.result.columns} 
         rows={cell.result.rows}
       />}
+      <Chart 
+        data={chartData.reverse()}
+      />
       {cell.result.error && <span>{JSON.stringify(cell?.result?.error)}</span>}
     </CellContainer>
   )
@@ -255,13 +258,11 @@ export function Notebook({api, datasource, show, data}) {
   }
   const addCell = () => {
     const newCellID = uniqid()
-    console.log("new cell", newCellID)
     setState(prev => Object.assign({}, prev, {cells: Object.assign({}, prev.cells, {[newCellID]: {
       "query": "", "result": {}, "position": 1, "id": newCellID
     }})}))
   }
   useEffect(() => {
-    console.log('datasource', datasource)
       setState(Object.assign({}, data, {datasource_id: datasource?.datasource_id || data?.datasource_id, cells: Object.fromEntries((data?.cells || []).map(cell => [cell.id, cell]))}))
   }, [data, datasource])
   const cells = Object.values(state.cells)
@@ -287,20 +288,13 @@ export function Notebook({api, datasource, show, data}) {
           setQuery={updateCell(cell, 'query')}
           setResult={updateCell(cell, 'result')}
           setStyle={updateCell(cell, 'style')}
-          onRun={() => {
-            console.log("Add cell? Ctrl-Enter", idx, cells.length - 1)
-            if(idx >= cells.length - 1) {
-              console.log("Auto add cell")
-              addCell()
-            }
-          }}
+          onRun={idx >= cells.length - 1 ? addCell : () => {}}
         />)}
       </div>
     </div>
   )
 }
 
-//{idx >= state.cells.length - 1 ? addCell : () => {}}
 /*
 saveNotebook={() => {
           api.userdata.notebooks.write(Object.assign({}, state, {cells: Object.values(state.cells)}))