The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Jun 13, 2022
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
genTeardrop = (key) => {
let {colors, gradient, gradientData, gradientId} = genSvgGradient(key);
let smallRadius = circleRadius * 0.25;
let pathData = `
M 0,${circleRadius}
a ${circleRadius} ${circleRadius} 90 0 1 ${circleRadius},${-circleRadius}
a ${circleRadius} ${circleRadius} 90 0 1 ${circleRadius},${circleRadius}
a ${circleRadius} ${circleRadius} 90 0 1 ${-circleRadius},${circleRadius}
l ${smallRadius - circleRadius},0
a ${smallRadius} ${smallRadius} 90 0 1 ${-smallRadius},${-smallRadius}
Z
`;

return html`<div style="margin-right: 40px" class="blob-container">
<div>${key}</div>
<svg width="${circleRadius * 2}px" height="${circleRadius * 2}px">
${gradient}
<path fill="url(#${gradientId})" d="${pathData}"></path>
</svg>
${makeSwatches({ gradientData, colors })}
</div>`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sha3 = (await require('js-sha3')).sha3_256
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