2f:T1bbc,chart = { const width = 960; const height = 630; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const scalar = 15; const blur = Math.min(12, objectWidth * scalar / 8); const offset = Math.min(4, objectLength * scalar / 12); const lineOffset = 30; const markerOffset = 8; const xPosition = width/2 - objectWidth * scalar /2; const yPosition = height/2 - objectLength * scalar / 2; if (showImage) { //lines and markers svg.append("line") .style("stroke", "#D2D6DB") .style("stroke-width", 1) .attr("x1", xPosition) .attr("y1", yPosition - lineOffset) .attr("x2", xPosition + objectWidth * scalar) .attr("y2", yPosition - lineOffset); svg.append("line") .style("stroke", "#D2D6DB") .attr("stroke-width", 1) .attr("x1", xPosition - lineOffset) .attr("y1", yPosition) .attr("x2", xPosition - lineOffset) .attr("y2", yPosition + objectLength * scalar); svg.append("text") .attr("x", width / 2) .attr("y", yPosition) .attr("dy", -24) .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 12) .attr("text-anchor", "middle") .attr("fill", "#4D5761") .attr("font-weight",500) .attr("font-family", "Helvetica, sans-serif") .text(`${objectWidth}"`); svg.append("text") .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 12) .attr("dy", 0) .attr("text-anchor", "middle") .attr("fill", "#4D5761") .attr("font-weight",500) .attr("font-family", "Helvetica, sans-serif") .attr("transform", `translate(${xPosition - 24},${height / 2})rotate(-90)`) .text(`${objectLength}"`); svg.selectAll(".markers") .data([ {x1: xPosition - lineOffset - markerOffset, y1: yPosition, x2: xPosition - lineOffset + markerOffset, y2: yPosition}, {x1: xPosition - lineOffset - markerOffset, y1: yPosition + objectLength * scalar, x2: xPosition - lineOffset + markerOffset, y2: yPosition + objectLength * scalar}, {x1: xPosition, y1: yPosition - lineOffset - markerOffset, x2: xPosition, y2: yPosition - lineOffset + markerOffset}, {x1: xPosition + objectWidth * scalar, y1: yPosition - lineOffset - markerOffset, x2: xPosition + objectWidth * scalar, y2: yPosition - lineOffset + markerOffset}]) .join("line") .style("stroke", "#D2D6DB") .attr("stroke-width", 1) .attr("x1", d => d.x1) .attr("y1", d => d.y1) .attr("x2", d => d.x2) .attr("y2", d => d.y2); //background with shadow and image + clip shape svg.append("rect") .attr("class", "shadow") .attr("x", xPosition + 1) .attr("y", yPosition + 1) .attr("fill", "#ffffff") .attr("width", objectWidth * scalar - 2) .attr("height", objectLength * scalar - 2) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar) const defs = svg.append("defs") defs.append("clipPath") .attr("id", "clipShape") .append("rect") .attr("x", xPosition) .attr("y", yPosition) .attr("width", objectWidth * scalar) .attr("height", objectLength * scalar) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar) // only whatever parts of the shape inside the clipPath are visible svg.append("image") .attr("clip-path", "url(#clipShape)") .attr("xlink:href", image) .attr('width', 960) .attr('height', 630); svg.append("rect") .attr("clip-path", "url(#clipShape)") .attr("x", xPosition) .attr("y", yPosition) .attr("fill", "none") .attr("stroke", "#6C737F") .attr("opacity", .02) .attr("stroke-width", 15) .attr("width", objectWidth * scalar) .attr("height", objectLength * scalar) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar); } else { //shapes svg.append("rect") .attr("class", "shadow") .attr("x", xPosition + 1) .attr("y", yPosition + 1) .attr("fill", "#ffffff") .attr("stroke", "#9DA4AE") .attr("width", objectWidth * scalar) .attr("height", objectLength * scalar) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar) svg.append("rect") .attr("clip-path", "url(#clipShape)") .attr("x", xPosition) .attr("y", yPosition) .attr("fill", "none") .attr("stroke", "#6C737F") .attr("opacity", .02) .attr("stroke-width", 15) .attr("width", objectWidth * scalar) .attr("height", objectLength * scalar) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar); const defs = svg.append("defs") defs.append("clipPath") .attr("id", "clipShape") .append("rect") .attr("x", xPosition) .attr("y", yPosition) .attr("width", objectWidth * scalar) .attr("height", objectLength * scalar) .attr("rx", 1.5 * scalar) .attr("ry", 1.5 * scalar) defs.append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, 10, 10]) .attr('refX', 5) .attr('refY', 5) .attr('markerWidth', 10) .attr('markerHeight', 10) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()([[0, 0], [0, 10], [10, 5]])) .attr('fill', "#D2D6DB") .attr("stroke", "none"); //lines and markers svg.append("line") .attr("class", "dimension") .style("stroke", "#D2D6DB") .style("stroke-width", 1) .attr("x1", xPosition + 6) .attr("y1", yPosition + lineOffset * 2) .attr("x2", xPosition + objectWidth * scalar - 6) .attr("y2", yPosition + lineOffset * 2) .attr('marker-start', 'url(#arrow)') .attr('marker-end', 'url(#arrow)'); svg.append("line") .attr("class", "dimension") .style("stroke", "#D2D6DB") .attr("stroke-width", 1) .attr("x1", xPosition + lineOffset * 2) .attr("y1", yPosition + 6) .attr("x2", xPosition + lineOffset * 2) .attr("y2", yPosition + objectLength * scalar - 6) .attr('marker-start', 'url(#arrow)') .attr('marker-end', 'url(#arrow)'); svg.append("text") .attr("x", width / 2) .attr("y", yPosition + lineOffset * 2) .attr("dy", 6) .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 12) .attr("text-anchor", "middle") .attr("fill", "#4D5761") .attr("font-weight",500) .attr("font-family", "Helvetica, sans-serif") .text(`${objectWidth}"`); svg.append("text") .attr("paint-order", "stroke") .attr("stroke", "#ffffff") .attr("stroke-width", 12) .attr("dy", 6) .attr("text-anchor", "middle") .attr("fill", "#4D5761") .attr("font-weight",500) .attr("font-family", "Helvetica, sans-serif") .attr("transform", `translate(${xPosition + lineOffset * 2},${height / 2})rotate(-90)`) .text(`${objectLength}"`); } return svg.node(); }30:[{"id":"278e6737fa2948fe65fe9a691b1a3c98fdc9b1b3ec8b3c9237c417807e65bc77575a1032559f6e4ac79d36b29ada10fec33ce7c8a110fcc613a221e67f059007","href":"https://static.observableusercontent.com/files/278e6737fa2948fe65fe9a691b1a3c98fdc9b1b3ec8b3c9237c417807e65bc77575a1032559f6e4ac79d36b29ada10fec33ce7c8a110fcc613a221e67f059007","name":"closeup-marble-textured-background.jpg","type":"image/jpeg","lastModified":1730156142802.144,"size":1760429}] 2d:{"title":"Drawing Prototype","cells":[{"id":0,"value":"# Drawing Prototype\n\nPrototype for implementing a simple preview feature.","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"viewof objectWidth = Inputs.range([18, 36], {label: \"Width\", step: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof objectLength = Inputs.range([18, 36], {label: \"Length\", step: 2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"viewof showImage = Inputs.toggle({label: \"Show Image\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"import {slide, slide_style} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"// image = slide.img`${await FileAttachment(\"closeup-marble-textured-background.jpg\").url()}`\nimage = FileAttachment(\"closeup-marble-textured-background.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"function createDropShadowFilter(id, color, blurRadius = 12, offsetX = 4, offsetY = 4, alpha = 0.4) {\n return svg`\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}