3e:null 3f:["$","title",null,{"children":"1. La Imagen Digital | Julian Benavides's Workspace | Observable"}] 45:T911, 46:T74d, 47:T4ad,html``48:T43f,svg = { const svg = DOM.svg( side * 6 + gutter * 5 + strokeWidth * 2, side * 2 + strokeWidth * 2 ); const outer = d3 .select(svg) .style("max-width", "300px") .style("height", "auto") .append("g") .attr("class", "outer") .attr("transform", `translate(${strokeWidth} ${strokeWidth})`) .attr("fill","none") .attr("stroke","black") .attr("stroke-width", `${strokeWidth}px`) .attr("stroke-linecap", "square") // fill: none; // stroke: #444; // stroke-width: ${strokeWidth}px; // stroke-linecap: square; // Group for each digit outer .selectAll(".digit") .data(d3.range(6)) .join("g") .attr("class", "digit") .attr("transform", i => `translate(${i * side + gutter * i})`); // Colons between hours/minutes/seconds outer .selectAll("path") .data([2, 4]) .join("path") .attr("d", `M0,-${side / 2}V${side / 2}`) .attr("stroke-dasharray", `1,${side - 2},1,0`) .attr( "transform", d => `translate(${side * d + gutter * (d - 0.5)} ${side})` ); return svg; }49:Tbd3,function grid (config) { // defaults config = Object.assign({size:20, numStates:2, margin:2, outline:'#000'}, config); let {nx, ny, size, numStates, init, margin, colorArray, outline} = config; // validate init: this is horrible... if (init !== undefined) { if (init.some(d => d.length !== init[0].length) || init.some(d => d.some(v => v<0 || v >= numStates || v != Math.round(v)))) throw new Error(`init should be undefined or a rectangular matrix with integer entries between 0 and ${numStates-1}`); if (nx === undefined && ny !== undefined) { if (ny === init.length) nx = init[0].length; else throw new Error(`init length:${init.length} not equal to ny:${ny}`); } else if (ny === undefined && nx !== undefined) { if (nx === init[0].length) ny = init.length; else throw new Error(`init inner length:${init[0].length} not equal to nx:${nx}`); } else if (nx === undefined && ny === undefined) { ny = init.length; nx = init[0].length; } } else { if (nx === undefined && ny !== undefined) nx = ny; else if (ny === undefined && nx !== undefined) ny = nx; else if (nx === undefined && ny === undefined) ny = nx = 5; } if (colorArray === undefined) colorArray = Array.from({length:numStates}, (d,i) => i === 0 ? '#FFF' : (i === 1 ? '#000' : d3.schemeSet3[(i-2) % 12])); // Array of values, start out all 0 if init not defined const state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); const svg = d3.select(DOM.svg(nx*(size+2*margin), ny*(size+2*margin))); const el = svg.node(); const rectData = []; for (let y=0; y d.x*(size + 2*margin) + margin) .attr("y", d => d.y*(size + 2*margin) + margin) .attr("fill", d => colorArray[state[d.y][d.x]]) .attr("stroke", outline) .attr("width", size) .attr("height", size); function gridClick({x,y}) { state[y][x] = (state[y][x] + 1) % numStates; this.style.fill = colorArray[state[y][x]]; el.dispatchEvent(new CustomEvent('input')); } el.addEventListener('inputArray', ({detail}) => { if (detail !== null && detail !== undefined) { if (detail.length === ny && detail.every(d => d.length === nx && d.every(v => v < numStates && v >= 0 && v === Math.round(v)))) { state = detail; } else return console.log(`failed inputArray event: ${detail}`); } else { state = init ? init.map(d => d.slice()) : Array.from({length:ny}, d => Array(nx).fill(0)); } el.value = state; grid.attr("fill", d => colorArray[state[d.y][d.x]]); el.dispatchEvent(new CustomEvent('input')); }); el.value = state; return el; }4a:T7ba,class VectorSpaceClass { svg; constructor(svg) { this.svg = svg; } draw(vectors, { width, height }) { // Definimos las dimensiones del SVG var padding = 50; // Creamos el SVG y lo añadimos al body var svg = d3.select(this.svg).attr("width", width).attr("height", height); var root = svg.selectAll(".root").data([null]); const rootEnter = root.enter().append("g").attr("class", "root"); rootEnter.append("g").attr("class", "x-axis"); rootEnter.append("g").attr("class", "y-axis"); root = root.merge(rootEnter); // Creamos los ejes de coordenadas var xScale = d3 .scaleLinear() .domain([-3, 3]) .range([padding, width - padding]); var yScale = d3 .scaleLinear() .domain([-3, 3]) .range([height - padding, padding]); var xAxis = d3.axisBottom(xScale); var yAxis = d3.axisLeft(yScale); root .select(".x-axis") .attr("transform", "translate(0," + (height - padding) + ")") .call(xAxis); root .select(".y-axis") .attr("transform", "translate(" + padding + ",0)") .call(yAxis); // Añadimos una línea para representar el primer vector var vectorsUpdate = root.selectAll(".vector").data(vectors); const vectorsEnter = vectorsUpdate .enter() .append("g") .attr("class", "vector"); vectorsEnter.append("line"); vectorsEnter.append("text"); vectorsUpdate = vectorsUpdate.merge(vectorsEnter); vectorsUpdate .select("line") .attr("stroke", "blue") .attr("x1", xScale(0)) .attr("y1", yScale(0)) .attr("x2", (v) => xScale(v.x)) .attr("y2", (v) => yScale(v.y)); // Añadimos un texto para mostrar los valores de los vectores vectorsUpdate .select("text") .attr("fill", "blue") .transition() .attr("x", (v) => xScale(v.x) + 5) .attr("y", (v) => yScale(v.y) - 5) .text((v) => "(" + v.x + ", " + v.y + ")"); } }4b:[] 43:{"id":"f3b3552ec0ce1da9","slug":null,"title":"1. La Imagen Digital","thumbnail":"401a2e38367cdaf3e072a004cf49d371e967be6da12815591c621dc5732f7f51","access_level":"public","create_time":"$D2023-11-08T02:42:41.968Z","update_time":"$D2024-03-01T13:40:11.191Z","view_time":null,"first_public_time":"$D2023-11-08T02:42:41.968Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3e20a11091477831","login":"julian-benavides-ws","name":"Julian Benavides's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/144636c827554b28643bb0d978da95a932737fbb694150d1f9fcd803e22c37d9","tier":"starter_2024","bio":"","following":false},"version":414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0343136a9a2d0670","login":"julian-benavides","name":"Julian Benavides","avatar_url":"https://avatars-next.observableusercontent.com/40d267ada87700bbc1fef110933632ec672ceacbf715b1e67501df750771e0d9","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0343136a9a2d0670","login":"julian-benavides","name":"Julian Benavides","avatar_url":"https://avatars-next.observableusercontent.com/40d267ada87700bbc1fef110933632ec672ceacbf715b1e67501df750771e0d9","tier":null,"role":"editor"},{"type":"team","id":"3e20a11091477831","login":"julian-benavides-ws","name":"Julian Benavides's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/144636c827554b28643bb0d978da95a932737fbb694150d1f9fcd803e22c37d9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"1. La Imagen Digital","cells":[{"id":0,"value":"\n1. La Imagen Digital\n=============================\n\n\nPara hablar de la imagen digital deberíamos delimitar lo que se quiere decir por \"imagen\". Si bien podríamos encontrar muchas definiciones, para este caso vamos a decir que la imagen es una representación de algo a través de luz o más específicamente de color ***(que también definiremos más adelante)***. Este representación puede ser de un algo que entendemos como bi-dimensional (como una pintura o una fotografía) o tridimensional (como una escultura, un tallado o cualquiera de los objetos que nos rodean en nuestro día a día). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"La luz que rebota sobre estos objetos llega hasta nuestros ojos y estimula unas células especializadas en la parte posterior del globo ocular. Podríamos decir que las luz pinta las imágenes sobre una superficie detrás de nuestros ojos. Así que podríamos decir que al final todas las imágenes son bidimensionales, ya sea que representen objetos planos o volumétricos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"$45","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"Con la imagen digital pasa algo parecido. Independiente de lo que se este representando, sea de carácter bi o tridimensional, esta se produce como una representación que se proyectara sobre una espacio bidimensional.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"$46","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## 1.1 Puntillismo en la pantalla\n\nAdemás de lo anterior, la particularidad más obvia pero también importante de estas imágenes es que se producen en el contexto de lo digital ***(que aunque se podría entender también como computacional no es necesariamente lo mismo)***. En el mundo de lo digital la información o los elementos que se quieren representar se codifican a través de cosas que podemos enumerar, que no son continuas ***(entidades discretas y finitas)*** que a su vez pueden ser codificados por unas entidades más simple, que en el caso la información binaria podemos entender como estados ***(ceros-unos, arribas-abajos, prendidos-apagados)***.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"Para el caso de la imagen digital estos elementos discretos son los famosos pixeles ***(picture element)***. Podemos pensarlos como pequeños puntos rectangulares (en la mayoría de los casos cuadrados) que expresan un color en particular. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"Aunque existen dos formas de construir las imágenes digitales ***(raster y vectores)***, de las cuales ya hablaremos en detalle a continuación, todas las imágenes terminan representando en la pantalla una seria de pixeles distribuidos en una retícula rectangular que tiene columnas y filas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"Por el avance de la tecnología las pantallas cada vez logran miniaturizar más estos pixeles haciéndolos casi indistinguibles a simple vista por el ojo humano. Sin embargo si pudiéramos ver en detalle con una lupa o microscopio una pantalla veríamos que esta hecha de puntos pequeños.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"## 1.2 Dos forma de entender el mundo\n\nCuando pensamos sobre algunas cosas del mundo que nos rodea podemos ver que cuando las nombramos podemos entender algo particular de su naturaleza que se refiere a como las contamos o cuantificamos. Por ejemplo, si queremos hablar de agua en un vaso no parece natural hablar de \"el número de aguas que hay en el vaso\". Para hablar de cuanta tenemos usamos unidades de medida que nos permiten identificar un volumen especifico y no una cantidad elementos repetidos o partes que hay en el vaso. Podríamos decir que el agua es **continua**. Sin embargo cuando hablamos de manzanas nos parece normal referirnos a ellas por **cantidades finitas y discretas** (términos que ya usamos anteriormente), es decir que podemos contar la cantidad de manzanas en una caja sin necesidad de hacer referencia a una unidad de medida. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"Tal vez el ejemplo más útil y muy común para entender lo anterior es el de los relojes análogos y digitales. Mientras que en los análogos una serie de engranajes se relacionan para girar las manecillas sobre los indicadores de las horas de forma **continua**, en los relojes digitales vemos como los números van cambiando en **saltos** de uno en uno.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"Aunque los ejemplos anteriores parezcan alejarse del tema se relacionan directamente con los dos modelos que usamos para construir las imágenes digitales e incluso algunas otras representaciones como los modelos tridimensionales.\n\nEstos tipos de construcciones son la imagen rasterizada y la vectorial.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"### 1.2.1 La imagen rasterizada: Dibujar con baldosas de un solo color\n\nLa imagen rasterizada es la forma más común que tenemos para construir la imagen digital porque guarda una relación directa con la forma en la que se codifican y se representan las imagen en las pantallas como lo describimos anteriormente. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"viewof ancho_pixels = Inputs.range([0, 80], {label: \"ancho pixeles\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"viewof alto_pixels = Inputs.range([0, 80], {label: \"alto pixeles\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"viewof color_pixels = Inputs.range([0, 4], {label: \"color\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof test = grid({numStates:color_pixels,nx:ancho_pixels,ny:alto_pixels})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// pt(test)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"### 1.2.3 La imagen vectorial: Ecuaciones en función del arte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":394,"value":"viewof x_position = Inputs.range([0, 3], {label: \"posición X\", step: 0.1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof y_position = Inputs.range([0, 3], {label: \"posición Y\", step: 0.1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"{\n const width = 500;\n const height = 500;\n const svg = d3.create(\"svg\");\n const vectorSpace = new VectorSpaceClass(svg.node());\n vectorSpace.draw([{ x: x_position, y: y_position }], { width, height });\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"viewof radio_poligono = Inputs.range([0, 200], {label: \"Radio Polígono\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"viewof caras_poligono = Inputs.range([0, 20], {label: \"Caras Polígono\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":" spiral = {\n const ancho = 800;\n const alto = 500;\n const miLienzo = d3.create(\"svg\").attr(\"width\", ancho).attr(\"height\", alto);\n\n const misPuntosEstrella = [];\n const generadorPaths = d3.line();\n \n \n poligonos(caras_poligono,radio_poligono,(ancho/4),(alto/2), 0)\n\n return miLienzo.node();\n\n ///FUNCIONES\n function poligonos (numeroLados, radio, tx, ty, hue) {\n for (let i = 0; i < (numeroLados * 2) ; i++) {\n const anguloPunto = i * ((2*Math.PI) / numeroLados)/2 ;\n const x = (Math.cos(anguloPunto) * (i % 2 === 0 ? radio : radio/2));\n const y = (Math.sin(anguloPunto) * (i % 2 === 0 ? radio : radio/2));\n misPuntosEstrella[i] = [x, y]; \n }\n \n miLienzo.append(\"path\")\n .attr(\"d\", generadorPaths(misPuntosEstrella) + \"z\")\n .attr(\"stroke\", `hsl(${hue},100%,50%)`)\n .attr(\"stroke-width\", \"5\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"fill\", \"white\")\n .attr(\"transform\",`translate(${(tx)},${(ty)})`)\n \n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"{\n const date = new Date();\n\n const digits = d3\n .select(svg)\n .selectAll(\".digit\")\n .data(dateToDigits(date))\n .each(function(d) {\n renderDigit(d3.select(this), d);\n });\n\n while (true) {\n date.setSeconds(date.getSeconds() + 1);\n const values = dateToDigits(date);\n const p = [];\n digits.each(function(d, i) {\n p.push(tick(d3.select(this), d, values[i]));\n });\n digits.data(values);\n yield Promise.all(p).then(() => values);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"digitPoints = ({\n A: [0, 0],\n B: [1, 0],\n C: [0, 1],\n D: [1, 1],\n E: [0, 2],\n F: [1, 2]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"segmentStrings = [\n [[\"CABDFEC\", \"caBDFec\"]], // 0 -> 1\n [[\"DBa\", \"DBA\"], [\"DFecd\", \"dFECD\"]], // 1 -> 2\n [[\"ABDC\", \"ABDC\"], [\"CEFd\", \"cEFD\"]], // 2 -> 3\n [[\"ABDCa\", \"aBDCA\"], [\"EFD\", \"eFD\"]], // 3 -> 4\n [[\"BDCAb\", \"bDCAB\"], [\"DFe\", \"DFE\"]], // 4 -> 5\n [[\"BACDFEc\", \"BACDFEC\"]], // 5 -> 6\n [[\"BA\", \"BA\"], [\"ACDb\", \"acDB\"], [\"CEFD\", \"ceFD\"]], // 6 -> 7\n [[\"DBAcd\", \"DBACD\"], [\"DFecd\", \"DFECD\"]], // 7 -> 8\n [[\"DCABDFEC\", \"DCABDFEc\"]], // 8 -> 9\n [[\"DCABDFEc\", \"dCABDFEC\"]] // 9 -> 0\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"transitions = {\n // Produce a 2-D array of numbers\n // transitions[x][y] = digit interpolator from x to y\n const transitions = segmentStrings.map((d, i) => {\n const arr = [];\n arr[(i + 1) % 10] = d;\n return arr;\n });\n\n // Special cases for clocks\n transitions[5][0] = [[\"DCABd\", \"dCABD\"], [\"DFEc\", \"DFEC\"]];\n transitions[1][0] = transitions[0][1].map(line => line.slice(0).reverse());\n transitions[2][1] = transitions[1][2].map(line => line.slice(0).reverse());\n\n return transitions.map(arr =>\n arr.map(segments => segments && segments.map(interpolate))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"function tick(sel, fromDigit, toDigit) {\n sel.call(renderDigit, fromDigit, toDigit);\n // Instant update\n if (fromDigit === toDigit || toDigit === undefined) {\n return Promise.resolve(true);\n }\n // Transition\n return sel\n .selectAll(\".segment\")\n .transition()\n .ease(d3.easeLinear)\n .delay(750)\n .duration(250)\n .attrTween(\"stroke-dasharray\", d => d.interpolator)\n .end();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"// Render a digit\nfunction renderDigit(sel, fromDigit, toDigit) {\n if (fromDigit === toDigit || toDigit === undefined) {\n toDigit = (fromDigit + 1) % 10;\n }\n\n sel\n .selectAll(\".segment\")\n .data(transitions[fromDigit][toDigit])\n .join(\"path\")\n .attr(\"class\", \"segment\")\n .attr(\"d\", d => d.path)\n .attr(\"stroke-dasharray\", d => d.dashes[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"// The width of each digit\nside = 96","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// Space between digits\ngutter = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"strokeWidth = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"halfWidth = strokeWidth / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"function dateToDigits(date) {\n let hours = date.getHours(),\n minutes = date.getMinutes(),\n seconds = date.getSeconds();\n\n if (hours > 12) {\n hours = hours % 12;\n }\n return [\n Math.floor(hours / 10),\n hours % 10,\n Math.floor(minutes / 10),\n minutes % 10,\n Math.floor(seconds / 10),\n seconds % 10\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"// Turn a pair of from/to strings and turn it into a path string, a beginning/ending stroke dasharray, and an interpolator function.\nfunction interpolate(pair) {\n const path = stringToPath(pair[0]);\n\n const dashes = pair.map(sequence => {\n let leading = sequence.match(/^[a-z]+/),\n trailing = sequence.match(/[a-z]+$/);\n leading = leading ? leading[0].length : 0;\n trailing = trailing ? trailing[0].length : 0;\n\n // Pad the length by the stroke width to fix the line capping\n const len =\n (sequence.length - leading - trailing - 1) * side + halfWidth * 2;\n\n return [0, leading * side, len, trailing * side].join(\",\");\n });\n\n return {\n path,\n dashes,\n interpolator: d3.interpolateString(...dashes)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"// Turn a string in the form \\`ABCDEF\\` and convert it to an actual SVG path\nfunction stringToPath(str) {\n const coords = str\n .toUpperCase()\n .split(\"\")\n .map(char => digitPoints[char].map(d => d * side));\n\n // Adjust the length by half the stroke-width to fix the line capping\n if (coords[0][0] === coords[1][0]) {\n coords[0][1] += halfWidth * (coords[1][1] - coords[0][1] > 0 ? -1 : 1);\n } else {\n coords[0][0] += halfWidth * (coords[1][0] - coords[0][0] > 0 ? -1 : 1);\n }\n\n return d3.line()(coords);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"import {pt} from \"43b57dd558b3d1ee\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"