32:T139b,chart = overlayPolygon((svg) => { const maxFrameNum = d3.max(frames, (d) => d.frameNum); const gEgo = svg .append("g") .attr("fill-opacity", 1) .attr("stroke-linecap", "round"); const ego = gEgo .selectAll("path.ego") .data(frames) .join("path") .attr("class", "ego") .attr("d", (d) => carPath(d.egoTranslation, d.egoRotation)) .attr("fill-opacity", 0.2) .attr("stroke", (d) => d3.interpolateViridis(d.frameNum / maxFrameNum)) .attr("fill", d3.interpolateViridis(0)); // const gCamera = svg // .append("g") // .attr("fill-opacity", 1) // .attr("stroke-linecap", "round"); // const camera = gCamera // .selectAll("path.camera") // .data(frames) // .join("path") // .attr("class", "camera") // .attr("d", (d) => // cameraPath(d.cameraTranslation, d.cameraRotation, d.cameraIntrinsic) // ) // .attr("fill-opacity", 0.1) // .attr("stroke-opacity", 0) // .attr("fill", "yellow"); // const gDetection = svg // .append("g") // .attr("fill-opacity", 1) // .attr("stroke-linecap", "round"); // const detection = gDetection // .selectAll("circle.detection") // .data(detections.filter((d) => d.point_from_camera[2] > 0)) // .join("circle") // .attr("class", "detection") // .attr("cx", (d) => x(d.point[0])) // .attr("cy", (d) => y(d.point[1])) // .attr("r", 0.2) // .style("fill", (d) => objectColorScale(parseInt(d.object_id) % 10)); // const gTracking = svg // .append("g") // .attr("fill-opacity", 0) // .attr("stroke-linecap", "round"); // const tracking = gTracking // .selectAll("path.tracking") // .data(trackings) // .join("path") // .attr("class", "tracking") // .attr( // "d", // (d) => // "M " + // d.tracking.map((t) => `${x(t.point[0])} ${y(t.point[1])}`).join(" L ") // ) // .attr("stroke-width", 0.05) // .attr("stroke", (d) => objectColorScale(parseInt(d.oid) % 10)); const gGTDetection = svg .append("g") .attr("fill-opacity", 1) .attr("stroke-linecap", "round"); const gtDetection = gGTDetection .selectAll("circle.gtdetection") .data(gtDetections) .join("circle") .attr("class", "gtdetection") .attr("cx", (d) => x(d.translation[0])) .attr("cy", (d) => y(d.translation[1])) .attr("r", 0.2) .style("fill", (d) => objectColorScale(d.instance_token.charCodeAt(0) % 10) ); const gGTTracking = svg .append("g") .attr("fill-opacity", 0) .attr("stroke-linecap", "round"); const gtTracking = gGTTracking .selectAll("path.gttracking") .data(gtTrackings) .join("path") .attr("class", "gttracking") .attr( "d", (d) => "M " + d.tracking .map((t) => `${x(t.translation[0])} ${y(t.translation[1])}`) .join(" L ") ) .style("stroke-width", 0.1) .style("stroke-opacity", 0.5) .attr("stroke", (d) => objectColorScale(d.oid.charCodeAt(0) % 10)); return Object.assign( [ gEgo, // gCamera, // gDetection, // gTracking, gtDetection, gtTracking ], { update(frameId, timestamp) { ego.attr("opacity", (d, i) => (i === frameId ? 1 : 0)); // camera.attr("opacity", (d, i) => (i === frameId ? 1 : 0)); // detection.attr("opacity", (d) => (d.frameId === frameId ? 1 : 0)); // tracking.attr("opacity", (d) => { // if (d.tracking.some((d) => d.point_from_camera[2] < 0)) { // return 0; // } // const frameIds = d.tracking.map((t) => t.frameId); // return Math.min(...frameIds) <= frameId && // frameId <= Math.max(...frameIds) // ? 1 // : 0; // }); const showingGTTracking = {}; gtTracking.attr("opacity", (d) => { const timestamps = d.tracking.map((t) => t.timestamp); const show = Math.min(...timestamps) <= timestamp && timestamp <= Math.max(...timestamps); if (show) { showingGTTracking[d.oid] = d.tracking; } return show ? 1 : 0; }); const closestGTDetection = {}; for (const [oid, _tracking] of Object.entries(showingGTTracking)) { let closest = null; let closestTracking = null; for (const t of _tracking) { const diff = timediff(timestamp, t.timestamp); if (closestTracking === null || diff < closest) { closest = diff; closestTracking = t; } } closestGTDetection[oid] = closestTracking; } gtDetection.attr("opacity", (d) => { if (!(d.instance_token in closestGTDetection)) { return 0; } return closestGTDetection[d.instance_token].sample_token === d.sample_token ? 1 : 0; }); } } ); })33:T414,function overlayPolygon(createOverlay) { const zoom = d3.zoom().on("zoom", zoomed); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const gGrid = svg.append("g"); const gPath = createPath(svg, polygon); const gOverlay = createOverlay(svg); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed({ transform }) { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound); const zy = transform.rescaleY(y).interpolate(d3.interpolateRound); gPath.attr("transform", transform).attr("stroke-width", 3 / transform.k); gOverlay.forEach((o) => o.attr("transform", transform).attr("stroke-width", 3 / transform.k) ); gx.call(xAxis, zx); gy.call(yAxis, zy); gGrid.call(grid, zx, zy); } return Object.assign(svg.node(), { reset() { svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity); }, update(...args) { gOverlay.update(...args); } }); }34:T4d4,function createDirection(svg, data) { const gDirection = svg .append("g") .attr("fill-opacity", 1) .attr("stroke-linecap", "round"); gDirection .selectAll("path.direction") .data(data) .join("path") .attr("class", "direction") .attr("d", drawDirection) .attr("stroke", (d) => z(d.heading)) .on("mouseover", (event, d) => { tooltip.style("visibility", "visible").text((d.heading * 180) / Math.PI); const _x = d.end[0] - d.start[0]; const _y = d.end[1] - d.start[1]; const size = Math.sqrt(_x * _x + _y * _y); d3.select("path.angle") .attr("opacity", 1) .attr("d", `M 100 60 l ${(_x * 30) / size} ${(-_y * 30) / size}`); d3.selectAll("path.path-hidden") .filter((dd) => dd.id === d.polygonId) .attr("opacity", 1) .attr("fill", () => z(d.heading)); }) .on("mousemove", (event) => { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); d3.select("path.angle").attr("opacity", 0); d3.selectAll("path.path-hidden").attr("opacity", 0); }); return gDirection; }35:[{"id":"f20155bd836c31e492fe635700c845d9c007021aaf1f4963a233a011e8e737e88ad7bcad99f8c97023f1214a794224d8bbe1442378e5c875e586d142bdc31a27","href":"https://static.observableusercontent.com/files/f20155bd836c31e492fe635700c845d9c007021aaf1f4963a233a011e8e737e88ad7bcad99f8c97023f1214a794224d8bbe1442378e5c875e586d142bdc31a27","name":"frames@3.json","type":"application/json","lastModified":1666221593514.662,"size":5346576},{"id":"e66711716e627cf382b58bf5eb14e18323a0624181e12979a9a105e7ed788a4f03c1f86bdb9736699c6f0d1533f1395ab221cacf211e630433703b4f2c1777e9","href":"https://static.observableusercontent.com/files/e66711716e627cf382b58bf5eb14e18323a0624181e12979a9a105e7ed788a4f03c1f86bdb9736699c6f0d1533f1395ab221cacf211e630433703b4f2c1777e9","name":"polygon@1.json","type":"application/json","lastModified":1666221593514.662,"size":2135068},{"id":"550269f004b31b68330e941557f74c7671a368daa161240606495d842102ed39922923f19980aaab7baa8db81d5583c3d9258649fdd60ab862d05c4e786bb430","href":"https://static.observableusercontent.com/files/550269f004b31b68330e941557f74c7671a368daa161240606495d842102ed39922923f19980aaab7baa8db81d5583c3d9258649fdd60ab862d05c4e786bb430","name":"segment@1.json","type":"application/json","lastModified":1666221593514.662,"size":2405485},{"id":"239bd47281d76d9c7882c30ec123111fad349d13435d202bf9b19e4ce663b162f25b58553896234bcb4b3db63b86b08e434ab827ad910f08552cd1fed7686775","href":"https://static.observableusercontent.com/files/239bd47281d76d9c7882c30ec123111fad349d13435d202bf9b19e4ce663b162f25b58553896234bcb4b3db63b86b08e434ab827ad910f08552cd1fed7686775","name":"tracking3dnaive.json","type":"application/json","lastModified":1666221593514.662,"size":563646},{"id":"4468cb048182323a1df2d371878708901c60d8bd80e15546039891ab5c2c9b845f722f54f8372e8d4bcbe320e6cc8474bc9359ddc2d5100ce844b24556a347a6","href":"https://static.observableusercontent.com/files/4468cb048182323a1df2d371878708901c60d8bd80e15546039891ab5c2c9b845f722f54f8372e8d4bcbe320e6cc8474bc9359ddc2d5100ce844b24556a347a6","name":"ground_truth_annotation.json","type":"application/json","lastModified":1666221711703.115,"size":2550431}] 30:{"title":"nuScene's boston-seaport road network with ground truth","cells":[{"id":0,"value":"# nuScene's boston-seaport road network with ground truth","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"viewof scene = Inputs.text({\n label: \"Scene\",\n value: \"scene-0757-CAM_FRONT\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"sceneName = scene.substring(0, \"scene-0000\".length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"viewof selectedTimestamp = Scrubber(\n frames.map((f) => f.timestamp),\n { delay: 1000 / 20 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"frameId = frames.findIndex((f) => f.timestamp === selectedTimestamp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof reset = html`