2d:null 2e:["$","title",null,{"children":"📑 Exploration of Colorized Objects | Olga Belitskaya | Observable"}] 33:[] 31:{"id":"3e5339e009ef4271","slug":"exploration-of-colorized-objects","title":"📑 Exploration of Colorized Objects","thumbnail":"542612a0bf3da51b2baa5dd9b5ea1fba3927449d24519acac86ad3dfa6a67a83","access_level":"public","create_time":"$D2020-11-29T19:07:39.542Z","update_time":"$D2021-09-05T18:41:25.280Z","view_time":null,"first_public_time":"$D2020-11-29T21:14:26.813Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"98198089abd4b9a8","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":"starter_2024"},"version":413,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f76f5ed10936f426","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":null}],"members":[{"type":"individual","id":"f76f5ed10936f426","login":"olgabelitskaya","name":"Olga Belitskaya","avatar_url":"https://avatars-next.observableusercontent.com/efc5a1fdd47c22643bdfdce309fc023e67a3769736526e3805f1df287d3c1b68","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"427fd0dd60bc8aca","slug":"color-schemes","title":"Color Schemes","owner":{"id":"98198089abd4b9a8","login":"olgabelitskaya","name":"Olga Belitskaya"}},"type":"notebook","body":{"title":"📑 Exploration of Colorized Objects","cells":[{"id":0,"value":"md`# 📑 Exploration of Colorized Objects`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## 🤖 Markdown Cells & HTML Elements`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"sample_data=make_data(60)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"html`\n🦅\n 🎡\n 🦅
\n🎡\n 🎡\n 🎡
\n🎠\n 🎡\n🎠`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`## 🤖 SVG Elements`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"letter_chart.update(randl)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"n=Math.abs(120-4*Math.floor((now%(1000*60))/1000))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3=require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"