Robotics.university
Public
Edited
Dec 14, 2024
1 star
qviewof table = Inputs.table(fly_io)
actions = await d3.json('https://www.dynabot.dev/api/scripts')
fly_io = await d3.json("https://www.dynabot.dev/api/supabase")
map = {
// canvas.style.opacity = 0;
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([37.774, -122.423], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
"© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
import { canvas } from "@mbostock/prims-algorithm-iv"
//canvas.style
// html`
// make one cell work at a time
// <div className="" style="relative">
// ${map}
// ${canvas}
// </div>
// `
layeredView = {
// Create a parent container with relative positioning
const container = html`<div style="position: relative; width: 500px; height: 500px;"></div>`;
// Wrap the map and canvas in absolutely positioned containers
const mapContainer = html`<div style="position:absolute; top:0; left:0; width:100%; height:100%;">
${map}
</div>`;
const canvasContainer = html`<div style="position:absolute; top:0; left:0; width:100%; height:100%;">
${canvas}
</div>`;
container.appendChild(mapContainer);
container.appendChild(canvasContainer);
// Set an interval to fade the map in and out periodically
let opacity = 1.0;
setInterval(() => {
opacity = opacity === 1.0 ? 0.5 : 1.0;
mapContainer.style.opacity = opacity;
}, 1000); // change every 1 second
return container;
}
//yield canvas
wikigame = {
}
// map_2 = {
// const container = yield htl.html`${canvas}<div style="height: 500px;"></div>`;
// // Initialize the map
// const map = L.map(container).setView([37.774, -122.423], 13);
// // Add a tile layer (OpenStreetMap)
// L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
// attribution:
// "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
// }).addTo(map);
// // Example overlay: Algorithmic polyline
// const routeCoords = [
// [37.774, -122.423],
// [37.775, -122.42],
// [37.776, -122.417]
// ];
// L.polyline(routeCoords, { color: "blue", weight: 3 }).addTo(map);
// // Example overlay: Polygon
// const polygonCoords = [
// [37.779, -122.423],
// [37.779, -122.433],
// [37.769, -122.433],
// [37.769, -122.423]
// ];
// L.polygon(polygonCoords, { color: "green", fillColor: "lightgreen" }).addTo(
// map
// );
// // Example overlay: GeoJSON line
// const geojsonData = {
// type: "Feature",
// geometry: {
// type: "LineString",
// coordinates: [
// [-122.423, 37.774],
// [-122.42, 37.775],
// [-122.417, 37.776]
// ]
// },
// properties: {
// name: "Algorithmic Path"
// }
// };
// L.geoJSON(geojsonData, {
// style: { color: "red", weight: 4 }
// }).addTo(map);
// // Example overlay: Marker
// const marker = L.marker([37.774, -122.423]).addTo(map);
// marker.bindPopup("Algorithm-identified point!");
// return map;
// }
import { canvas, } from "1ce6a35820048d67"
viewof boxWidth = Inputs.range([0, 1], { label: "Box width" })
canvas_2 = {
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, boxWidth * width, height);
context.canvas.style.background = "hsl(216deg 20% 90%)";
return context.canvas;
}
height = 200
html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
<!-- Larger square -->
<rect x="200" y="50" width="160" height="160" fill="none" stroke="#2c3e50" stroke-width="2"/>
<!-- Smaller square -->
<rect x="40" y="90" width="80" height="80" fill="none" stroke="#2c3e50" stroke-width="2"/>
<!-- Projection lines -->
<line x1="40" y1="90" x2="200" y2="50" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="120" y1="90" x2="360" y2="50" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="40" y1="170" x2="200" y2="210" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="120" y1="170" x2="360" y2="210" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<!-- Labels -->
<text x="60" y="140" fill="#2c3e50" font-size="12">Source</text>
<text x="250" y="140" fill="#2c3e50" font-size="12">Projection</text>
<!-- Arrow -->
<path d="M140 130 L180 130" stroke="#3498db" stroke-width="2"/>
<path d="M180 130 L170 125 L170 135 Z" fill="#3498db"/>
</svg>`
magic_iframe = html`<iframe width="560" height="315" src="https://www.youtube.com/embed/1pSglMxWqfo?si=Q_X3ciMtW-mUfDxP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
