2d:null 2e:["$","title",null,{"children":"The Mark | Justin Palmer | Observable"}] 33:T8e9,{ replay; const svg = d3 .create("svg") .attr('width', 500) .attr('height', 500) .style('border', '1px solid #eee'); const offset = width / 2 - size / 2; const group = svg .append('g') .attr('transform', `translate(${offset}, ${offset})`); yield svg.node(); const shapes = group.append('g'); const top = shapes .append('g') .attr('transform', `translate(-${size / 2}, 0)`); const bot = shapes.append('g').attr('transform', `translate(${size / 2},0)`); const tpath = top .append('path') .attr('d', line(data)) .attr('stroke', 'none') .attr('fill', colors[random()]); const bpath = bot .append('path') .attr('d', line2(data)) .attr('stroke', 'none') .attr('fill', colors[random()]); while (true) { yield svg.node(); await tpath .transition() .duration(500) .delay(1500) .attr("fill", colors[random()]) .end(); await bpath .transition() .duration(500) .delay(500) .attr("fill", colors[random()]) .end(); top .transition() .duration(1000) .ease(d3.easeExpOut) .attr('transform', `translate(0, 0)`); await bot .transition() .duration(1000) .ease(d3.easeExpOut) .attr('transform', `translate(0, 0)`) .end(); top .transition() .duration(4000) .ease(d3.easeExpOut) .attr('transform', `skewY(${skew})`); await bot .transition() .duration(4000) .ease(d3.easeExpOut) .attr('transform', `skewY(${skew})`) .end(); await bot .transition() .delay(2000) .end(); top .transition() .duration(1000) .ease(d3.easeCubicOut) .attr('transform', `skewY(0)`); await bot .transition() .duration(1000) .ease(d3.easeCubicOut) .attr('transform', `skewY(0)`) .end(); top .transition() .duration(1000) .ease(d3.easeCubicOut) .attr('transform', `translate(-${size / 2}, 0)`); await bot .transition() .duration(1000) .ease(d3.easeCubicOut) .attr('transform', `translate(${size / 2}, 0)`) .end(); await bot .transition() .delay(1000) .end(); } }34:T4a0,interpolators = { const Interpolators = { Cyclical: ['interpolateRainbow', 'interpolateSinebow'], Diverging: [ 'interpolateSpectral', 'interpolateBrBG', 'interpolatePRGn', 'interpolatePiYG', 'interpolatePuOr', 'interpolateRdBu', 'interpolateRdGy', 'interpolateRdYlBu', 'interpolateRdYlGn' ], 'Multi-Hue Sequential': [ 'interpolateTurbo', 'interpolateViridis', 'interpolateWarm', 'interpolateCividis', 'interpolateCool', 'interpolateCubehelixDefault', 'interpolateInferno', 'interpolateMagma', 'interpolatePlasma', 'interpolateBuGn', 'interpolateBuPu', 'interpolateGnBu', 'interpolateOrRd', 'interpolatePuBu', 'interpolatePuBuGn', 'interpolatePuRd', 'interpolateRdPu', 'interpolateYlGn', 'interpolateYlGnBu', 'interpolateYlOrBr', 'interpolateYlOrRd' ], 'Single-Hue Sequential': [ 'interpolateBlues', 'interpolatePurples', 'interpolateGreens', 'interpolateGreys', 'interpolateOranges', 'interpolateReds' ] }; return Interpolators; }35:T8a6,logo = { const ref = DOM.uid('logo'); return svg``; }36:[] 31:{"id":"c33656d26812e847","slug":"the-mark","title":"The Mark","thumbnail":"6c090ab296243380b345133e590a005806448a5ebc0d9f95481fd8415c5482d4","access_level":"public","create_time":"$D2020-04-09T03:44:31.606Z","update_time":"$D2020-04-10T00:19:44.800Z","view_time":null,"first_public_time":"$D2020-04-09T07:19:03.084Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f49e674e15feb629","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":"starter_2024"},"version":687,"publish_version":687,"role":null,"authored":false,"authors":[{"type":"individual","id":"da33a7527f24ea8c","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":null}],"members":[{"type":"individual","id":"da33a7527f24ea8c","login":"caged","name":"Justin Palmer","avatar_url":"https://avatars-next.observableusercontent.com/00a1076c4b3264a0ab009cf3700ecb5dabf1fc0ee15bd6cdb595fff8ba543dd4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"The Mark","cells":[{"id":0,"value":"md`# The Mark`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"viewof skew = slider({\n min: -25,\n max: 25,\n step: 1,\n value: -15,\n title: \"Skew\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"viewof curve = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"viewof interpolator = {\n const select = document.createElement('select');\n const el = d3.select(select);\n const groups = el\n .selectAll('optgroup')\n .data(Object.keys(interpolators))\n .join('optgroup')\n .attr('label', k => k);\n\n groups\n .selectAll('option')\n .data(k => interpolators[k])\n .join('option')\n .text(d => d);\n\n let interpolator = null;\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof replay = html`