Staff engineer at Oura, co-founder at @lucified
Published
Edited
Apr 6, 2021
Importers
5 stars
textColorLuminance = (bgColor) => d3Color.hsl(bgColor).l >= luminanceCutoff ? darkTextColor : lightTextColor
textColorRGB = bgColor => {
const c = d3Color.rgb(bgColor)
const yiq = (c.r * 299 + c.g * 587 + c.b * 114) / 1000;
return yiq >= yiqCutoff ? darkTextColor : lightTextColor;
}
colorRows = Array.from({ length: 15 }).map(() => Array.from({ length: 8 }).map(() => `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`))
generateTable = textColorFunction => html`<table>${colorRows.map(row => html`<tr>${row.map(color => html`<td style="width: ${cellWidth}px; height: ${cellHeight}px; background-color: ${color}; color: ${textColorFunction(color)}; text-align: center; padding-top: 8px">Hello!</td>`)}</tr>`)}</table>`
cellWidth = 100
cellHeight = 20
darkTextColor = '#24477B'
lightTextColor = 'white'
import { Range } from '@observablehq/inputs'
d3Color = require('d3-color')
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.
