31:Tc67,yup = { const width = 300, height = 300; let svg = d3.select(createSVG(width, height)).style("border", "none").style("background-color", "#FFF"); const links = [" grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grtatabrbrtatagrbrbr \n brbrbrbrbrtatatagrgrgrta \n brbrtabrbrbrbrgrgrgrgrgrta \n brtatatabrbrtabrbrgrgrbr \n brbrtabrbrbrtagrbrbrbrgr \n brbrtabrbrbrtabrbrgrgrgr \n brbrbrbrbrbrtagrgrgrbr \n tatatatata brbrbr \n brbrbr \n"," grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grgrtatabrbrtatagrgrbr \n brbrbrbrbrtatatatagrgrbrbrbr \n brbrtabrbrbrbrgrgrgrgrgrtabrbr \n brtatatabrbrtabrbrgrgrtatatabr \n brbrtabrbrbrtagrbrbrbrbrtatata \n brbrtabrbrbrtabrbrgrgrgrgrta \n brbrbrbrbrbrtagrgrgrgrgrgr \n tatatatatabr brbrbrbr \n brbrbr \n"] let linkData = []; links.forEach((link, linkNum) => { link.split("\n").forEach((line, i) => { linkData.push({"num": linkNum,"points":line.match(/[\s\S]{1,2}/g)}); }) }) linkData = linkData.filter((d) => d.points != null); const y = d3.scaleLinear() .domain([0, linkData[0].points.length]) .range([0, height]) const x = d3.scaleLinear() .domain([0, linkData[0].points.length]) .range([0, width]); const colorScale = d3.scaleOrdinal() .domain(["gr","br","ta", " "]) .range(["#adfc16","#df4812","#fd9138","#FFF"]) const blockgroups = svg.selectAll(".block-group") .data(linkData.filter(d => d.num == 0)) .enter().append("g") .attr("class", "block-group") .attr("transform", (d,i) => `translate(0,${y(i)})` ) const blocks = blockgroups.selectAll(".block") .data(d => d.points) .enter().append("rect") .attr("class", "block") .attr("x", (d, i) => x(i)) .attr("width", width/x.domain()[1]) .attr("height", height/y.domain()[1]) .style("stroke", d => colorScale(d)) .style("fill", d => colorScale(d)) .style("opacity", 0) blocks.transition() .duration(2000) .delay((d,i) => i*100*Math.random()) .style("opacity", 1); let indexNum = 0; d3.interval(elapsed => { blockgroups .data(linkData.filter(d => d.num == indexNum)) .selectAll(".block") .data((d) => d.points ) .attr("x", (d, i) => x(i)) .attr("width", width/x.domain()[1]) .attr("height", height/y.domain()[1]) .style("stroke", d => colorScale(d)) .style("fill", d => colorScale(d)); if(indexNum == links.length-1) { indexNum = 0; } else { indexNum += 1; } }, 300) return svg.node(); }32:T491,userControls = window.addEventListener('keydown', (event) => { // let spot = 0; const keyName = event.key; if(keyName== 'ArrowDown') { d3.select(levels[window.level]).selectAll(".block-group").remove() if(window.level < 2) { window.level += 1 } zelda(levels[window.level]) } if(keyName == 'ArrowUp') { d3.select(levels[window.level]).selectAll(".block-group").remove() if(window.level > 0) { window.level -= 1 } zelda(levels[window.level]) } if(keyName == 'ArrowRight') { window.spot += 20; d3.select(two).select("g") .attr("transform", `translate(${window.spot},0)`); d3.select(one).select("g") .attr("transform", `translate(${window.spot},0)`); d3.select(three).select("g") .attr("transform", `translate(${window.spot},0)`); } if(keyName == 'ArrowLeft') { window.spot -= 20; d3.select(two).select("g") .attr("transform", `translate(${window.spot},0)`); d3.select(one).select("g") .attr("transform", `translate(${window.spot},0)`); d3.select(three).select("g") .attr("transform", `translate(${window.spot},0)`); } })33:Tb92,function zelda(svgNode) { const width = 100, height = 100; let svg = d3.select(svgNode).select("g"); const links = [" grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grtatabrbrtatagrbrbr \n brbrbrbrbrtatatagrgrgrta \n brbrtabrbrbrbrgrgrgrgrgrta \n brtatatabrbrtabrbrgrgrbr \n brbrtabrbrbrtagrbrbrbrgr \n brbrtabrbrbrtabrbrgrgrgr \n brbrbrbrbrbrtagrgrgrbr \n tatatatata brbrbr \n brbrbr \n"," grgrgrgrgrgr \n grgrgrgrgrgrgrgr \n ta grbrbrbrbrbrbrgr ta \n ta brbrbrbrbrbrbrbr ta \n tatabrtagrtatagrtabrtata \n tatabrtabrtatabrtabrtata \n tatatatatatatatatatabr \n grgrtatabrbrtatagrgrbr \n brbrbrbrbrtatatatagrgrbrbrbr \n brbrtabrbrbrbrgrgrgrgrgrtabrbr \n brtatatabrbrtabrbrgrgrtatatabr \n brbrtabrbrbrtagrbrbrbrbrtatata \n brbrtabrbrbrtabrbrgrgrgrgrta \n brbrbrbrbrbrtagrgrgrgrgrgr \n tatatatatabr brbrbrbr \n brbrbr \n"] let linkData = []; links.forEach((link, linkNum) => { link.split("\n").forEach((line, i) => { linkData.push({"num": linkNum,"points":line.match(/[\s\S]{1,2}/g)}); }) }) linkData = linkData.filter((d) => d.points != null); const y = d3.scaleLinear() .domain([0, linkData[0].points.length]) .range([0, height]) const x = d3.scaleLinear() .domain([0, linkData[0].points.length]) .range([0, width]); const colorScale = d3.scaleOrdinal() .domain(["gr","br","ta", " "]) .range(["#adfc16","#df4812","#fd9138","lightgray"]) const blockgroups = svg.selectAll(".block-group") .data(linkData.filter(d => d.num == 0)) .enter().append("g") .attr("class", "block-group") .attr("transform", (d,i) => `translate(0,${y(i)})` ) blockgroups.selectAll(".block") .data(d => d.points) .enter().append("rect") .attr("class", "block") .attr("x", (d, i) => x(i)) .attr("width", width/x.domain()[1]) .attr("height", height/y.domain()[1]) .style("stroke", d => colorScale(d)) .style("fill", d => colorScale(d)); let indexNum = 0; d3.interval(elapsed => { blockgroups .data(linkData.filter(d => d.num == indexNum)) .selectAll(".block") .data((d) => d.points ) .attr("x", (d, i) => x(i)) .attr("width", width/x.domain()[1]) .attr("height", height/y.domain()[1]) .style("stroke", d => colorScale(d)) .style("fill", d => colorScale(d)); if(indexNum == links.length-1) { indexNum = 0; } else { indexNum += 1; } }, 300) return svg.node(); }34:T4a4, ` grgrgrgrgrgr grgrgrgrgrgrgrgr ta grbrbrbrbrbrbrgr ta ta brbrbrbrbrbrbrbr ta tatabrtagrtatagrtabrtata tatabrtabrtatabrtabrtata tatatatatatatatatatabr grtatabrbrtatagrbrbr brbrbrbrbrtatatagrgrgrta brbrtabrbrbrbrgrgrgrgrgrta brtatatabrbrtabrbrgrgrbr brbrtabrbrbrtagrbrbrbrgr brbrtabrbrbrtabrbrgrgrgr brbrbrbrbrbrtagrgrgrbr tatatatata brbrbr brbrbr grgrgrgrgrgr grgrgrgrgrgrgrgr ta grbrbrbrbrbrbrgr ta ta brbrbrbrbrbrbrbr ta tatabrtagrtatagrtabrtata tatabrtabrtatabrtabrtata tatatatatatatatatatabr grgrtatabrbrtatagrgrbr brbrbrbrbrtatatatagrgrbrbrbr brbrtabrbrbrbrgrgrgrgrgrtabrbr brtatatabrbrtabrbrgrgrtatatabr brbrtabrbrbrtagrbrbrbrbrtatata brbrtabrbrbrtabrbrgrgrgrgrta brbrbrbrbrbrtagrgrgrgrgrgr tatatatatabr brbrbrbr brbrbr `35:[] 2f:{"title":"Link Sneaking Around","cells":[{"id":0,"value":"md`# Link Sneaking Around`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Having fun with Obserable cells... Link here can sneak around using your __Up, Down, Left, Right__ buttons. You might need to click one one these gray rectangles first.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"one = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"two = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"three = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`Pretty sure this is enough of a proof of concept to confirm that I can and should be building an Observable Zelda game...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`Zelda here is made of tiny squares and some manually created data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"window.spot = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"window.level = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"html`