31:T721,# Plotter-Friendly SVG Postcards This notebook generates space-efficient layouts for printing postcards — both front and back — primarily intended for printing using a pen plotter such as AxiDraw. The SVG outputs are meant to be loaded in InkScape for plotting; the various graphic elements on the page will appear as separate layers when opened in that app. This is achieved using code from [this notebook](https://observablehq.com/@meetamit/svg-sheet). The recipient and sender addresses as well as the written message are generated using plotter-friendly [Hershy fonts](https://observablehq.com/@meetamit/hershey-fonts), driven by user-provided JSON data. The graphics on the fronts of the postcards are generated with a mirrored layout to ensure they line up with the corresponding back sides, and they're easy to swap with your own JavaScript-generated SVG. If you intend to use this notebook for your own postcard needs, you’ll need to provide at least two things: 1. An array of names, addresses and messages in a structure that matches the faked data in the cell named `data` below. 2. Your own implementation of the function `renderPostcardGraphics()`, defined below in a cell with that name. You can provide those ~~by either forking the notebook and modifying, or, more sophisticatedly,~~ by choosing a file from your file system (which won't get saved with the notebook) or by creating your own blank notebook and importing the cells you need (`frontSide` and `backSide`) with (using the `with` directive) your own cells to override (at minimum `data` and `renderPostcardGraphics`). I no longer recommend forking this notebook and putting your won data in your fork because, as far as I understand, your fork will be public -- and so would the data you put in it, which is real people's real addresses.32:T71b,/* This is a placeholder implementation for front-side graphics. It's a simple thing that renders the postcard index (1-based) as a Hershy font digit, and then uses the resulting points in a voronoi. */ function renderPostcardGraphics(sheet, postcards, convert, postcardTransform) { // using deterministic random numbers here const r = d3.randomNormal.source(d3.randomLcg(2022))() const a = 12 d3.select(sheet.layers['Graphic']).selectAll('path') .data(displayOpts.includes('Frame') ? postcards : []) .join('path') .attr('fill', 'none').attr('stroke', '#333') .attr('transform', postcardTransform) .attr('d', function(p, i) { const points = renderTextArray(String(pageIndex * pageLayout.capacity+i+1), { font: 'timesrb' }) .map(({d}) => d.replace(/[LM]/g, '') .split(' ') .map(p => p.split(',').map(Number)) ) .flatMap(pts => { const size = [ d3.extent(pts, p => p[0]).reduce((a,b) => b - a), d3.extent(pts, p => p[1]).reduce((a,b) => b - a), ] const scl = .5 * Math.min.apply(null, size.map((v,i) => convert(postcardSize[i]) / v)) const shift = size.map((v, i) => convert(postcardSize[i]/2) - v * scl / 2) return pts .map(p => p .map(v => v * scl) .map((v,i) => v + shift[i]) ) .flatMap(p => [ p, [p[0] - a*r(), p[1] - a*r()], [p[0] + a*r(), p[1] + a*r()], [p[0] + a*r(), p[1] - a*r()], [p[0] - a*r(), p[1] + a*r()], ]) }) // return d3Delaunay.Delaunay.from(points).render() return d3.Delaunay .from(points) .voronoi([ 0,0, ...postcardSize.map(convert) ]) .render() }) }33:T472,function renderPostcardFrames(sheet, postcards, convert, postcardTransform) { d3.select(sheet.layers['Frame']).selectAll('rect') .data(displayOpts.includes('Frame') ? postcards : []) .join('rect') .attr('width', p => convert(p.size[0])) .attr('height', p => convert(p.size[1])) .attr('fill', 'none').attr('stroke', '#eee') .attr('transform', postcardTransform) const cl = .125 d3.select(sheet.layers['Cut Lines']).selectAll('path') .data(displayOpts.includes('Cut Lines') ? postcards : []) .join('path') .attr('transform', postcardTransform) .attr('stroke', colors.pencil).attr('fill', 'none') .attr('d', p => [ [cl, cl], [postcardSize[0]-cl, cl], [postcardSize[0]-cl, postcardSize[1]-cl], [cl, postcardSize[1]-cl] ].map( (pt, i) => d3.range(0, .50001, .25) .map(v => Math.PI * (v - 1 + i*.5)) .map((a, i) => [ pt[0] + Math.cos(a) * cl * (i === 1 ? Math.SQRT2 : 1), pt[1] + Math.sin(a) * cl * (i === 1 ? Math.SQRT2 : 1) ]) .map((p,i) => `${i === 0 ? 'M' : 'L'}${p.map(convert).join(' ')}`).join(' ')) ) }34:T11fd,function renderPostcardBacksides(sheet, postcards, convert, postcardTransform) { renderPostcardFrames(sheet, postcards, convert, postcardTransform) d3.select(sheet.layers['Guidelines']).selectAll('g') .data(displayOpts.includes('Guidelines') ? postcards : []) .join('g') .attr('transform', postcardTransform) .selectAll('rect') .data(p => [p.address.bounds, p.stamp.bounds, p.message.bounds, p.senderAddress.bounds]) .join('rect') .attr('width', b => convert(b[1][0] - b[0][0])) .attr('height', b => convert(b[1][1] - b[0][1])) .attr('x', b => convert(b[0][0])) .attr('y', b => convert(b[0][1])) .attr('fill', 'none').attr('stroke', '#ff4400') d3.select(sheet.layers['Address Lines']) .selectAll('path') .data(displayOpts.includes('Address Lines') ? postcards : []) .join('path') .attr('d', postcard => { return postcard.address.lines .map(l => `M${convert(l[0][0])} ${convert(l[0][1])} L${convert(l[1][0])} ${convert(l[1][1])}`) .join('') }) .attr('fill', 'none').attr('stroke', colors.pencil) .attr('transform', postcardTransform) d3.select(sheet.layers['Address Text']) .selectAll('g.postcard') .data(postcards) .join('g') .attr('class', 'postcard') .attr('transform', postcardTransform) .selectAll('g') .data(p => p.address.lines) .join('g') .each(function(l) { while (this.firstChild) { this.firstChild.remove() } l.text && renderTextPaths(l.text, { font: addressFont, color: colors.pen, size: addressFontSize, }).forEach(path => { this.append(path) }) }) .attr('transform', function (l) { const textLength = this.getBBox().width if (textLength === 0) return const lineLength = convert(l[1][0] - l[0][0]) return ` translate(${convert(l[0][0])}, ${convert(l[0][1] - addressFontSize/72)}) scale(${Math.min(1, lineLength / textLength)}) ` }) d3.select(sheet.layers['Sender Address']) .selectAll('g.postcard') .data(postcards) .join('g') .attr('class', 'postcard') .attr('transform', postcardTransform) .selectAll('g') .data(p => [p]) .join('g') .each(function(p) { while (this.firstChild) { this.firstChild.remove() } renderTextPaths(p.senderAddress.text, { font: addressFont, color: colors.pen, size: addressFontSize / 2, lineHeight: .45, wrapWidth: convert(p.senderAddress.bounds[1][0] - p.senderAddress.bounds[0][0]), }).forEach(path => this.append(path)) }) .attr('transform', p => `translate(${p.senderAddress.bounds[0].map(convert)})`) d3.select(sheet.layers['Message']) .selectAll('g.postcard') .data(postcards) .join('g') .attr('class', 'postcard') .attr('transform', postcardTransform) .selectAll('g') .data(p => [p]) .join('g') .each(function(p) { while (this.firstChild) { this.firstChild.remove() } p.message.text && renderTextPaths(p.message.text, { font: bodyFont, color: colors.pen, size: bodyFontSize, lineHeight: bodyLineHeight, wrapWidth: convert(p.message.bounds[1][0] - p.message.bounds[0][0]), }).forEach(path => this.append(path)) }) .attr('transform', function(p) { const textHeight = this.getBBox().height const bounds = p.message.bounds const availableHeight = convert(bounds[1][1] - bounds[0][1]) const scale = Math.min(1, availableHeight / textHeight) return ` translate(${convert(bounds[0][0])} ${convert(bounds[1][1]) - scale * textHeight}) scale(${scale}) ` }) d3.select(sheet.layers['Stamp']) .selectAll('rect') .data(displayOpts.includes('Stamp') ? postcards : []) .join('rect') .attr('width', p => convert(p.stamp.frame[1][0] - p.stamp.frame[0][0])) .attr('height', p => convert(p.stamp.frame[1][1] - p.stamp.frame[0][1])) .attr('x', p => convert(p.stamp.frame[0][0])) .attr('y', p => convert(p.stamp.frame[0][1])) .attr('fill', 'none').attr('stroke', colors.pencil) .attr('transform', postcardTransform) }35:T91b,function Postcard({ data={}, postcardSize = [6, 4.25], addressSize = [3, 2], addressLineTrim = [.125, .125],// offset, from address bounds, to trim each address line endpoint barcodeClearance = 0.625,// bottom area to avoid stampSize = [1.25, 1.25], stampFrameOffset = [.125, .125, .25, .375], messageOffset = [.25, .125, 0, .125], senderAddressOffset = [.125, .125, 0, .125], }={}) { const address = data.address || '\n\n\n\n' const sender = data.sender || '\n\n' const message = data.message || '' // Address const addressTexts = address.split('\n') const numAddressLines = addressTexts.length const addressBounds = [ [ postcardSize[0] - addressSize[0], postcardSize[1] - addressSize[1] - barcodeClearance ], [ postcardSize[0], postcardSize[1] - barcodeClearance ] ] const lineHeight = addressSize[1] / numAddressLines const lineLength = addressSize[0] - addressLineTrim[0] - addressLineTrim[1] const lines = d3.range(0, numAddressLines).map(i => Object.assign([ [addressBounds[0][0] + addressLineTrim[0], addressBounds[0][1] + (i+1) * lineHeight], [addressBounds[1][0] - addressLineTrim[1], addressBounds[0][1] + (i+1) * lineHeight], ], { text: addressTexts[i] })) // Sender Address const senderAddressBounds = [ [senderAddressOffset[3], senderAddressOffset[0]], [postcardSize[0] - addressSize[0] - senderAddressOffset[1], .625 - senderAddressOffset[2]], ] // Message const messageBounds = [ [messageOffset[3], senderAddressBounds[1][1] + messageOffset[0]], [ postcardSize[0] - addressSize[0] - messageOffset[1], postcardSize[1] - messageOffset[2] - barcodeClearance ] ] // Postage stamp const stampBounds = [ [ postcardSize[0] - stampSize[0], 0], [ postcardSize[0], stampSize[1]], ] const stampFrameBounds = [ [ stampBounds[0][0] + stampFrameOffset[3], stampFrameOffset[0] ], [ stampBounds[1][0] - stampFrameOffset[1], stampBounds[1][1] - stampFrameOffset[2] ], ] return { size: postcardSize, address: { size: addressSize, bounds: addressBounds, lineHeight, lineLength, lines }, stamp: { size: stampSize, bounds: stampBounds, frame: stampFrameBounds }, message: { bounds: messageBounds, text: message }, senderAddress: { bounds: senderAddressBounds, text: sender } } } 36:[] 2f:{"title":"Plotter-Friendly SVG Postcards","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1093,"value":"viewof fileData = Inputs.file({ label: 'Provide your own data', accept: '.json'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"html`

Back Side

\n ${renderSvgDownloadButton(backSide, `postcard-backsides-p${pageIndex+1}.svg`, 'Download Backside SVG')}\n ${renderPrintButton(backSide, 'postcards', 'Print Backside')}\n

Use the Download SVG button to export your graphics so that you can open them in InkScape for plotting. The Print button is useful for a quick test print on a typical printer. However, since printers can't print all the way to the edge of the paper, use the Device checkbox to apply some top-left margin to the print. As a result, postcards near the bottom or right of the page may get cutoff, but you'll at least have one postcard preview intact

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"viewof device = Inputs.radio(['Plotter', 'Printer'], { value: 'Plotter', label: 'Device'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"backSide = {\n const sheet = svgSheet({\n viewSize:[width, width * .8],\n paperSize: paperSize,\n unit: 'in',\n margin: { t: device === 'Printer' ? 0.35 : 0, r: 0.5, b: .5, l: device === 'Printer' ? 0.35 : 0 },\n zoomable: true,\n rulers: {\n t: rulers.includes('Top'), b: rulers.includes('Bottom'),\n l: rulers.includes('Left'), r: rulers.includes('Right'),\n }\n })\n const inset = device === 'Printer'\n sheet.addLayer({ inset, name: 'Frame' })\n sheet.addLayer({ inset, name: 'Cut Lines' })\n sheet.addLayer({ inset, name: 'Sender Address' })\n sheet.addLayer({ inset, name: 'Message' })\n sheet.addLayer({ inset, name: 'Address Lines' })\n sheet.addLayer({ inset, name: 'Address Text' })\n sheet.addLayer({ inset, name: 'Stamp' })\n sheet.addLayer({ inset, name: 'Guidelines' })\n\n return sheet\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"## Current Page\n\nNot all postcards fit on a single page, use the page select which postcards to render.","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"viewof pageIndex = {\n const sel = d3.create('form')\n .style('display', 'inline-flex')\n\n \n const option = sel.selectAll('h3')\n .data(d3.range(0, data.length/pageLayout.capacity))\n .join('h3')\n .style('width', '1.5em')\n .style('border', '1px solid #888')\n .style('text-align', 'center')\n .style('padding', '16px 0px 0')\n .style('line-height', 1)\n .style('margin-right', '5px')\n .text(i => i + 1)\n .on('click', (e, i) => update(i))\n\n function update(value) {\n option\n .style('background', i => i === value ? '#333' : null)\n .style('color', i => i === value ? '#fff' : null)\n .style('cursor', i => i === value ? null : 'pointer')\n Object.assign(sel.node(), { value })\n .dispatchEvent(new CustomEvent('input'))\n return sel.node()\n }\n\n return update(0)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"## Postcard Size\n\nUnits a all in inches. Postcard and paper sizes affect how many postcards fit in a single page. Keep in mind that the backsides' layout is optmized for the standard 4.25\"x6\" postcards, so a smaller size might look off. Set the paper size based on the printable area of your plotter. If yours is an AxiDraw V3 then 8.5\"x11\" is the way to go.","pinned":false,"hidden":false,"mode":"md"},{"id":1008,"value":"viewof postcardWidth = Inputs.range([4, 10], { value: 6, label: 'Postcard Width', step: 0.125})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"viewof postcardHeight = Inputs.range([2.5, 8], { value: 4.25, label: 'Postcard Height', step: 0.125})","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"viewof paperSize","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"## Postcard Backside Attributes","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"viewof addressFont = Inputs.select(Object.keys(fonts), { label: 'Font', label: 'Address font', value: 'scriptc' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"viewof bodyFontSize = Inputs.range([6, 20], { value: 11, step: .5, label: 'Body font size' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof bodyLineHeight = Inputs.range([.4, 1.5], { value: .7, step: .05, label: 'Body line height' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof addressFontSize = Inputs.range([10, 30], { value: 20, step: .5, label: 'Address font size' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof bodyFont = Inputs.select(Object.keys(fonts), { label: 'Font', label: 'Body font', value: 'timesi' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"viewof displayOpts = Inputs.checkbox(\n ['Address Lines', 'Stamp', 'Cut Lines', 'Frame', 'Guidelines'], \n { value: ['Address Lines', 'Stamp', 'Cut Lines', 'Frame'], label: 'Show/Hide' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof rulers = Inputs.checkbox(['Top', 'Right', 'Bottom', 'Left'], { value: ['Right'], label: 'Rulers' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"html`

Front Side

\n ${renderPrintButton(frontSide, 'postcards', 'Print Front Side')}\n ${renderSvgDownloadButton(frontSide, `postcard-frontsides-p${pageIndex+1}.svg`, 'Download Front Side SVG')}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"The front side's postcard layout is flipped and adjusted to ensure it lines up with the back sides. But still, when plotting this, it is up to you to ensure that the 0,0 registration point of the two sides are properly lined up.","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"frontSide = {\n const sheet = svgSheet({\n viewSize:[width, width * .8],\n paperSize: paperSize,\n unit: 'in',\n margin: { t: device === 'Printer' ? 0.35 : 0, r: 0.5, b: .5, l: device === 'Printer' ? 0.35 : 0 },\n zoomable: true,\n rulers: {\n t: rulers.includes('Top'), b: rulers.includes('Bottom'),\n l: rulers.includes('Left'), r: rulers.includes('Right'),\n }\n })\n const inset = device === 'Printer'\n sheet.addLayer({ inset, name: 'Frame' })\n sheet.addLayer({ inset, name: 'Cut Lines' })\n sheet.addLayer({ inset, name: 'Graphic' })\n\n return sheet\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"postcardSize = [postcardWidth, postcardHeight]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"The next cells take care of rendering. The \"sheets\" into which the SVGs get rendered are defined in their own cells (named `frontSide` and `backSide`), to ensure they don't get rerun when postcard params are tweaked using the inputs. As a result, if you zoom into a sheet and change the params, the existing view bounds get preserved.\n\nIf you're printing your own graphics on the postcards, you'll want to provide your own implementation of `renderPostcardGraphics()`:","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"function renderPostcardFrontsides(sheet, postcards, convert, postcardTransform) {\n renderPostcardFrames(sheet, postcards, convert, postcardTransform)\n renderPostcardGraphics(sheet, postcards, convert, postcardTransform)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"renderer = {\n const postcards = data\n .slice(pageIndex * pageLayout.capacity, (pageIndex+1) * pageLayout.capacity)\n .map(data => Postcard({ data, postcardSize, }))\n\n const convert = v => backSide.convert(v, 'in')\n \n renderPostcardBacksides(backSide, postcards, convert, (p, i) => {\n const v = pageLayout.transformBackside(i)\n return `translate(${convert(v[0])}, ${convert(v[1])}) rotate(${v[2]})`\n })\n\n renderPostcardFrontsides(frontSide, postcards, convert, (p, i) => {\n const v = pageLayout.transform(i)\n return `translate(${convert(v[0])}, ${convert(v[1])}) rotate(${v[2]})`\n })\n\n return 'SUCCESS!'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"A settings object of colors. If you're plotting this, then of course colors don't really matter, since you can use the writing instrument of your choice.","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"colors = ({\n pencil: '#999',\n pen: '#5980d4'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"The next cells compute in-postcard and whole-page layouts","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"pageLayout = PostcardLayout(postcardSize, paperSize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"function PostcardLayout(postcard, paper) {\n const numCols0 = Math.floor(paper[0] / postcard[0]),\n numRows0 = Math.floor(paper[1] / postcard[1]),\n numCols90 = Math.floor((paper[0] - numCols0 * postcard[0]) / postcard[1]),\n numRows90 = Math.floor(paper[1] / postcard[0]),\n capacity = numCols0 * numRows0 + numCols90 * numRows90\n\n return {\n capacity,\n transformBackside: (i) => {\n if (i < numCols0 * numRows0) {\n return [(i % numCols0) * postcard[0], Math.floor(i / numCols0) * postcard[1], 0]\n } else if (i < capacity) {\n return [postcard[0] * numCols0 + postcard[1], (i - numCols0 * numRows0) * postcard[0], 90]\n }\n },\n transform: (i) => {\n if (i < numCols0 * numRows0) {\n return [paper[0] - ((i % numCols0) + 1) * postcard[0], Math.floor(i / numCols0) * postcard[1], 0]\n } else if (i < capacity) {\n return [paper[0] - numCols0 * postcard[0] - postcard[1], (i - numCols0 * numRows0 + 1) * postcard[0], -90]\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"Calling `Postcard()` instantiates a \"model\" object describing the layout of the postcard's back side, with computed coordinates for the lines and text to be rendered. The actual rendering is done in the cell named `renderPostcardBacksides`","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"Below is the postcard data (recipient, sender, message), generated using faker.js. You could swap this data with your own real data.","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"data = realData || d3.range(0, 12).map(() => {\n const firstName = faker.name.firstName()\n const lastName = faker.name.lastName()\n const fullName = firstName + ' ' + lastName\n return {\n name: fullName,\n twitter: '@' + faker.internet.userName(firstName, lastName),\n mastodon: '@' + faker.internet.userName(firstName, lastName) + '@vis.social',\n address: [\n fullName,\n faker.address.streetAddress(),\n faker.address.secondaryAddress(),\n `${faker.address.cityName()}, ${faker.address.stateAbbr()} ${faker.address.zipCode('#####')}`,\n faker.address.country()\n ].join('\\n'),\n message: `Dear ${firstName},\\n${faker.lorem.paragraph(4)}`,\n sender: [\n faker.name.fullName(),\n `${faker.address.streetAddress()} ${faker.address.secondaryAddress()}`,\n `${faker.address.cityName()}, ${faker.address.stateAbbr()}` +\n `${faker.address.zipCode('#####')} ${faker.address.country()}`,\n ].join('\\n'), \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"If you provide your own data -- using the file input -- this object will be non-null and will take precedence over the faked data.","pinned":false,"hidden":false,"mode":"md"},{"id":1100,"value":"realData = {\n try {\n return fileData && await fileData.json()\n } catch (e) { return e }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { svgSheet, renderSvgDownloadButton, renderPrintButton, viewof paper as paperSize } from '@meetamit/svg-sheet'","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import { renderTextArray, renderTextSvg, renderTextPaths, fonts } from '@meetamit/hershey-fonts'","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"faker = (await import('https://cdn.skypack.dev/@faker-js/faker@7.6.0?min')).faker","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}