Design and coding @fastforwardlabs. Lately interested in grids. Continually interested in simulations. He/him.
{
let canvasi = lettersi.split('').map(l => {
let canvas = document.createElement('canvas')
let fs = font_size * 8
let height = fs * line_height
let width = ratio * height
canvas.width = width
canvas.height = height
let ctx = canvas.getContext('2d')
ctx.font = `${fs}px ${font}`
ctx.fillText(l,0, height - (height - fs))
let data = ctx.getImageData(0,0,width,height).data
let vals = []
for (let i = 0; i < data.length; i += 4) {
// check alpha
let a = data[i + 3]
let val = a > 255 / 2 ? 1 : 0
vals.push(val)
}
let ons = vals.filter(v => v === 1)
let percent = ons.length / vals.length
return {canvas: canvas, percent: percent}
})
let sorted = _.sortBy(canvasi, 'percent').reverse()
return html`<div style="overflow: hidden;">${sorted.map(c => {
let parent = document.createElement('div')
parent.style.float = 'left'
parent.style.width = '140px'
parent.style.marginRight = '10px'
parent.appendChild(c.canvas)
let text = document.createElement('div')
text.innerText = Math.round(c.percent * 100 * 10000)/10000 + '%'
parent.appendChild(text)
return parent
})}</div>`
// return html`${canvasi}`
}
html`<div class="custom-font">font</div>`
html`<style>.custom-font { font-family: '${font}' }</style>`
mutable font_loaded = false
{
var font = new FontFaceObserver(`IBM Plex Mono`, {
weight: 400
});
font.load().then(function () {
mutable font_loaded = true
}, function () {
console.log('Font is not available');
});
return 'font face observer set-up'
}
html`<link href="https://fonts.googleapis.com/css?family=${font.replace(/ /g,'+')}" rel="stylesheet">`
font.replace(/ /g,'+')
FontFaceObserver = require('https://bundle.run/fontfaceobserver@2.1.0')
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.
