30:Tb4d,viewof baseMap = { // First parse Map SVG ... // ... by preparing elements for being animated, create timeline const map = svg`${mapConfig.map}`; yield map; // ... by measuring map's elements ... //const svgScale = height / svgAtt.viewBox.baseVal.height; map.setAttribute("preserveAspectRatio", "xMinYMid slice"); map.setAttribute("height", height + 'px'); map.setAttribute("width", width + 'px'); map.appendChild(svg` `); // append background plane const svgHeight = map.viewBox.baseVal.height; const svgWidth = map.viewBox.baseVal.width; map.appendChild(svg` `); map.appendChild(map.querySelector("g")); // get important handles const mainGroup = map.querySelector("g"); const ch = map.querySelector('#ch'); const labels = map.querySelector('#Labels'); ch.appendChild(svg` `); // calc map squeezing and top offset const targetMapHeight = height * squeezeFactor; const yScale = targetMapHeight / ch.getBBox().height // svgScale; const topOffset = height - targetMapHeight; const textElemData = collectData(labels, topOffset, yScale, svgWidth); const maxWidth = textElemData.reduce((p,c) => { return Math.max(p, c.xAnchorCoord + c.textWidth) }, svgWidth); console.log(maxWidth,width) setStartPositions(textElemData, 1)//(maxWidth-width)/maxWidth); const prevLevel = setYLevels(textElemData.filter(t => t.direction === 'forward')); setYLevels(textElemData.filter(t => t.direction === 'backward'), prevLevel); addLines(labels, textElemData); // apply map squeeze ch.style.transform = `translate(0px, ${topOffset}px) scale(1, ${yScale})`; // structure data into sub timelines addTimelines(textElemData); // ... slowly move map from right to left const timeline = gsap.gsap.timeline({repeat:0, yoyo: false}) //.pause(); const x = width - maxWidth // * svgScale; const repeat = sizeConfig[sizeType].numLoops - 1; timeline.fromTo( mainGroup, { x: 0 }, { x, ease: 'linear', repeat, duration: loopDuration, yoyo: true }, 0 ); // ... and append text elements as sub timelines to main timeline textElemData.forEach(t => { timeline.add(t.timeline) t.timeline.play(); }); const seek = (s) => { timeline.seek(s); return map; } map.value = { textElemData, map, timeline, seek, handles: {mainGroup, ch, labels} }; }31:T59b,collectData = (container, topOffset, yScale, svgWidth) => { // get svg handles const labelLeft = container.getBoundingClientRect().left - container.parentElement.getBoundingClientRect().left; const labelTop = container.getBoundingClientRect().top - container.parentElement.getBoundingClientRect().top; const padding = { x: 10, y: -42} const texts = container.querySelectorAll('text') // augment text elements const data = []; texts.forEach(t => { const span = t.querySelector('tspan'); const text = span.textContent // set correct position according to squeeze and padding const x = Number(span.getAttribute('x')); const y = Number(span.getAttribute('y')); const textWidth = span.getBBox().width * Math.cos(textAngle / 180 * Math.PI); const textHeight = span.getBBox().width * Math.sin(textAngle / 180 * Math.PI); const xAnchorCoord = x - padding.x; const yAnchorCoord = (y - padding.y) * yScale + topOffset - labelTop; const yLabelCoord = topOffset * 0.5 const ratio1 = (x + labelLeft) / svgWidth const ratio2 = (x + labelLeft + textWidth) / svgWidth const ratio = ratio1 * 0.9; const inverseRatio = (1 - ratio2) * 0.9 // 2 - ratio2 * 1.1; // push properties as object data.push({ el: t, xAnchorCoord, yLabelCoord, yAnchorCoord , ratio, inverseRatio, text, span, textWidth, textHeight }) }); return data; }32:T69d,setYLevels = (data, startPrevLevel = 0) => { const textAngleRadius = textAngle * Math.PI / 180; const lineHeight = fontSize; // readable line height const minDist = lineHeight / Math.sin(textAngleRadius); const levelStep = minDist / Math.cos(textAngleRadius); const baseLevelLoop = [0, 1, 2, 3, 4, -1, -2, -3]; // [0,2,4,-2]// const gridResolution = minDist; let levelLoop = baseLevelLoop.concat( //baseLevelLoop.slice(0).map(d => d / 2), baseLevelLoop.map(d => d - 0.5), //baseLevelLoop.map(d => d - 0.25) ) console.log(levelLoop) console.log(levelLoop.filter(d => levelLoop.indexOf(d) > -1)) let xAnchorCoordPrev = startPrevLevel; let yAnchorLevel = 0; data.forEach(t => { const distToPrevLabel = t.xAnchorCoord - xAnchorCoordPrev; const timesMinDist = Math.floor(distToPrevLabel / minDist); if (timesMinDist === 0) { // too close! // raise Anchor level / lower label coord if minimal distance to prev wasn't respected yAnchorLevel++; t.yLabelCoord += levelLoop[yAnchorLevel % levelLoop.length] * levelStep; } else if(yAnchorLevel > 0) { // let levels decrease otherwise if possible // lower anchor level towards zero yAnchorLevel = Math.max(0, yAnchorLevel - Math.floor(timesMinDist)); } const xOffset = t.xAnchorCoord % gridResolution; const yOffset = xOffset * Math.tan(textAngleRadius); t.yLabelCoord -= yOffset; t.len = Math.abs(t.yAnchorCoord - t.yLabelCoord); //t.span.textContent = levelLoop[yAnchorLevel % levelLoop.length] + " -- "+ t.text xAnchorCoordPrev = t.xAnchorCoord; }) return xAnchorCoordPrev; }33:T50a,addTimelines = (data) => { data.forEach((t, i) => { t.timeline = gsap.gsap.timeline({repeat: 0, yoyo: false}).pause(); const introDur = maxDurLabelAnimation/4 //* Math.random(); const stayDur = maxDurLabelAnimation/4 + Math.random() * maxDurLabelAnimation/4; const outroDur = maxDurLabelAnimation/4; // start fade in ... t.timeline.fromTo( t.el, { y: t.yAnchorCoord, opacity:0 }, { duration: introDur, //ease: "elastic.out(1, 0.5)", ease: "back.out(3)", opacity: 1, y: t.yLabelCoord }, t.start ); t.timeline.fromTo( t.line, { 'stroke-dashoffset': t.len }, { delay: 0, ease: "back.out(3)", duration: introDur / 2, 'stroke-dashoffset': 0 }, t.start ); // start fade out ... t.timeline.to( t.el, { duration: outroDur, opacity: 0, }, t.start + introDur + stayDur / 4 ) t.timeline.to( t.line, { duration: outroDur / 6, //opacity: 0 'stroke-dashoffset': t.len }, t.start + introDur + stayDur ); }); } 34:[{"id":"cba1bdd3899af0e0522b648dff333134a2f3d9a209232a08679491ef51a67f1255c5b88bdd73b34da8c71304c06aff1d368f70f5094658afca5835a50f570107","href":"https://static.observableusercontent.com/files/cba1bdd3899af0e0522b648dff333134a2f3d9a209232a08679491ef51a67f1255c5b88bdd73b34da8c71304c06aff1d368f70f5094658afca5835a50f570107","name":"karte-kmu@7.svg","type":"application/xml","lastModified":1582118726830.356,"size":4828315},{"id":"746f9c17e5a20aa6a8318a1b26c9cf335b3ed5d85573a9745b14cab14b9fae89808ae88d94309f558678012fc0b83b10acea65bf3a561413ded2212bd2305b11","href":"https://static.observableusercontent.com/files/746f9c17e5a20aa6a8318a1b26c9cf335b3ed5d85573a9745b14cab14b9fae89808ae88d94309f558678012fc0b83b10acea65bf3a561413ded2212bd2305b11","name":"karte-kmu@12.svg","type":"image/svg+xml","lastModified":1582652551392.83,"size":105350},{"id":"b178262a4a3369a1aee4daf53483b8210fdf339ed726ad8487e741c09a42013645553774cfd326aecda68b1ae40d71ad22da0b485552be4452e7dcd99539477c","href":"https://static.observableusercontent.com/files/b178262a4a3369a1aee4daf53483b8210fdf339ed726ad8487e741c09a42013645553774cfd326aecda68b1ae40d71ad22da0b485552be4452e7dcd99539477c","name":"karte-leben-6 (2).svg","type":"image/svg+xml","lastModified":1582889984865.342,"size":113553},{"id":"d3eacdfacec4a929c99e9d11124c901d729802d7c8b38b8eeac4df5f09a848e04c29eac4f2f27398f9fe74dfcc0fb418c67e154b91539e145b0a325145ed4c23","href":"https://static.observableusercontent.com/files/d3eacdfacec4a929c99e9d11124c901d729802d7c8b38b8eeac4df5f09a848e04c29eac4f2f27398f9fe74dfcc0fb418c67e154b91539e145b0a325145ed4c23","name":"karte-leben@6.svg","type":"image/svg+xml","lastModified":1582210468219.958,"size":113860},{"id":"637ae34626e2e88003b33a688a4f6bd8787677e996c1c6d4a9d02fdb4b5e4b910136ab6ad58d5a819fb38c6b46271a87f4088864dca8d799095df7293bbfc9f2","href":"https://static.observableusercontent.com/files/637ae34626e2e88003b33a688a4f6bd8787677e996c1c6d4a9d02fdb4b5e4b910136ab6ad58d5a819fb38c6b46271a87f4088864dca8d799095df7293bbfc9f2","name":"karte-kmu@11.svg","type":"image/svg+xml","lastModified":1582209057205.349,"size":105503}] 2e:{"title":"Label Machine","cells":[{"id":0,"value":"md`# Label Machine`","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"gsap = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"mapKMU = await FileAttachment(\"karte-kmu@12.svg\").text();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"mapLeben = await FileAttachment(\"karte-leben-6 (2).svg\").text();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"mapConfig = {\n return {\n Leben: {\n map: mapLeben,\n color: \"#EBBD22\" \n },\n KMU: {\n map: mapKMU,\n color: \"#3952EE\"\n }\n}[ mapType ]}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"sizeConfig = { return {\n mobile: {\n width: 400,\n height: 748,\n squeezeFactor: 0.5,\n numLoops: 2,\n loopDuration: 18\n },\n desktop: {\n width: 1120,\n height: 748,\n squeezeFactor: 0.25,\n numLoops: 1,\n loopDuration: 40\n } \n}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"viewof sizeType = {\n const el = html ``;\n return el;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"viewof mapType = {\n const el = html ``;\n return el;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"chromajs = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"getGray = (i) => chromajs.mix('#d4d6dd', '#05032d', i);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"frameRate = 24","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"width = sizeConfig[sizeType].width","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"height = sizeConfig[sizeType].height","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"squeezeFactor = sizeConfig[sizeType].squeezeFactor;","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"loopDuration = sizeConfig[sizeType].loopDuration\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"overLength = maxDurLabelAnimation / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"totalDuration = loopDuration * sizeConfig[sizeType].numLoops + overLength","pinned":true,"hidden":false,"mode":"ojs"},{"id":1204,"value":"totalFrames = totalDuration * frameRate","pinned":true,"hidden":false,"mode":"ojs"},{"id":1442,"value":"topSpace = height - (sizeConfig[sizeType].squeezeFactor * height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1908,"value":"textAngle = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1999,"value":"fontSize = 14","pinned":true,"hidden":false,"mode":"ojs"},{"id":1084,"value":"mapType","pinned":true,"hidden":false,"mode":"ojs"},{"id":1125,"value":"mapConfig.map","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2026,"value":"{\n const btn = html``\n btn.onclick = () => baseMap.timeline.seek(0);\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2062,"value":"{\n const timesMobile = [0,loopDuration, loopDuration*2, loopDuration*1.4]//, loopDuration * 2];\n const timesDesktop = [0, loopDuration/2, loopDuration];\n const canvasesProm = \n (sizeType === 'mobile' ? timesMobile : timesDesktop)\n .map(d => {\n return svgToCanvas(baseMap.seek(d), 1);\n })\n \n baseMap.seek(0)\n const canvases = await Promise.all(canvasesProm);\n const div = html`

`;\n console.log(canvases)\n canvases.forEach(c => {\n c.style.padding = '2px';\n div.appendChild(c);\n })\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2219,"value":"maxDurLabelAnimation = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"setStartPositions = (data, panFactor = 1) => {\n const { min, medium, max } = getExtents(data, 'yLabelCoord');\n\n data.sort((a,b) => a.ratio - b.ratio);\n const loopDurationFactorized = loopDuration * panFactor\n \n data.forEach((t, i) => {\n \n // set index\n //t.zIndex = (t.yLabelCoord - min) / (max - min); \n \n t.direction = sizeType === \"mobile\" && i % 2 !== 0 ? \"backward\" : \"forward\"\n \n // set start\n if (t.direction === \"backward\"){ // show even labels when returning ...\n t.start = loopDuration + t.inverseRatio * loopDurationFactorized;\n } else {\n t.start = (sizeType === \"mobile\" ? t.ratio : i / data.length) * loopDurationFactorized;\n }\n \n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1746,"value":"addLines = (container, data) => {\n \n data.forEach(d => {\n \n const { span, el, xAnchorCoord, yAnchorCoord, yLabelCoord, len } = d\n \n // use transform styles instead of attributes\n span.removeAttribute('x');\n span.removeAttribute('y'); \n \n // apply font styles \n el.style.transform = `translate(${xAnchorCoord}px, ${yAnchorCoord}px) rotate(-${textAngle}deg)`;\n el.style.fontSize = fontSize + 'px';\n el.style.fontFamily = \"GT America\";\n el.style.fill = \"#05032d\"; \n \n // append line \n const line = svg`\n `;\n\n container.appendChild(line);\n d.line = line; \n \n bringToTop(el);\n bringToTop(line);\n \n })\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1757,"value":"getExtents = (obj, targetProp) => {\n const [max, min] = obj.\n reduce((p,c) => { \n return [Math.max(c[targetProp],p[0]),Math.min(c[targetProp],p[1])] \n },\n [ obj[0][targetProp], obj[0][targetProp] ]\n );\n const medium = (max - min) / 2 + min;\n return { min, medium, max }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"function bringToTop(targetElement){\n // put the element at the bottom of its parent\n let parent = targetElement.parentNode;\n parent.appendChild(targetElement);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"function round(number, increment, offset = 0) {\n return Math.ceil((number - offset) / increment ) * increment + offset;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"getFramesAsCanvases = async (scale = 2) => {\n const canvases = [];\n const numFrames = totalFrames;\n for (let i = 0; i <= numFrames; i++) {\n const s = baseMap.seek(i/frameRate);\n const canvas = await svgToCanvas(s, scale);\n canvases.push(canvas)\n }\n return canvases;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"import { GifCompiler } from '@rkaravia/gifcompiler'","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"function svgToCanvas(svg, scale = 1) {\n return new Promise(resolve => {\n const svgSize = svg.viewBox.baseVal;\n const scaledWidth = width //* scale;\n const scaledHeight = height //* scale;\n const serializer = new XMLSerializer();\n const svgString = serializer.serializeToString(svg);\n const image = new Image();\n image.src = `data:image/svg+xml;base64,${btoa(\n unescape(encodeURIComponent(svgString))\n )}`;\n image.onload = () => {\n const context = DOM.context2d(scaledWidth, scaledHeight, scale);\n context.drawImage(\n image,\n 0,\n 0,\n width, //* scale,\n height// * scale\n );\n resolve(context.canvas);\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"md`\nClick the button below to export individual frames as PNG, then run ffmpeg to convert the PNGs to an MP4:\n~~~\nffmpeg -framerate ${frameRate} -i frame-${mapType}-${sizeType}-%04d.png -c:v libx264 -pix_fmt yuv420p movie-${mapType}-${sizeType}.mp4\n~~~\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"{\n const form = html``;\n form.button.onclick = async event => {\n const prevLabel = event.target.innerText;\n event.target.innerText = \"downloading ...\"\n event.target.disabled = true;\n event.preventDefault();\n /*\n const svgNode = svg``;\n const framesPerSecond = 30;\n const padding = [40, 120];\n for (const frame of getVideoFrames(svgNode, framesPerSecond)) {\n const canvas = await svgToCanvas(svgNode, padding);\n }\n */\n const canvases = await getFramesAsCanvases();\n canvases.forEach(async (canvas, i) => {\n const url = canvas.toDataURL();\n await download(\n url,\n `frame-${mapType}-${sizeType}-${String(i).padStart(4, '0')}.png`\n );\n })\n event.target.innerText = prevLabel\n event.target.disabled = false;\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"async function download(url, name) {\n const a = document.createElement('a');\n a.download = name;\n a.href = url;\n a.style.display = 'none';\n document.body.append(a);\n a.click();\n await Promises.delay(200);\n a.remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"DOM.download(\n async () => {\n const gif = new GifCompiler();\n const canvases = await getFramesAsCanvases();\n canvases.forEach(c => gif.addFrame(c, frameRate / 60 * 1000));\n return gif.render();\n },\n \"labeled-map.gif\",\n \"Render animated GIF\"\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}