30:T1519,game = { deal; deal2; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const defs = svg.append("defs"); //Define a shadow for the outer circles - From Nadieh Bremer's notebook https://observablehq.com/@nbremer/drop-shadow-svg-filter const filter = defs.append("filter").attr("id", "shadow"); filter .append("feColorMatrix") .attr("type", "matrix") .attr("values", `0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0`); filter .append("feGaussianBlur") .attr("stdDeviation", 5) .attr("result", "coloredBlur"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode").attr("in", "coloredBlur"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); //Draw the two outer circles - one representing your card and one representing the discard pile const cardRad = 0.9 * (width / 4); const labelRad = 0.95 * (width / 4); svg .append("circle") .attr("cx", width / 4) .attr("cy", height / 2) .attr("r", cardRad) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 2) .style("fill", "white") .style("filter", "url(#shadow)"); svg .append("circle") .attr("cx", (3 * width) / 4) .attr("cy", height / 2) .attr("r", cardRad) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 2) .style("fill", "white") .style("filter", "url(#shadow)"); //Create an SVG path following Nadieh Bremer's tutorial https://www.visualcinnamon.com/2015/09/placing-text-on-arcs/ svg .append("path") .attr("id", "yourCard") //Unique id of the path .attr( "d", "M " + (width / 4 - labelRad) + "," + height / 2 + " A " + labelRad + "," + labelRad + " 0 0,1 " + (width / 4 + labelRad) + "," + height / 2 ) //SVG path .style("fill", "none") .style("stroke", "none"); svg .append("text") .append("textPath") //append a textPath to the text element .attr("xlink:href", "#yourCard") //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text("Ấn vào khoáng vật giống phía bên phải"); svg .append("path") .attr("id", "discard") //Unique id of the path .attr( "d", "M " + ((3 * width) / 4 - labelRad) + "," + height / 2 + " A " + labelRad + "," + labelRad + " 0 0,1 " + ((3 * width) / 4 + labelRad) + "," + height / 2 ) //SVG path .style("fill", "none") .style("stroke", "none"); svg .append("text") .append("textPath") //append a textPath to the text element .attr("xlink:href", "#discard") //place the ID of the path here .style("text-anchor", "middle") //place the text halfway on the arc .attr("startOffset", "50%") .text("Khoáng vật để so sánh"); //Define and draw the 6 minerals on your card for (let i = 0; i < 6; i++) { const im = mineralsWithPics[mutable mineralSelect[0][i]][0]; const r = mutable circles[0][i].r - padding; const adj = Math.min(im.width, im.height) / (2 * r); const x = mutable circles[0][i].x + width / 4; const y = mutable circles[0][i].y + height / 2; defs .append("pattern") .attr('id', "min" + i) .attr("patternUnits", "userSpaceOnUse") .attr("x", x - r - (im.width / adj - 2 * r) / 2) .attr("y", y - r - (im.height / adj - 2 * r) / 2) .attr("width", im.width / adj) .attr("height", im.height / adj) .append("image") .attr("x", 0) .attr("y", 0) .attr("width", im.width / adj) .attr("height", im.height / adj) .attr("href", im.src); svg .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", r) .attr("fill", "url(#min" + i + ")") .on("click", function() { if (mineralSelect[2].includes(mineralSelect[0][i])) { console.log("match"); mutable deal2++; } else console.log("Try again"); }) .append("title") .text(mineralsWithPics[mutable mineralSelect[0][i]][1].mineral); } //Draw the 6 minerals on the discarded card for (let i = 0; i < 6; i++) { const im = mineralsWithPics[mutable mineralSelect[2][i]][0]; const r = mutable circles[1][i].r - padding; const adj = Math.min(im.width, im.height) / (2 * r); const x = mutable circles[1][i].x + (3 * width) / 4; const y = mutable circles[1][i].y + height / 2; defs //Define a pattern to add to each retangle .append("pattern") .attr('id', "minDisc" + i) .attr("patternUnits", "userSpaceOnUse") .attr("x", x - r - (im.width / adj - 2 * r) / 2) .attr("y", y - r - (im.height / adj - 2 * r) / 2) .attr("width", im.width / adj) .attr("height", im.height / adj) .append("image") .attr("x", 0) .attr("y", 0) .attr("width", im.width / adj) .attr("height", im.height / adj) .attr("href", im.src); svg .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", r) .attr("fill", "url(#minDisc" + i + ")") .append("title") .text(mineralsWithPics[mutable mineralSelect[2][i]][1].mineral); } return svg.node(); }31:T4e5,function getCircles(n) { const nodes = d3.range(n).map(() => ({ r: getRandomIntInclusive(width / 22, width / 12) + padding })); const boundingCircleRad = cardRad - (width / 12 + padding); const simulation = d3 .forceSimulation(nodes) //.force( // "radial", //d3.forceRadial((0.9 * width) / 4 - (width / 12 + padding), 0, 0) // ) .force("x", d3.forceX()) .force("y", d3.forceY()) //.force("charge", d3.forceManyBody().strength(d => -d.r / 8)) .force("bounding-circle", () => { nodes.forEach(node => { // if node is outside of the bounding circle, // move node just inside circle along same polar axis if (distance([node.x, node.y], [0, 0]) > boundingCircleRad) { //console.log("Before"); //console.log(node.x, node.y); const theta = Math.atan(node.y / node.x); node.x = boundingCircleRad * Math.cos(theta) * (node.x < 0 ? -1 : 1); node.y = boundingCircleRad * Math.sin(theta) * (node.x < 0 ? -1 : 1); //console.log(node.x, node.y); } }); }) .force("collide", d3.forceCollide(d => d.r)) .stop(); for (let i = 0; i < 100; ++i) simulation.tick(); //return a static layout return nodes; }32:T27b2,minerals = [ { mineral: "Opal", image: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Opal-53714.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Opal-53714.jpg", moreInfo: "https://en.wikipedia.org/wiki/Opal" }, { mineral: "Sodalite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Sodalith_-_Rohstein.jpg/307px-Sodalith_-_Rohstein.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Sodalith_-_Rohstein.jpg", moreInfo: "https://en.wikipedia.org/wiki/Sodalite" }, { mineral: "Diopside", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Diopside-225169.jpg/199px-Diopside-225169.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Diopside-225169.jpg", moreInfo: "https://en.wikipedia.org/wiki/Diopside" }, { mineral: "Muscovite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Muscovite_on_albite_Corrego_do_Urucum_MNHN_Min%C3%A9ralogie.jpg/480px-Muscovite_on_albite_Corrego_do_Urucum_MNHN_Min%C3%A9ralogie.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Muscovite_on_albite_Corrego_do_Urucum_MNHN_Min%C3%A9ralogie.jpg", moreInfo: "https://en.wikipedia.org/wiki/Muscovite" }, { mineral: "Cinnabar", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Cinnabar_on_Dolomite.jpg/640px-Cinnabar_on_Dolomite.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Cinnabar_on_Dolomite.jpg", moreInfo: "https://en.wikipedia.org/wiki/Cinnabar" }, { mineral: "Lizardite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Lizardite%2C_Chrysotile-288582.jpg/640px-Lizardite%2C_Chrysotile-288582.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Lizardite,_Chrysotile-288582.jpg", moreInfo: "https://en.wikipedia.org/wiki/N%C3%A9pouite" }, { mineral: "Magnetite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Magnetite-118736.jpg/235px-Magnetite-118736.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Magnetite-118736.jpg", moreInfo: "https://en.wikipedia.org/wiki/Magnetite" }, { mineral: "Gold", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Native_gold_Louisa_Creek_MNHN_Min%C3%A9ralogie.jpg/600px-Native_gold_Louisa_Creek_MNHN_Min%C3%A9ralogie.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Native_gold_Louisa_Creek_MNHN_Min%C3%A9ralogie.jpg", moreInfo: "https://en.wikipedia.org/wiki/Gold" }, { mineral: "Calcite", image: "https://upload.wikimedia.org/wikipedia/commons/2/2e/Calcite-20188.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Calcite-20188.jpg", moreInfo: "https://en.wikipedia.org/wiki/Calcite" }, { mineral: "Malachite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Malachite_Congo.jpg/640px-Malachite_Congo.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Malachite_Congo.jpg", moreInfo: "https://en.wikipedia.org/wiki/Malachite" }, { mineral: "Elbaite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Elbaite_Elbe.jpg/640px-Elbaite_Elbe.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Malachite_Congo.jpghttps://commons.wikimedia.org/wiki/File:Elbaite_Elbe.jpg", moreInfo: "https://en.wikipedia.org/wiki/Elbaite" }, { mineral: "Fluorite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg/640px-9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:9104_-_Milano_-_Museo_storia_naturale_-_Fluorite_-_Foto_Giovanni_Dall%27Orto_22-Apr-2007.jpg", moreInfo: "https://en.wikipedia.org/wiki/Fluorite" }, { mineral: "Kaolinite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Kaolinite_Ixtassou_MNHN_G%C3%A9ologie.jpg/480px-Kaolinite_Ixtassou_MNHN_G%C3%A9ologie.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Kaolinite_Ixtassou_MNHN_G%C3%A9ologie.jpg", moreInfo: "https://en.wikipedia.org/wiki/Kaolinite" }, { mineral: "Zircon", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Zircon-zircon14.jpg/433px-Zircon-zircon14.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Zircon-zircon14.jpg", moreInfo: "https://en.wikipedia.org/wiki/Zircon" }, { mineral: "Corundum", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Corundum-215249.jpg/450px-Corundum-215249.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Corundum-215249.jpg", moreInfo: "https://en.wikipedia.org/wiki/Corundum" }, { mineral: "Kyanite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Kyanite%2C_quartz.JPG/640px-Kyanite%2C_quartz.JPG", imageInfo: "https://commons.wikimedia.org/wiki/File:Kyanite,_quartz.JPG", moreInfo: "https://en.wikipedia.org/wiki/Kyanite" }, { mineral: "Bornite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Bornite_Kazachstan.jpg/209px-Bornite_Kazachstan.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Bornite_Kazachstan.jpg", moreInfo: "https://en.wikipedia.org/wiki/Bornite" }, { mineral: "Wulfenite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Wulfenite-tcw02a.jpg/214px-Wulfenite-tcw02a.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Wulfenite-tcw02a.jpg", moreInfo: "https://en.wikipedia.org/wiki/Wulfenite" }, { mineral: "Platinum", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Platinum-nugget.jpg/320px-Platinum-nugget.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Platinum-nugget.jpg", moreInfo: "https://en.wikipedia.org/wiki/Platinum" }, { mineral: "Glaucophane", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Glaucophane_bleu_de_Groix.jpg/640px-Glaucophane_bleu_de_Groix.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Glaucophane_bleu_de_Groix.jpg", moreInfo: "https://en.wikipedia.org/wiki/Glaucophane" }, { mineral: "Fluorapatite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Fluorapatite-382311.jpg/366px-Fluorapatite-382311.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Fluorapatite-382311.jpg", moreInfo: "https://en.wikipedia.org/wiki/Fluorapatite" }, { mineral: "Benitoite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Benitoite%2C_joaquinite-%28Ce%29%2C_neptunite%2C_natrolite.jpg/320px-Benitoite%2C_joaquinite-%28Ce%29%2C_neptunite%2C_natrolite.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Benitoite,_joaquinite-(Ce),_neptunite,_natrolite.jpg", moreInfo: "https://en.wikipedia.org/wiki/Benitoite" }, { mineral: "Gypsum", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Gips_-_Lubin%2C_Poland..jpg/640px-Gips_-_Lubin%2C_Poland..jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Gips_-_Lubin,_Poland..jpg", moreInfo: "https://en.wikipedia.org/wiki/Gypsum" }, { mineral: "Albite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Albite.jpg/640px-Albite.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Albite.jpg", moreInfo: "https://en.wikipedia.org/wiki/Albite" }, { mineral: "Halite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Halit_%28NaCl%29_-_Kopalnia_soli_Wieliczka%2C_Polska.jpg/320px-Halit_%28NaCl%29_-_Kopalnia_soli_Wieliczka%2C_Polska.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Halit_(NaCl)_-_Kopalnia_soli_Wieliczka,_Polska.jpg", moreInfo: "https://en.wikipedia.org/wiki/Halite" }, { mineral: "Vermiculite", image: "https://upload.wikimedia.org/wikipedia/commons/9/9e/VermiculiteUSGOV.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:VermiculiteUSGOV.jpg", moreInfo: "https://en.wikipedia.org/wiki/Vermiculite" }, { mineral: "Uraninite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Uraninite-usa32abg.jpg/244px-Uraninite-usa32abg.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Uraninite-usa32abg.jpg", moreInfo: "https://en.wikipedia.org/wiki/Uraninite" }, { mineral: "Rhodonite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/8224M-rhodonite3.jpg/261px-8224M-rhodonite3.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:8224M-rhodonite3.jpg", moreInfo: "https://en.wikipedia.org/wiki/Rhodonite" }, { mineral: "Realgar", image: "https://upload.wikimedia.org/wikipedia/commons/5/52/Realgar-229713.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Realgar-229713.jpg", moreInfo: "https://en.wikipedia.org/wiki/Realgar" }, { mineral: "Almandine", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Almandin.jpg/320px-Almandin.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Almandin.jpg", moreInfo: "https://en.wikipedia.org/wiki/Almandine" }, { mineral: "Forsterite", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Forsterite-256945.jpg/234px-Forsterite-256945.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Forsterite-256945.jpg", moreInfo: "https://en.wikipedia.org/wiki/Forsterite" }, { mineral: "Quartz", image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Quartz%2C_Tibet.jpg/239px-Quartz%2C_Tibet.jpg", imageInfo: "https://commons.wikimedia.org/wiki/File:Quartz,_Tibet.jpg", moreInfo: "https://en.wikipedia.org/wiki/Quartz" } ]33:[] 2e:{"title":"Trò Chơi Tìm Khoáng Vật Giống Nhau","cells":[{"id":0,"value":"viewof title = md`# Trò Chơi Tìm Khoáng Vật Giống Nhau`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md` Circle layout graphs are so cool; just look at the inspiring work of [Nadieh Bremer](https://www.visualcinnamon.com/portfolio/) or [Harry Stevens](https://twitter.com/Harry_Stevens/status/1360257453703761926). This notebook my attempt at learning to use d3-force for circle layouts. While it is possibly the most frivolous use of d3 circle packing functions, it turned out to be a fun way to learn and my 6 year old had fun testing the notebook :). [This d3-force tutorial](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho) by Ben Tanen was very helpful.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"md`The rules of this single-player Spot It game are simple: Compare your card(left) to the one in the discard pile(right). Click on the matching image on your card to move it to the discard pile. The faster you can discard your cards, the better. Use the timer at the bottom to check your speed.

While you play, also marvel at the beautiful images of minerals featured in the [2020 Mineral Cup](https://twitter.com/MineralCup/status/1311946817680994306). Scroll down past the game to see a full gallery view of these rocks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"{\n if (start === 0) return md`Start timer to measure your speed`;\n if ((start !== 0 && stop === \"null\") || start > stop)\n return md`Timer is running. Stop Timer to display Speed`;\n if (stop !== \"null\" && stop > start) {\n var speed = mutable deal2 / ((stop - start) / 60000);\n return md`Your speed was ${speed.toPrecision(\n 3\n )} cards per minute. Reset timer to measure again.`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"viewof start = Button(\"Start/Reset Timer\", {\n value: 0,\n reduce: () => {\n mutable deal2 = 0;\n return performance.now();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"viewof stop = Button(\"Stop Timer\", {\n value: null,\n reduce: () => {\n return performance.now();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"viewof deal = Button(\"Give up and try a new card\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md` If you were too distracted by the minerals to focus on the game, enjoy this gallery of proud entries for the [2020 Mineral cup](https://twitter.com/MineralCup/status/1311946817680994306). Magnetite won the cup!
All images are from [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page). Click on the image for image information and on the mineral name to learn more about it. The gallery view is borrowed from https://observablehq.com/@d3/gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"viewof list = md`### Danh sách các khoáng vật trong cuộc thi [2020 Mineral cup](https://twitter.com/MineralCup/status/1311946817680994306). Ấn vào hình hoặc tên từng khoáng vật để xem thêm thông tin`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1041,"value":"viewof gallery = previews(mineralsWithPics)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"mutable deal2 = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"mutable circles = [getCircles(6), getCircles(6)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"{\n deal;\n deal2;\n mutable circles = twoSetsOfCircles(mutable circles[0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"function twoSetsOfCircles(yourCardCircles) {\n return [getCircles(6), yourCardCircles];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"cardRad = 0.9 * (width / 4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"mutable mineralSelect = {\n //initialize\n const arr = d3.shuffle(d3.range(minerals.length));\n return [arr.slice(0, 6), arr.slice(6)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"{\n deal;\n deal2;\n mutable mineralSelect = pickMinerals([\n mutable mineralSelect[0],\n mutable mineralSelect[1]\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"//shuffle, cut, add one from prev array, build res\nfunction pickMinerals([pick0, res0]) {\n const sch = d3.shuffle(res0.slice());\n const pick = d3.shuffle(\n sch\n .slice(0, 5)\n .concat(pick0[0])\n .slice()\n );\n const res = sch.slice(5).concat(pick0.slice(1));\n return [pick, res, pick0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"mineralsWithPics = Promise.all(minerals.map(min => loadImage(min)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"function loadImage(min) {\n var img = new Image();\n img.src = min.image;\n\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, min]));\n img.onerror = reject;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"distance = ([x1, y1], [x2, y2]) =>\n Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"function getRandomIntInclusive(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"function previews(mins) {\n return html`

${mins.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"function preview([image, min]) {\n return html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${event =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

\n\n${\n min.mineral\n }\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"import {Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}