The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Apr 27, 2023
1 fork
Importers
55 stars
Here's some ${textcolor('highlighted', 'darkgreen')} text.
You can override the ${textcolor('foreground color', {background: '#111111', color: 'pink'})} by specifying an options object instead of a background color. The options object can also be used define other css properties, like using an ${textcolor('italic', {background: 'purple', fontStyle: 'italic'})} font style or adding ${textcolor('more padding', {background: '#5bc9cf', padding: "0 20px"})}
You can use colors from d3 color scales like ${textcolor('AMZN', d3.schemeTableau10[1])} in our chart example above.
function textcolor(content, style = {}) {
function yiq(color) {
const {r, g, b} = d3.rgb(color);
return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1
}
const {
background,
color = yiq(background) >= 0.6 ? "#111" : "white",
padding = "0 5px",
borderRadius = "4px",
fontWeight = 800,
...rest
} = typeof style === "string" ? {background: style} : style;
return htl.html`<span style=${{
background,
color,
padding,
borderRadius,
fontWeight,
...rest
}}>${content}</span>`;
}
import {stocks} from "@observablehq/plot-select"
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.
