Public
Edited
Oct 25, 2022
myColors =['rgba(33,102,172,0)','rgb(103,169,207)','rgb(209,229,240)','rgb(253,219,199)','rgb(239,138,98)','rgb(178,24,43)']
{
const parsedColors = myColors.map(d => d.split("(")[1].split(")")[0].split(","))
const hexColors = parsedColors.map(d => d3.rgb(d[0], d[1], d[2]).formatHex())
const n = hexColors.length;
return svg`<svg viewBox="0 0 ${n} 1" style="display:block;shape-rendering:crispEdges;width:calc(100% + 28px);height:33px;margin:0 -14px;cursor:pointer;" preserveAspectRatio="none">${hexColors.map((c, i) => htl.svg`<rect x=${i} width=1 height=1 fill=${c}>`)}`;
}
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.
