2c:null 2d:["$","title",null,{"children":"Snippets | tiga1231 | Observable"}] 32:T46b,--- ## Back-and-forth interaction between cells Context: Observable's reactive nature is awesome, but sometimes the cell dependency DAG forbids back-and-forth interaction between cells. This example provides a workaround without ```mutable``` variables. Idea: - Define a main cell (in this example, ```cell_a``` ) as ```viewof```, which updates its value on user interactions (in this example, ```mousemove```). Also, define APIs for responses to other cells. - Define other cells, let's call them auxiliary, however you like (i.e., with or without ```viewof``` ). User interactions in these cells will call APIs on the main cell to update the main view. What's regarded as main is merely a matter of choice. I tend to treat the most data-rich, most interactive cell as the main cell, as other cells can access the main data easily thanks to ```viewof``` and change their behavior accordingly. Note that the auxiliary cells is somewhat _stateless_ - once interaction happens to the main, all auxiliary cells get reset. For multiple cells, one can design a DAG as the main interaction flow, and all the 'loop backs' as API calls.33:T4db,linked_scatter_with_image_grid = { //scatter plot let sca = scatter(undefined, image_scatter_data, { width: width / 2, s: (d) => 20 // zoom: false }); let image_grid = flexbox([], width / 2); //Define brush; let brush = d3.brush().on("brush", (event) => { // console.log(event); let [[x0, y0], [x1, y1]] = event.selection; let sx = sca.scales.sx; let sy = sca.scales.sy; [x0, x1] = [sx.invert(x0), sx.invert(x1)]; [y0, y1] = [sy.invert(y0), sy.invert(y1)]; if (y0 > y1) { [y0, y1] = [y1, y0]; } let selected_points = image_scatter_data.filter((d) => { return x0 <= d.x && d.x <= x1 && y0 <= d.y && d.y <= y1; }); console.log("selected_points", selected_points); d3.select(image_grid) .selectAll("img") .data(selected_points) .join("img") .attr("src", (d) => d.src) .style("width", `${image_size}px`) .style("height", `${image_size}px`); }); sca.call(brush); let div_container = d3.create("div").style("position", "relative").node(); d3.select(image_grid).style("position", "absolute").style("top", "0"); div_container.appendChild(sca.node()); div_container.appendChild(image_grid); return div_container; }34:Tc94,function brush_UI( image_url, { display_width = 256, display_height = 256, data_width = 64, data_height = 64, update = "onchange", brush_color = "rgb(255, 100, 50, 1.0)", brush_radius = undefined } = {} ) { // data_resolution is the width and height of the returned brush data // display_size is how large the UI is let sx = display_width / data_width; let sy = display_height / data_height; let mode = "paint-over"; // let mode = 'erase-out'; //rerun this cell on this button variable, therefore clear the brush on button click //button_reset_brush; if (brush_radius === undefined) { brush_radius = data_width / 20; //radius of the brush } let blur_radius = `${brush_radius / 6}px`; // blur_radius = `0px`; let div = d3.create("div").attr("display", "flex"); let canvas = div .append("canvas") .attr("width", data_width) .attr("height", data_height) .style("width", `${display_width}px`) .style("height", `${display_height}px`) .style("position", "absolute") .style("opacity", 0.7) .style("image-rendering", "pixelated"); let image = div .append("img") .attr("width", display_width) .attr("height", display_height) .style("width", `${display_width}px`) .style("height", `${display_height}px`) .attr("src", image_url); div = div.node(); let ctx = canvas.node().getContext("2d"); let clear_canvas; if (mode === "paint-over") { clear_canvas = () => { ctx.clearRect(0, 0, canvas.node().width, canvas.node().height); }; } else if (mode == "erase-out") { clear_canvas = () => { ctx.clearRect(0, 0, canvas.node().width, canvas.node().height); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "#000000aa"; ctx.rect(-10, -10, canvas.node().width + 20, canvas.node().height + 20); ctx.fill(); }; } function update_canvas_data() { let canvas_rgba = reshape( [...ctx.getImageData(0, 0, data_width, data_height).data], [data_height, data_width, 4] ); div.value = canvas_rgba.map((row) => row.map((rgba) => rgba[3])); div.dispatchEvent(new Event("input", {})); } ctx.filter = `blur(${blur_radius})`; clear_canvas(); update_canvas_data(); function draw(e) { let { x, y } = e; if (mode === "paint-over") { ctx.globalCompositeOperation = "source-over"; } else if (mode === "erase-out") { ctx.globalCompositeOperation = "destination-out"; } ctx.fillStyle = brush_color; ctx.beginPath(); ctx.ellipse(x / sx, y / sy, brush_radius, brush_radius, 0, 0, Math.PI * 2); ctx.fill(); } let drag = d3 .drag() .on("start", (e) => { draw(e); }) .on("drag", (e) => { draw(e); if (update == "onchange") { update_canvas_data(); } }) .on("end", () => { update_canvas_data(); }); canvas.call(drag); // right click to clear canvas canvas.on("contextmenu", function (e) { e.preventDefault(); clear_canvas(); update_canvas_data(); }); // Used by reset button to clear canvas div.clear = () => { clear_canvas(); update_canvas_data(); }; return div; }35:T436,{ //draw node-link diagram ordered_nodes; let graph_data = { nodes: binary_tree_hierarchy.descendants(), links: binary_tree_hierarchy.links() }; console.log(graph_data); //draw the bg frame let sca = scatter(undefined, graph_data.nodes, { width: width, height: 150, x: (d) => d.data.order, y: (d) => d.height, is_square_scale: false, ticks: 10, s: (d) => 10, xlabel: "Order", pad: 0.1 }); let { sx, sy } = sca.scales; let diagram = node_link_diagram(sca, graph_data, { x: (d) => d.data.order, y: (d) => d.height, r: (d) => 10, scales: { sx, sy } }); let annotations = sca .selectAll(".annotation") .data(graph_data.nodes) .join("text") .attr("class", "annotation") .attr("x", (d) => sx(d.data.order)) .attr("y", (d) => sy(d.height) + 5) .attr("fill", "#fff") .attr("font-family", "sans-serif") // .attr("alignment-baseline", "central") .attr("text-anchor", "middle") .style("font-size", "12px") .text((d) => d.data.id); return sca.node(); }36:T682,crossfilter_data = [ { date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab", productIDs: ["001"] }, { date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab", productIDs: ["001", "005"] }, { date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa", productIDs: ["004", "005"] }, { date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["001", "002"] }, { date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["005"] }, { date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["001", "004", "005"] }, { date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash", productIDs: ["001", "002", "003", "004", "005"] }, { date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["001"] }, { date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["004", "005"] }, { date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab", productIDs: ["001", "002", "004", "005"] }, { date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash", productIDs: ["002"] }, { date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa", productIDs: ["004"] } ]37:T528,{ let svg = d3 .create("svg") .attr("width", 600) .attr("height", 300) .style("background", "#eee"); //def #arrowhead let marker_style = { w: 4, h: 4 }; let m = marker_style; svg.append("defs").node().innerHTML = ` \ `; let brush_path_g = svg.append("g"); let brush_path = []; let brush = d3 .brush() .on("start", (event) => { brush_path = []; }) .on("brush", (event) => { if (event.mode === "drag") { let [[x0, y0], [x1, y1]] = event.selection; brush_path.push({ cx: (x0 + x1) / 2, cy: (y0 + y1) / 2 }); let brush_size = 1.25 * Math.sqrt(Math.abs((x0 - x1) * (y0 - y1))); let sample_size = Math.min(1500, Math.ceil(brush_path.length / 2)); brush_path_g.call(draw_path, subsample(brush_path, sample_size), { size: brush_size, id: "base-path" }); } }) .on("end", (event) => { // brush_path_g.call(draw_gradient_path, brush_path_g.select("#base-path")); }); svg.append("g").call(brush); return svg.node(); }38:Tab1,function draw_gradient_path(g, base_path, color=d3.interpolateViridis) { //Replaces an existing path with gradient color //https://gist.github.com/mbostock/4163057 let path = base_path.remove(); g.selectAll("path.quad") .data(quads(samples(path.node(), 1))) .enter() .append("path") .attr('class', 'quad') .style("fill", function (d) { return color(d.t); }) .style("stroke", function (d) { return color(d.t); }) .attr("d", function (d) { return lineJoin(d[0], d[1], d[2], d[3], 32); }); // Sample the SVG path uniformly with the specified precision. function samples(path, precision) { var n = path.getTotalLength(), t = [0], i = 0, dt = precision; while ((i += dt) < n) t.push(i); t.push(n); return t.map(function (t) { var p = path.getPointAtLength(t), a = [p.x, p.y]; a.t = t / n; return a; }); } // Compute quads of adjacent points [p0, p1, p2, p3]. function quads(points) { return d3.range(points.length - 1).map(function (i) { var a = [points[i - 1], points[i], points[i + 1], points[i + 2]]; a.t = (points[i].t + points[i + 1].t) / 2; return a; }); } // Compute stroke outline for segment p12. function lineJoin(p0, p1, p2, p3, width) { var u12 = perp(p1, p2), r = width / 2, a = [p1[0] + u12[0] * r, p1[1] + u12[1] * r], b = [p2[0] + u12[0] * r, p2[1] + u12[1] * r], c = [p2[0] - u12[0] * r, p2[1] - u12[1] * r], d = [p1[0] - u12[0] * r, p1[1] - u12[1] * r]; if (p0) { // clip ad and dc using average of u01 and u12 var u01 = perp(p0, p1), e = [p1[0] + u01[0] + u12[0], p1[1] + u01[1] + u12[1]]; a = lineIntersect(p1, e, a, b); d = lineIntersect(p1, e, d, c); } if (p3) { // clip ab and dc using average of u12 and u23 var u23 = perp(p2, p3), e = [p2[0] + u23[0] + u12[0], p2[1] + u23[1] + u12[1]]; b = lineIntersect(p2, e, a, b); c = lineIntersect(p2, e, d, c); } return "M" + a + "L" + b + " " + c + " " + d + "Z"; } // Compute intersection of two infinite lines ab and cd. function lineIntersect(a, b, c, d) { var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21); return [x1 + ua * x21, y1 + ua * y21]; } // Compute unit vector perpendicular to p01. function perp(p0, p1) { var u01x = p0[1] - p1[1], u01y = p1[0] - p0[0], u01d = Math.sqrt(u01x * u01x + u01y * u01y); return [u01x / u01d, u01y / u01d]; } }39:[{"id":"8c0ad0b5b8b3e1c7583d349d0991312effc1c2a9b42251c61a468628961bcf75614342d3d0a2449f015272c5047d18fe1993a6fcf6a10bfb5d5b1347f75bd3d2","href":"https://static.observableusercontent.com/files/8c0ad0b5b8b3e1c7583d349d0991312effc1c2a9b42251c61a468628961bcf75614342d3d0a2449f015272c5047d18fe1993a6fcf6a10bfb5d5b1347f75bd3d2","name":"image.png","type":"image/png","lastModified":1687550354291.723,"size":181895}] 30:{"id":"e062bd9d93f97dc8","slug":"snip","title":"Snippets","thumbnail":"c5359d90e8a1a5f49a6b8cbdaf46724be1ed90ba2f910ac9f3a6f3807cd269dc","access_level":"public","create_time":"$D2023-03-28T16:53:14.874Z","update_time":"$D2025-10-10T19:39:45.122Z","view_time":null,"first_public_time":"$D2023-03-28T17:25:11.501Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7775d06948a95c4e","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":"starter_2024"},"version":2918,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null}],"members":[{"type":"individual","id":"915574b67e472374","login":"tiga1231","name":"","avatar_url":"https://avatars-next.observableusercontent.com/610a67e64ce4c4a75e26a5dcf91a2e9235aca6cbf9e3015d07b3c58d557fe114","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"1f4ac3127c8bfaa4","slug":"lib","title":"lib","owner":{"id":"7775d06948a95c4e","login":"tiga1231","name":""}},"type":"notebook","body":{"title":"Snippets","cells":[{"id":0,"value":"# Snippets\nUseful pieces that do not (yet) fit into the vis toolbox [@tiga1231/lib](https://observablehq.com/@tiga1231/lib)\nor not achievable by simple CSS tricks in [@tiga1231/css](https://observablehq.com/@tiga1231/css)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2517,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2520,"value":"viewof cell_a = {\n let div = d3\n .create(\"div\")\n .style(\"width\", \"250px\")\n .style(\"height\", \"100px\")\n .style(\"background\", \"#eef\");\n let div_node = div.node();\n set_value(div_node, { x: 0, y: 0 }); //initial value\n\n div.on(\"mousemove\", (e) => {\n console.log(\"cell A got a mousemove:\", e);\n set_value(div_node, { x: e.layerX, y: e.layerY });\n });\n\n //reaction to changes in cell_b\n let text = div.append(\"text\");\n function update(e) {\n text.text(`Cell A. Mouse moved in Cell B @ (${e.x}, ${e.y})`);\n }\n div_node.update = update; //expose this API to outside\n\n return div_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"viewof cell_b = {\n let div = d3\n .create(\"div\")\n .style(\"width\", \"250px\")\n .style(\"height\", \"100px\")\n .style(\"background\", \"#fee\");\n let div_node = div.node();\n set_value(div_node, { x: 0, y: 0 }); //initial value\n\n //reaction to change in cell_a\n let text = div.append(\"text\");\n text.text(\n `Cell B. Received mouse move in Cell A @ (${cell_a.x}, ${cell_a.y})`\n );\n\n //interaction on cell_b\n div.on(\"mousemove\", (e) => {\n console.log(\"cell B got a mousemove:\", e);\n set_value(div_node, { x: e.layerX, y: e.layerY });\n viewof cell_a.update({ x: e.layerX, y: e.layerY });\n });\n return div_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2535,"value":"cell_a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"cell_b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2844,"value":"---\n## Toggle Session","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2842,"value":"function toggle(event, id) {\n let caller = d3.select(event.target); //DOM that received the event\n let callerIsActive = caller.classed(\"clickable-active\");\n\n let selection = d3.select(id); //DOM to be toggled\n let isHidden = selection.classed(\"hidden\");\n\n selection.classed(\"hidden\", !isHidden);\n caller.classed(\"clickable-active\", !callerIsActive); //change the indicator (+/- sign) besides the caller\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2847,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2849,"value":"{\n let div = d3.create(\"div\");\n let h1 = div.append(\"h1\").attr(\"class\", \"clickable\").text(\"Session\");\n let p = div\n .append(\"p\")\n .attr(\"id\", \"my-session\")\n .attr(\"class\", \"hidden\")\n .text(\"hide me\");\n\n h1.node().onclick = (event) => {\n console.log(\"here\");\n console.log(event);\n toggle(event, \"#my-session\");\n };\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"---\n## P5.js animation\nhttps://p5js.org/\n\nFor creative programming","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"banner = p5((sk) => {\n let height = 150;\n let bg = \"#001b42\";\n let t0 = performance.now();\n\n sk.setup = function () {\n sk.createCanvas(width, height);\n sk.background(bg);\n };\n\n sk.draw = function () {\n //this will clear the canvas and creates a different animation effect\n // sk.background(bg);\n\n let t = performance.now() - t0;\n let color = [\n 155 + 100 * Math.cos(t / 550),\n 155 + 100 * Math.sin(100 - t / 550),\n 155 + 100 * Math.sin(t / 550)\n ];\n sk.fill(...color);\n sk.noStroke();\n let r = 20;\n let x = (t / 7) % width;\n let y = height / 2 + (height / 2 - r) * Math.sin(x / 60);\n sk.circle(x, y, r);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"import {p5} from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"---\n## Read numpy file natively in JS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2208,"value":"array = numpy.get_array(\"http://127.0.0.1:8080/numpy-test.npy\", (array) => {\n console.log(array);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2222,"value":"import { numpy } from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"---\n## Scatter plot linked to an image grid\nBrush on scatter to display images of selected points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2066,"value":"image_scatter_data = {\n // let fns = d3.range(40).map((i) => `http://localhost:5000/seed${i}.jpg`);\n\n let img_data = d3\n .range(100)\n .map((i) => ({ i: i, x: Math.random(), y: Math.random() }));\n\n //grab a random image for each\n let fns = img_data.map((d) =>\n fetch(\"https://picsum.photos/64\")\n .then((response) => response.blob())\n .then((blob) => {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => {\n const base64data = reader.result;\n img_data[d.i].src = base64data;\n };\n })\n );\n\n return img_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2190,"value":"viewof image_size = Inputs.range([10, 100], {\n label: \"image_size\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2058,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2061,"value":"// import { scatter } from \"@tiga1231/lib\"\nimport { flexbox } from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2007,"value":"---\n## Progress bar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2012,"value":"pbar = {\n let pbar = progress_bar({\n prefix: \"\",\n max: 17,\n start: 0,\n width: 600,\n font_size: 12\n });\n pbar.update(5);\n return pbar;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1985,"value":"import { progress_bar } from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"---\n## Paint over canvas, get brushed region as a 2D array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1950,"value":"brush_data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"viewof brush_data = {\n let cat = await FileAttachment(\"image.png\");\n return brush_UI(await cat.url(), {\n display_width: 543,\n display_height: 360,\n data_width: 54,\n data_height: 36,\n brush_color: \"rgba(40, 100, 225, 1.0)\",\n brush_radius: 3, // in data space (54 x 36 in this case)\n update: \"onchange\" // \"onchange\" or \"onend\"\n // \"onchange\" updates data as one brushes\n // \"onend\" updates data only after mouse released\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1952,"value":"---\n## Upload image files to Flask\nCan be used for any file type\n\nin Flask:\n```python\n@app.route(\"/upload_image\", methods=[\"POST\"])\ndef upload_image():\n image_bytes = request.data\n with open(\"image.png\", \"wb\") as f:\n f.write(image_bytes)\n return \"uploaded\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1957,"value":"viewof image_file = Inputs.file({\n label: \"Image file\",\n accept: \".png,.jpg,jpeg\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1959,"value":"image = image_file.image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1955,"value":"response_text = {\n // Creating a new blob\n const blob = new Blob([await image_file.blob()]);\n let response_text = await fetch(`http://localhost:5000/upload_image`, {\n method: \"POST\",\n body: blob\n }).then((response) => response.text());\n return response_text;\n}\n\n// b'\\xff\\xd8\\xff\\xe0\\x00\\x10JFIF\\x00\\x01\\x01\\x01\\x00H\\x00H\\x00\\x00\\xff\\xed\\x00FPhotoshop 3.0\\x008BIM\\x04\\x04\\x00\\x00\\x00\\x00\\x00*\\x1c\\x01Z\\x00\\x03\\x1b%G\\x1c\\x02\\x00\\x00\\x02\\x00\\x02\\x1c\\x02(\\x00\\x16p2lMSWMoQPCx0rpSUlZcvg\\xff\\xe2\\x02@ICC_'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"---\n## Custom Observable input widgets\nin this case, returns mouse position in the SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1764,"value":"custom_input_view","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"viewof custom_input_view = {\n let svg = create_svg(300, 300, \"#eee\");\n svg.on(\"mousemove\", (e) => {\n set_value(svg.node(), [e.offsetX, e.offsetY]);\n });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"import {create_svg, set_value} from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"---\n## ReGL\nSteps:\n1. Init an regl instance ```let regl = regl2({ canvas: canvas });```\n2. Create a rendering function\n ```\n let my_render_function = regl({\n attributes: {\n position: regl.prop(\"position\")\n },\n uniforms: {\n size: regl.prop('size')\n },\n count: regl.prop('count'),\n primitive: \"points\",\n vert: vert_shader_str,\n frag: frag_shader_str\n });```\n3. Call the re-usable rendering function with data using the keywords defined by `regl.prop('...')` above:\n```\n my_render_function({\n position: some_random_points_2000x2, //attributes\n size: 5, //uniform\n count: 2000, //one of drawArray arguments\n });\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1099,"value":"regl_canvas = {\n let width = 500;\n let height = 360;\n let canvas = DOM.canvas(width * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n\n let regl = regl2({ canvas: canvas });\n regl.clear({ color: [0.2, 0.2, 0.2, 1] });\n\n let draw_scatter = get_scatter_func(regl);\n\n //draw\n for (let color of [\n [0.9, 0.3, 0.3, 1.0],\n [1.0, 1.0, 0.4, 1.0]\n ]) {\n draw_scatter({\n position: d3\n .range(2000)\n .map((d) => [(Math.random() - 0.5) * 2 * 0.8, Math.random() - 0.5]),\n color: color,\n count: 2000,\n size: 5\n });\n }\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"function get_scatter_func(regl) {\n let vert = `\n precision mediump float;\n attribute vec2 position;\n uniform float size;\n void main() {\n gl_PointSize = size;\n gl_Position = vec4(position, 0, 1);\n }`;\n\n let frag = `\n precision mediump float;\n uniform vec4 color;\n void main() {\n //round marks\n vec2 pointCoord = (gl_PointCoord.xy-0.5)*2.0;\n float dist = length(pointCoord);\n if (dist>1.0) discard;\n gl_FragColor = color;\n }`;\n\n //construction of regl() relatively expensive\n let render_func = regl({\n // Here we define the vertex attributes for the above shader\n attributes: {\n position: regl.prop(\"position\")\n },\n uniforms: {\n // This defines the color of the triangle to be a dynamic variable\n color: regl.prop(\"color\"),\n size: regl.prop(\"size\")\n },\n count: regl.prop(\"count\"),\n primitive: \"points\",\n vert,\n frag\n });\n\n return render_func;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"import {regl2} from '@tiga1231/lib'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2446,"value":"---\n## TODO: SSAO (Screen Space Ambient Occlusion) in ReGL, or Three.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":916,"value":"---\n## Explaining tree traversal orders. Pre-, in-, and post-order traversals.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1494,"value":"viewof tree_ordering = Inputs.select([\"pre-order\", \"in-order\", 'post-order'], {label: \"tree_ordering\", value: 'in-order'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"ordered_nodes.map(d=>d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1568,"value":"viewof tree_depth = Inputs.range([2, 6], {\n label: \"tree_depth\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"tree_view = tree_layout(binary_tree_hierarchy)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"function binary_tree({ depth = 1, index = 0, prefix = \"\" } = {}) {\n let node = {};\n node.id = prefix + `${index}`;\n\n if (depth == 0) {\n return null;\n } else if (depth == 1) {\n node.is_leaf = true;\n return node;\n } else {\n node.is_leaf = false;\n node.left = binary_tree({\n depth: depth - 1,\n prefix,\n index: 2 * index + 1\n });\n node.right = binary_tree({\n depth: depth - 1,\n prefix,\n index: 2 * index + 2\n });\n return node;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"function preorder(tree){\n let res = [];\n res.push(tree);\n if(!tree.is_leaf){\n res = res.concat(preorder(tree.left));\n res = res.concat(preorder(tree.right));\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"function inorder(tree){\n let res = [];\n if(!tree.is_leaf){\n res = res.concat(inorder(tree.left));\n res.push(tree);\n res = res.concat(inorder(tree.right));\n }else{\n res.push(tree);\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"function postorder(tree){\n let res = [];\n if(!tree.is_leaf){\n res = res.concat(postorder(tree.left));\n res = res.concat(postorder(tree.right));\n }\n res.push(tree);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"binary_tree_data = binary_tree({depth:tree_depth})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"binary_tree_hierarchy = {\n let hier = d3.hierarchy(binary_tree_data, (node) => {\n if (node.is_leaf) {\n return null;\n } else {\n return [node.left, node.right];\n }\n });\n return hier;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"ordered_nodes = {\n let ordered_nodes;\n if (tree_ordering === \"pre-order\") {\n ordered_nodes = preorder(binary_tree_data);\n } else if (tree_ordering === \"in-order\") {\n ordered_nodes = inorder(binary_tree_data);\n } else {\n ordered_nodes = postorder(binary_tree_data);\n }\n ordered_nodes.forEach((d, i) => {\n d.order = i;\n });\n return ordered_nodes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"import {graph as tree_layout} from '@d3/d3-hierarchy'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"---\n## Force directed layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2915,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2913,"value":"graph_data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"layout = {\n \n //make a copy of graph data\n let data = JSON.parse(JSON.stringify(graph_data));\n //random initial layout:\n // data.nodes.forEach((d) => {\n // d.x = Math.random();\n // d.y = Math.random();\n // });\n\n let simulation = d3\n .forceSimulation(data.nodes)\n .force(\n \"link\",\n d3\n .forceLink(data.links)\n .id((d) => d.id)\n .distance(0)\n .strength(1)\n )\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\n \"collide\",\n d3\n .forceCollide()\n .strength(1)\n .radius((d) => 0.5)\n .iterations(2)\n )\n .force('center', d3.forceCenter().strength(0.4))\n .stop()\n .tick(ticks);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"// viewof ticks = Inputs.range([0, 200], {label: \"ticks\", step: 1})\n\nviewof ticks = Scrubber(d3.range(100), {\n autoplay: false,\n loop: true,\n alternate: true,\n initial: 99\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"graph_demo_2 = {\n let sca = scatter(undefined, layout.nodes, {\n width: 400,\n height: 400,\n s: (d) => 1\n });\n let { sx, sy } = sca.scales;\n\n return node_link_diagram(sca, layout, {\n x: (d) => d.x,\n y: (d) => d.y,\n r: (d) => 4,\n scales: { sx, sy },\n fill: (d) => C[d.group % C.length],\n height: 200,\n link_stroke: (d) => \"#bbb\",\n link_stroke_width: (d) => 1.5\n }).node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"import {miserables as graph_data} from \"@d3/force-directed-graph\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"import {C, scatter, node_link_diagram} from \"@tiga1231/lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"---\n# Crossfilter\nhttps://github.com/crossfilter/crossfilter/wiki","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"Object.keys(crossfilter_data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"all_filtered = {\n //define new crossfilter\n let cf = crossfilter(crossfilter_data);\n // cf.add(new_item) if neccesary\n\n //create a new crossfilter dimension based on some field in data, in this case, d.quantity\n let dim_quan = cf.dimension((d) => d.quantity);\n\n //apply range filter on certain dimension(s)\n dim_quan.filter([-0.01, 1.99]);\n \n //return all filtered items\n return cf.allFiltered();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2839,"value":"#### more examples\nhttps://github.com/crossfilter/crossfilter/wiki","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"import {crossfilter} from '@tiga1231/lib'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"---\n## Thick curve / Brush-a-curve\n- 1) Drag to create a rectangle, then 2) move the rectangle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"function draw_path(g, path_data, path_style) {\n let line_generator = d3\n .line()\n .x((d) => d.cx)\n .y((d) => d.cy)\n .curve(d3.curveBasis);\n\n // a thicker stroke on the background\n // and a think stroke with arrow head\n let path_styles = [\n {\n stroke: \"#1f78b4\",\n \"stroke-width\": path_style.size,\n opacity: 0.5,\n \"marker-end\": \"\",\n },\n {\n stroke: \"#333\",\n \"stroke-width\": 3,\n opacity: 1,\n \"marker-end\": \"url(#arrowhead)\",\n }\n ];\n\n let path = g\n .selectAll(\"path\")\n .data(path_styles)\n .join(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", (d) => d.stroke)\n .attr(\"stroke-width\", (d) => d[\"stroke-width\"])\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"marker-end\", (d) => d[\"marker-end\"])\n .attr(\"opacity\", (d) => d.opacity)\n .attr(\"d\", line_generator(path_data));\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"import {subsample} from '@tiga1231/lib'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"---\n## SVG as overlay on top of canvas \n\nSee also: https://observablehq.com/@tiga1231/lib#overlay\n\n### Idea\n1. Create a div container\n - ```.style(\"height\", \"400px\")```\n This prevents observable cell from shrinking\n - ```.style(\"position\", \"relative\")``` set position reference to this container\n2. Append background element (in this case, canvas) first, as usual\n3. Append foreground element (SVG), set:\n - ```.style(\"position\", \"absolute\")```\n - ```.style(\"top\", \"0px\")```\n - ```.style(\"left\", \"0px\")```
\n Since the container has relative positioning, this \"top\" and \"left\" speaks to relative position in the container\n4. Return container div as usual\n\n\n### Demo\n- Background set on canvas (in the back)\n- Rect drawn on canvas\n- Circle drawn on SVG ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"{\n \n \n \n let cell_height = 300;\n let div = d3\n .create(\"div\")\n .style(\"position\", \"relative\")\n .style(\"height\", `${cell_height}px`);\n\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", 300)\n .attr(\"height\", 300)\n .style(\"width\", `${300}px`)\n .style(\"height\", `${300}px`)\n .style(\"background-color\", \"#aaaaff\");\n \n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 300)\n .attr(\"height\", 300)\n .style(\"position\", \"absolute\")\n .style(\"top\", \"0px\")\n .style(\"left\", \"0px\");\n\n svg.append(\"circle\").attr(\"r\", 120).attr('opacity', 0.7);\n\n \n\n let ctx = canvas.node().getContext(\"2d\");\n ctx.beginPath();\n ctx.rect(1, 1, 150, 100);\n ctx.stroke();\n\n let div_node = div.node();\n div_node.appendChild(canvas.node());\n div_node.appendChild(svg.node());\n return div_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Likewise, canvas on top of svg","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"{\n let div = d3.create(\"div\")\n .style(\"position\", \"relative\");\n\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 300)\n .attr(\"height\", 300)\n .style(\"background\", \"#eee\");\n\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", 300)\n .attr(\"height\", 300)\n .style(\"width\", `${300}px`)\n .style(\"height\", `${300}px`)\n .style(\"background-color\", \"#aaf\")\n .style(\"opacity\", 0.7)\n .style(\"position\", \"absolute\")\n .style(\"top\", \"0px\")\n .style(\"left\", \"0px\");\n\n let ctx = canvas.node().getContext(\"2d\");\n ctx.beginPath();\n ctx.rect(1, 1, 150, 100);\n ctx.stroke();\n\n let div_node = div.node();\n div_node.appendChild(svg.node());\n div_node.appendChild(canvas.node());\n return div_node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2697,"value":"---\n## Stop Observable input from update from 'oninput'\npseudo-code:
\n```\nlet parent = some parent/container DOM\nlet element = some input DOM in the parent DOM\nelement.oninput = (e) => {e.stopPropagation()};\nelement.onchange = (e) => {\n //custom stuff, e.g. assigning value\n parent.value = element.value;\n //to support 'viewof' on the parent DOM, dispatch the event\n parent.dispatchEvent(new CustomEvent(\"input\"));\n}\n```\n\nhttps://talk.observablehq.com/t/preventing-input-viewof-refreshing-and-triggering-recalculations-except-onchange/3308","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2711,"value":"viewof range = Inputs.range([0, 1000], { label: \"value\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2713,"value":"input_mod = {\n let form = viewof range;\n for (let element of form) {\n element.oninput = (e) => {\n // console.log(\"oninput\");\n e.stopPropagation();\n };\n element.onchange = () => {\n // console.log(\"onchange\");\n // console.log(\"raw_value\", element.value);\n form.value = element.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2770,"value":"The value that update only on 'onchange': ${range}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2758,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1780,"value":"import { reshape } from \"@tiga1231/lib\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"