going in the very right direction!

frontend/main.js

@@ -1,4 +1,5 @@
 import anime from "https://esm.sh/animejs@3.2.2";
+import m from "https://esm.sh/mithril@2.2.2"
 
 const second = 1000;
 
@@ -13,7 +14,6 @@ function gaussianRandom(mean=0, stdev=1) {
     return z * stdev + mean;
 }
 
-
 function* brownian(n){
     let x = 0;
     for(let i = 0; i < n; i ++){
@@ -64,3 +64,38 @@ document.querySelector('#seek').onclick = function(){
     timeline.pause();
     timeline.seek(seekVal);
 }
+
+
+function generatePoints(points, frames){
+    const lst = [];
+    for(const point of points.points){
+        if(frames.indexOf(point.frameIndex) !== -1){
+            lst.push(m("circle", {cx: point.x, cy: point.y, r: 3}));
+        }
+    }
+    return m("g", lst);
+}
+
+function getTimeStamp(points, frameId){
+    for(const point of points.points){
+        if(point.frameIndex === frameId){
+            return `${point.frameTimestamp / 1000} seconds`;
+        }
+    }
+}
+
+const url = "/dodgeball-tracker/outputs/output.json";
+const resp = await fetch(url);
+const points = await resp.json();
+
+function range(min, max){
+    const ret = [];
+    while(min < max){
+        ret.push(min);
+        min ++;
+    }
+    return ret
+}
+
+m.render(document.getElementById("first"), generatePoints(points, range(-10, 400)));
+m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points, 80)));