Public
Edited
May 16, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hint
Insert cell
html`

<div>

<h6>Linear</h6>
${culori.samples(count).map(
culori.interpolate(['green', 'red', 'blue'], 'lrgb')
).map(toSwatch).join('')}</div>

<h6>Smoothstep</h6>
${culori.samples(count).map(
culori.interpolate(['green', culori.easingSmoothstep, 'red', culori.easingSmoothstep, 'blue'], 'lrgb')
).map(toSwatch).join('')}</div>

<h6>Smootherstep</h6>
${culori.samples(count).map(
culori.interpolate(['green', culori.easingSmootherstep, 'red', culori.easingSmootherstep, 'blue'], 'lrgb')
).map(toSwatch).join('')}</div>

<h6>Midpoint(${hint})</h6>
${culori.samples(count).map(
culori.interpolate(['green', culori.easingMidpoint(hint), 'red', culori.easingMidpoint(hint), 'blue'], 'lrgb')
).map(toSwatch).join('')}</div>
`
Insert cell
Insert cell
Insert cell
Insert cell
culori = require('culori@0.10.0')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
Insert cell

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