📑 Exploration of Colorized Objects / Olga Belitskaya

Olga Belitskaya

Workspace

Public

Color Schemes

Edited

Sep 5, 2021

1 star

md`# 📑 Exploration of Colorized Objects`

md`## 🤖 Markdown Cells & HTML Elements`

md`### Graphics & Text Examples:

* ${colorized_text('color interpolation')} - a text row;

* ${highlighted_text('highlight interpolation')} - another text row;

* ${canvas_text('color gradient')} - a canvas text;

* ${animated_line(sample_data)} - a chart inline;

* ${animated_line(make_data(60))} - an animated chart inline;

* ${canvas_circle(4,8)} - canvas drawing.

<br/><br/>`

function make_data(n) {

return d3.range(n).map(i=>Math.sin(i)*Math.random())}

sample_data=make_data(60)

function highlighted_text(string) {

const t=html`

<style>

.highlight {color:white;

font-size:22px; font-family:Verdana;}

</style>

<text class='highlight'>${string}</text>`;

t.style.background=d3.interpolateSinebow(now/3000);

return t;}

function colorized_text(string) {

const t=html`<text style='font-family:Verdana;

font-size:22px;'>${string}</text>`;

t.style.color=d3.interpolateSinebow(now/3000);

return t;}

function canvas_text(string,width=170,height=50) {

const context=DOM.context2d(width,height);

context.font='24px Verdana';

const gradient=context.createLinearGradient(0,0,width,0);

gradient.addColorStop('0','#3636ff');

gradient.addColorStop('.5','#ff36ff');

gradient.addColorStop('1.','#ff3636');

context.strokeStyle=gradient;

context.strokeText(string,0,30);

return context.canvas;}

function canvas_circle(r,k) {

const context=DOM.context2d(2*r*k,2*r*k);

for (let radius=r; radius<r*k; radius+=r) {

context.beginPath();

context.arc(r*k,r*k,radius,0,2*Math.PI);

context.stroke();

const coef=radius/(2*r*k)+now/3000

context.strokeStyle=d3.interpolateSinebow(coef);}

return context.canvas;}

function animated_line(values,width=100,height=50) {

const x=d3.scaleLinear().domain([0,values.length-1])

.range([1,width-1]),

y=d3.scaleLinear().domain(d3.extent(values))

.range([height-1,1]);

const context=DOM.context2d(width,height);

const line=d3.line().x((d,i)=>x(i)).y(y).context(context);

context.strokeStyle=d3.interpolateSinebow(now/6000);

context.beginPath(),line(values),context.stroke();

return context.canvas;}

html`<style>

.emo {font-size:300%;}

.trans,.comb {margin:0; color:transparent;

text-shadow:0 0 5px #3636ff;

font-size:300%; position:relative;}

.trans::before {content:attr(title); position:absolute;

text-shadow:0 0 0 white;}

.comb::before {content:attr(title); position:absolute;

text-shadow:0 0 0 slategray;}

</style>

<text class='emo'>&#x1F3A0</text>`

md`## 🤖 SVG Elements`

randl={while (true) {

yield d3.shuffle([...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].slice())

.slice(Math.floor(Math.random()*10)+1)

.sort(d3.ascending);

await Promises.delay(3000);};}

letter_chart={

const svg=d3.create('svg').attr('viewBox',[0,0,600,60])

.attr('font-family','Verdana').attr('font-size',10)

.style('display','block');

let text=svg.selectAll('text');

return Object.assign(svg.node(),{

update(letters) {

text=text.data(letters).join('text').text(d=>d)

.attr('x',(d,i)=>i*20).attr('y',30)

.style('fill',d3.interpolateTurbo(

letters.length/32))}});}

letter_chart.update(randl)

d3.create('svg').attr('width',256).attr('height',256)

.call(svg=>svg.selectAll('circle')

.data(d3.range(128,0,-8)).join('circle')

.attr('transform','translate(128,128)')

.attr('fill',d3.scaleSequential(

d3.interpolateTurbo).domain([0,128+n]))

.attr('r',d=>d))

.node()

n=Math.abs(120-4*Math.floor((now%(1000*60))/1000))

d3=require('d3@6')

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more