2f:T66f,box_plot = { if (input_image) { let image_width = (await input_image.image()).width; let image_height = (await input_image.image()).height; let image_url = await input_image.url(); let w = width < 800 ? width : 800; let h = (w * image_height) / image_width; let container = d3 .create("div") .style("position", "relative") .style("width", `${w}px`) .style("height", `${h}px`); container .append("div") .style("position", "absolute") .style("top", 0) .style("left", 0) .style("width", `${w}px`) .style("height", `${h}px`) .append("img") .attr("width", w) .attr("height", h) .attr("src", image_url); if (n < counts.length) { let svg = container .append("svg") .attr("id", "box_container") .style("position", "absolute") .style("top", 0) .style("left", 0) .style("width", `${w}px`) .style("height", `${h}px`) .attr("width", w) .attr("height", h); if (n < counts.length - 1) { let s = counts[n].s; let boxes = counts[n].boxes; svg .selectAll("rect") .data(boxes) .join("rect") .attr("x", (d) => (s * d[1] * w) / image_width) .attr("y", (d) => (s * d[0] * h) / image_height) .attr("width", (d) => (s * w) / image_width) .attr("height", (d) => (s * h) / image_height) .attr("opacity", 0.2) .attr("stroke", "white") .attr("stroke-width", 1); } } return container.node(); } else { return Plot.plot(); } }30:T66e,regression_line = { if (input_image) { let cnts = counts.map((o) => Object.assign({}, o)); cnts.forEach(function (o) { o["log s"] = Math.log(o.s); o["log cnt"] = Math.log(o.cnt); }); let x0 = cnts[0]["log s"]; let x1 = cnts.slice(-1)[0]["log s"]; let aspect = (cnts[0]["log cnt"] - cnts.slice(-1)[0]["log cnt"]) / (cnts.slice(-1)[0]["log s"] - cnts[0]["log s"]); let w = width < 640 ? width : 640; let h = w * aspect; let plot = Plot.plot({ x: { //type: "log" // domain: [0, 1.2], // ticks: [0.25, 0.5, 0.75], // tickFormat: ".2s" }, y: {}, width: w, height: h, padding: 100, marks: [ Plot.dot(cnts, { x: "log s", y: "log cnt", fill: "lightgray", stroke: "black", strokeWidth: 2, title: (d, i) => `(${d.s}, ${d.cnt})` }), Plot.line([ [x0, regression.b], [x1, -regression.m * x1 + regression.b] ]), // Add the axes Plot.ruleX([x0]), Plot.ruleY([cnts.slice(-1)[0]["log cnt"]]) ] }); // Generate a bit of LaTeX. let tex_snippet = MathJax.tex2svg( String.raw`\log N_{\varepsilon} \approx ${d3.format("0.3f")( regression.b )} - ${d3.format("0.3f")(regression.m)}\log \varepsilon` ).querySelector("svg"); // and append it to the image d3.select(plot) .append("g") .attr("transform", `translate(${w * 0.3} ${0.63 * h}) scale(1.2)`) .append(() => tex_snippet); return plot; } else return Plot.plot(); }31:T58d,sample_download = { let div = d3 .create("div") .style("max-width", `850px`) .style("display", "flex") .style("flex-direction", "row") .style("flex-wrap", "wrap") .style("justify-content", "center") .style("align-items", "center"); let s = 240; images.forEach(async function (img) { div .append("a") .attr("href", await img.url()) .attr("target", "_blank") .style("display", "inline-block") .style("padding", "0px") .style("width", `${s}px`) .style("height", `${s}px`) .style("margin", "5px") .style("display", "block") .style("box-sizing", "content-box") .style("padding", "3px 2px") .style("border", "solid 1.5px #bbb") .style("border-radius", "10px") .style("text-align", "center") .on("mouseenter", function () { d3.select(this) .style("box-shadow", "0 0 0 rgba(0,0,0,0)") .transition() .duration(100) .style("box-shadow", "0 0 10px rgba(0,0,0,0.6)"); }) .on("mouseleave", function () { d3.select(this) .style("box-shadow", "0 0 10px rgba(0,0,0,0.6)") .transition() .duration(100) .style("box-shadow", "0 0 0 rgba(0,0,0,0)"); }) .append("img") .attr("src", await img.url()) .attr("height", `${s}px`); }); div.node().value = 0; return div.node(); }32:[{"id":"dd69bfb3b59446d6cdfdd1a8690580fe4da9075452ba61f88667cfdbf770760b926934ae779a81219f1498886f0609efb5486a9b0787b5bb8a14dfcf3cdcf2c6","href":"https://static.observableusercontent.com/files/dd69bfb3b59446d6cdfdd1a8690580fe4da9075452ba61f88667cfdbf770760b926934ae779a81219f1498886f0609efb5486a9b0787b5bb8a14dfcf3cdcf2c6","name":"julia513.png","type":"image/png","lastModified":1701718127161.589,"size":13218},{"id":"9f56f10d9c2e669146a5b9eb56b4787c52a9f0061a47e2b2fdeb72b85e35e42025dbcd68f89f02958ea7951919d59211912d666f55c733d14e49db60da301ce5","href":"https://static.observableusercontent.com/files/9f56f10d9c2e669146a5b9eb56b4787c52a9f0061a47e2b2fdeb72b85e35e42025dbcd68f89f02958ea7951919d59211912d666f55c733d14e49db60da301ce5","name":"spiral513.png","type":"image/png","lastModified":1701718127270.345,"size":66525},{"id":"d02562a706798c55e98120a923854f162a576a407a6d6696463662aa11d1afe9028210d85bbfb2dbece662d97086376af6b6cd11fa1ad4119db80032e2adbd35","href":"https://static.observableusercontent.com/files/d02562a706798c55e98120a923854f162a576a407a6d6696463662aa11d1afe9028210d85bbfb2dbece662d97086376af6b6cd11fa1ad4119db80032e2adbd35","name":"tree1025@1.png","type":"image/png","lastModified":1701719308968.053,"size":1738449}] 2d:{"title":"Box counter","cells":[{"id":0,"value":"# Box counter\n\nThis webpage implements a box-counting algorithm to estimate the fractal dimension of an uploaded image. The methodology and code is described with examples in [this Observable notebook](https://observablehq.com/@mcmcclur/box-counting-dimension-examples).","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"viewof input_image = {\n let input_image = Inputs.file({\n accept: \".png\",\n label: html`Upload PNG:`\n });\n return input_image;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof n = {\n try {\n let image_width = (await input_image.image()).width;\n let image_height = (await input_image.image()).height;\n let N = d3.min([\n Math.floor(Math.log2(image_width)),\n Math.floor(Math.log2(image_height))\n ]);\n let n = Inputs.range([1, N], {\n step: 1,\n label: \"Side length:\"\n });\n d3.select(n).select('input[type=\"number\"]').style(\"display\", \"none\");\n // d3.select(n).select(\"label\").style(\"width\", \"20px\");\n\n return n;\n } catch {\n let n = Inputs.range([1, 10], {\n step: 1,\n label: \"Side length:\",\n disabled: true\n });\n d3.select(n).select('input[type=\"number\"]').style(\"display\", \"none\");\n return n;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"analysis = input_image\n ? md`\nThe box-count data for this set is:\n

\n \n \n \n ${counts.map((o) => ``)}\n \n \n \n \n ${counts.map((o) => ``)}\n \n \n

${tex`s`}	${o.s}
${tex`N_s`}	${o.cnt}

\nyielding a fractal dimension estimate of approximately ${d3.format(\"0.3f\")(\n regression.m\n )}. The regression line is ${tex.block`\\log N_s \\approx ${d3.format(\n \"0.3f\"\n )(regression.b)} - ${d3.format(\"0.3f\")(regression.m)} \\log s,`}\nwhich looks like so:\n`\n : md`Upload an image to see the grooviness!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"## Sample images\n\nIf you want to see how this should work, you can download one of the images below to try it out. Not surprisingly, it seems to work best with black and white images, though it can also work well with color images, as long as there's sufficient dark on light contrast.","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"**Sources**:\n\n- The Julia set was generated with my [Julia set generator](https://marksmath.org/visualization.o/julia_sets/),\n- The fractal spiral was generated with my [IFS Visualizaer](https://marksmath.org/visualization/IFS_Visualizer/), and\n- The tree grew in my backyard.\n\nAll images were cropped and/or resized to fill a square whose side length has the form ${tex`2^n+1`} - i.e., it's a power of two plus one.","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"regression = counts\n ? ss.linearRegression(counts.map((o) => [-Math.log(o.s), Math.log(o.cnt)]))\n : 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"counts = {\n if (input_image) {\n let image_width = (await input_image.image()).width;\n let image_height = (await input_image.image()).height;\n let image_url = await input_image.url();\n let canvas = d3\n .create(\"canvas\")\n .attr(\"width\", image_width)\n .attr(\"height\", image_height)\n .style(\"display\", \"none\");\n let ctx = canvas.node().getContext(\"2d\");\n let img = new Image();\n img.src = image_url;\n ctx.drawImage(img, 0, 0);\n return box_count(canvas.node());\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { box_count } from \"@mcmcclur/box-counting-dimension-examples\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"MathJax = require(\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\").catch(\n () => window[\"MathJax\"]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"ss = require(\"simple-statistics\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"images = Promise.all([\n FileAttachment(\"julia513.png\"),\n FileAttachment(\"spiral513.png\"),\n FileAttachment(\"tree1025@1.png\")\n])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}