31:[] 2f:{"title":"📑 Exploration of Colorized Objects","cells":[{"id":0,"value":"md`# 📑 Exploration of Colorized Objects`","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## 🤖 Markdown Cells & HTML Elements`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Graphics & Text Examples: \n\n* ${colorized_text('color interpolation')} - a text row;\n\n* ${highlighted_text('highlight interpolation')} - another text row;\n\n* ${canvas_text('color gradient')} - a canvas text;\n\n* ${animated_line(sample_data)} - a chart inline;\n\n* ${animated_line(make_data(60))} - an animated chart inline;\n\n* ${canvas_circle(4,8)} - canvas drawing.\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"function make_data(n) {\n return d3.range(n).map(i=>Math.sin(i)*Math.random())}","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"sample_data=make_data(60)","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"function highlighted_text(string) {\n const t=html`\n \n ${string}`;\n t.style.background=d3.interpolateSinebow(now/3000);\n return t;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"function colorized_text(string) {\n const t=html`${string}`;\n t.style.color=d3.interpolateSinebow(now/3000);\n return t;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"function canvas_text(string,width=170,height=50) {\n const context=DOM.context2d(width,height);\n context.font='24px Verdana';\n const gradient=context.createLinearGradient(0,0,width,0);\n gradient.addColorStop('0','#3636ff');\n gradient.addColorStop('.5','#ff36ff');\n gradient.addColorStop('1.','#ff3636');\n context.strokeStyle=gradient;\n context.strokeText(string,0,30);\n return context.canvas;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"function canvas_circle(r,k) {\n const context=DOM.context2d(2*r*k,2*r*k);\n for (let radius=r; radiusx(i)).y(y).context(context);\n context.strokeStyle=d3.interpolateSinebow(now/6000);\n context.beginPath(),line(values),context.stroke(); \n return context.canvas;}","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"html`\n🦅\n 🎡\n 🦅
\n🎡\n 🎡\n 🎡
\n🎠\n 🎡\n🎠`","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`## 🤖 SVG Elements`","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"randl={while (true) {\n yield d3.shuffle([...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].slice())\n .slice(Math.floor(Math.random()*10)+1)\n .sort(d3.ascending);\n await Promises.delay(3000);};}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"letter_chart={\n const svg=d3.create('svg').attr('viewBox',[0,0,600,60])\n .attr('font-family','Verdana').attr('font-size',10)\n .style('display','block');\n let text=svg.selectAll('text');\n return Object.assign(svg.node(),{\n update(letters) {\n text=text.data(letters).join('text').text(d=>d)\n .attr('x',(d,i)=>i*20).attr('y',30)\n .style('fill',d3.interpolateTurbo(\n letters.length/32))}});}","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"letter_chart.update(randl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"d3.create('svg').attr('width',256).attr('height',256)\n .call(svg=>svg.selectAll('circle')\n .data(d3.range(128,0,-8)).join('circle')\n .attr('transform','translate(128,128)')\n .attr('fill',d3.scaleSequential(\n d3.interpolateTurbo).domain([0,128+n]))\n .attr('r',d=>d))\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"n=Math.abs(120-4*Math.floor((now%(1000*60))/1000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3=require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}