3f:null 40:["$","title",null,{"children":"Split-flap display | James Harvey | Observable"}] 46:T1273,function splitFlapFactory() { var w = 100, h = 200, r = 5, margin = 3, clipIds = {}, xSc = 1; function scaleLetters() { var test = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', svgTemp = d3.select('body').append('svg'), textTemp = svgTemp.append('text'), xMax = -10000, yMax = -10000; textTemp.classed('sf-letter', true).style('font-size', h); console.log("scaleLetters: determining scale factor for width %d, height %d", w, h); d3.range(test.length).forEach(function(i) { var l = test[i], bb; textTemp.text(l); bb = textTemp.node().getBBox(); if (-bb.x > xMax) { xMax = -bb.x; //console.log(' - new xMin for %s (%d)', l, xMin); }; if (-bb.y > yMax) { yMax = bb.y; //console.log(' - new yMin for %s (%d)', l, yMin); }; if (bb.x+bb.width > xMax) { xMax = bb.x+bb.width; //console.log(' - new xMax for %s (%d)', l, xMax); }; if (bb.y+bb.height > yMax) { yMax = bb.y+bb.height; //console.log(' - new yMax for %s (%d)', l, yMax); }; }); console.log("scaleLetters: max letter (at size %d): %d <= x <= %d, %d <= y <= %d", h, -xMax, xMax, -yMax, yMax); // NB the yMin/yMax is an over-estimate of the true bounding box (it's based on font metrics, not our actual // glyphs here): if we include lots of accented characters we might need to take it into account. svgTemp.remove(); xSc = ((w/2)-margin) / xMax; } function draw(d) { var halvesD = []; if (d.perc > 0) { halvesD.push({ letter: d.letters[1], perc: 1, clip: 'top'}); } if (d.perc < 0.5) { halvesD.push({ letter: d.letters[0], perc: 2*(0.5 - d.perc), clip: 'top'}); } if (d.perc < 1) { halvesD.push({ letter: d.letters[0], perc: 1, clip: 'bottom'}); } if (d.perc > 0.5) { halvesD.push({ letter: d.letters[1], perc: 2*(d.perc-0.5), clip: 'bottom'}); } var g = d3.select(this).selectAll('.sf-letter-group').data([d]), gEnter = g.enter().append('g').classed('sf-letter-group', true); g.exit().remove(); gEnter.append('g').classed('sf-letter-halves', true); gEnter.append('line').classed('sf-letter-split', true); g = gEnter.merge(g); //console.log("data %o -> halves %o", d, halvesD); var halves = g.select('.sf-letter-halves').selectAll('.sf-letter-half').data(halvesD), halvesEnter = halves.enter().append('g').classed('sf-letter-half', true); halvesEnter.append('rect').classed('sf-letter-back', true); halvesEnter.append('text').classed('sf-letter', true); halves.exit().remove(); halves = halvesEnter.merge(halves); halves .attr('transform', half => 'translate(0,'+((h-h*half.perc)/2)+'),scale(1 '+(half.perc)+')') .attr('clip-path', half => 'url(#'+clipIds[half.clip]+')'); halves.select('.sf-letter-back') .attr('x', 0) .attr('y', 0) .attr('width', w) .attr('height', h) .attr('rx', r) .attr('ry', r) /*.style('fill', function(half) { if (half.clip == 'top') { return half.letter == d.letters[0] ? 'blue' : 'lightblue'; } return half.letter == d.letters[0] ? 'green' : 'lightgreen'; })*/; halves.select('.sf-letter') //.attr('x', w/2) //.attr('y', h/2) .style('font-size', h) .text(half => half.letter) .attr('transform', 'translate('+(w/2)+','+(h/2)+'),scale('+xSc+' 1)'); g.select('.sf-letter-split') .attr('x1', 0) .attr('y1', h/2) .attr('x2', w) .attr('y2', h/2); } draw.setupClip = function(defs) { clipIds = { top: 'sfTopClip.'+w+'.'+h, bottom: 'sfBottomClip.'+w+'.'+h }; defs.append('clipPath').classed('sf-top-clip', true) .attr('id', clipIds.top) .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', w) .attr('height', h/2).append('rect'); defs.append('clipPath').classed('sf-bottom-clip', true) .attr('id', clipIds.bottom) .append('rect') .attr('x', 0) .attr('y', h/2) .attr('width', w) .attr('height', h/2) } draw.width = function(_) { if (!arguments.length) { return w; } w = _; scaleLetters(); return draw; } draw.height = function(_) { if (!arguments.length) { return h; } h = _; scaleLetters(); return draw; } draw.radius = function(_) { if (!arguments.length) { return r; } r = _; return draw; } draw.margin = function(_) { if (!arguments.length) { return margin; } margin = _; scaleLetters(); return draw; } scaleLetters(); return draw; }47:T102e,function splitFlapDisplay() { var w = 70, h = 90, margin = 7, cols = 5, rows = 2, flapTime = 100, text = [], letters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?:'; var data = [], factory = splitFlapFactory().width(w).height(h), sweeping = false; function updateLetters() { // call when text changes data.forEach(function(d) { if (d.row < text.length && d.col < text[d.row].length) { // ensure our flap is within our text (spaces if not) d.target = text[d.row][d.col]; if (letters.indexOf(d.target) == -1) { d.target = '?'; } } else { d.target = ' '; } }); } function updatePositions() { // call when flap dimensions change data.forEach(function(d) { d.x = margin + d.col*(w+margin); d.y = margin + d.row*(h+margin); }); factory.margin(margin); } function updateSize() { // call when rows/cols change data = d3.range(cols * rows).map(function(i) { return { col: i % cols, row: Math.floor(i / cols), x: 0, y: 0, current: ' ', target: ' ' }; }); updatePositions(); updateLetters(); } updateSize(); function nextLetter(l) { var li = letters.indexOf(l); if (li == -1) { return l; } return li < letters.length-1 ? letters[li+1] : letters[0]; } function sweep(g) { var gSweep = g.filter(d => d.current != d.target), nSweep = gSweep.size(), nDone = 0; console.log("sweep: %d letters need flipping.", nSweep); if (nSweep == 0) { sweeping = false; return; } sweeping = true; gSweep.transition().duration(flapTime) .tween('flap', function(d) { var node = this; return function(t) { d.flapState = { perc: t, letters: [ d.current, nextLetter(d.current) ] }; factory.bind(node)(d.flapState); } }) .on('interrupt', function(d) { //console.log("transition interrupted unexpectedly: %o", d); }) .on('end', function(d) { d.current = nextLetter(d.current); if (d.current == d.target) { d.flapState = { perc: 0, letters: [ d.current, d.current ] }; factory.bind(this)(d.flapState); //console.log("...finished flipping %o", d); } nDone += 1; if (nDone == nSweep) { console.log("...all sweep transitions done."); sweep(g); } }); } function draw() { //console.log('draw -- data: %o', data); var g = d3.select(this).selectAll('.sf-position').data(data), gEnter = g.enter().append('g').classed('sf-position', true); g.exit().remove(); gEnter.each(function(d) { d.flapState = { perc: 0, letters: [ d.current, d.current ] }; factory.bind(this)(d.flapState); }); g = gEnter.merge(g); g.attr('transform', d => 'translate('+d.x+','+d.y+')'); //if (!sweeping) { sweep(g); } sweep(g); } draw.setupClip = function(defs) { factory.setupClip(defs); } draw.width = function(_) { if (!arguments.length) { return w; } w = _; updatePositions(); factory.width(w); return draw; } draw.height = function(_) { if (!arguments.length) { return h; } h = _; updatePositions(); factory.height(h); return draw; } draw.size = function() { var ww = margin + (cols*(margin+w)); var hh = margin + (rows*(margin+h)); return [ ww, hh ]; } draw.margin = function(_) { if (!arguments.length) { return margin; } margin = _; updatePositions(); return draw; } draw.cols = function(_) { if (!arguments.length) { return cols; } cols = _; updateSize(); return draw; } draw.rows = function(_) { if (!arguments.length) { return rows; } rows = _; updateSize(); return draw; } draw.text = function(_) { if (!arguments.length) { return text; } text = _; updateLetters(); return draw; } draw.letters = function(_) { if (!arguments.length) { return letters; } letters = _; updateLetters(); return draw; } return draw; }48:[] 44:{"id":"0e01f5189e00ff46","slug":"split-flap-display","title":"Split-flap display","thumbnail":"5e1e016ca28ddd4355e76a546db2cf05247747d8c9c9c71cf6cd9a345d601ff1","access_level":"public","create_time":"$D2018-07-06T10:15:14.376Z","update_time":"$D2018-07-11T08:49:53.310Z","view_time":null,"first_public_time":"$D2018-07-10T15:35:02.620Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7381ef709c9094a3","login":"jharvey-kaiasm","name":"James Harvey","avatar_url":"https://avatars-next.observableusercontent.com/5be13d5b7366868a0a4a96b5eeb13c8287466c3645344def02ec8282d5f546cd","tier":"starter_2024","bio":"","following":false},"version":195,"publish_version":195,"role":null,"authored":false,"authors":[{"type":"individual","id":"d62902c4a0d027c3","login":"jharvey-kaiasm","name":"James Harvey","avatar_url":"https://avatars-next.observableusercontent.com/5be13d5b7366868a0a4a96b5eeb13c8287466c3645344def02ec8282d5f546cd","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d62902c4a0d027c3","login":"jharvey-kaiasm","name":"James Harvey","avatar_url":"https://avatars-next.observableusercontent.com/5be13d5b7366868a0a4a96b5eeb13c8287466c3645344def02ec8282d5f546cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Split-flap display","cells":[{"id":0,"value":"md`# Split-flap display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function test(letters) {\n var w = 70, h = 90, margin = 7;\n \n console.log(\"letters: %o\", letters);\n \n const svg = DOM.svg(letters.length * (w + margin) + margin, h);\n \n var factory = splitFlapFactory()\n .width(w)\n .height(h);\n \n factory.setupClip(d3.select(svg).append('defs'));\n \n d3.select(svg)\n .selectAll('g')\n .data(letters)\n .enter().append('g')\n .attr('transform', (d,i) => 'translate('+(margin+i*(w+margin))+',0)')\n .each(factory);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"test(d3.range(11).map(function(i) { return { letters: ['A','B'], perc: 0.1*i }; }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"{\n var display = splitFlapDisplay(), sz = display.size();\n \n const svg = DOM.svg(sz[0], sz[1]);\n \n display.setupClip(d3.select(svg).append('defs'));\n \n display.bind(svg)();\n \n display.text(['HELLO', 'WORLD']);\n display.bind(svg)();\n \n d3.timeout(function() {\n display.text(['HEELS', 'DOWN']);\n display.bind(svg)();\n }, 5000);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"