The Ambassador program is made up of a group of inclusive, collaborative, and curious minds in the Observable community.
Public
Edited
Mar 18, 2024
Paused
4 stars
{
const xOffset = 100 - perCentFilled;
return html`<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="280" height="280" viewBox="0 0 497 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="partiallFill" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="${startColor}"/>
<stop offset="${xOffset}%" stop-color="${startColor}"/>
${
removeGradation
? `<stop offset="${xOffset}%" stop-color="${stopColor}"/>`
: ``
}
<stop offset="100%" stop-color="${stopColor}"/>
</linearGradient>
</defs>
<g fill="url(#partiallFill)" stroke="black" stroke-width="4">
<path d="M481.708,220.456l-228.8-204.6c-0.4-0.4-0.8-0.7-1.3-1c-5-4.8-13-5-18.3-0.3l-228.8,204.6c-5.6,5-6,13.5-1.1,19.1
c2.7,3,6.4,4.5,10.1,4.5c3.2,0,6.4-1.1,9-3.4l41.2-36.9v7.2v106.8v124.6c0,18.7,15.2,34,34,34c0.3,0,0.5,0,0.8,0s0.5,0,0.8,0h70.6
c17.6,0,31.9-14.3,31.9-31.9v-121.3c0-2.7,2.2-4.9,4.9-4.9h72.9c2.7,0,4.9,2.2,4.9,4.9v121.3c0,17.6,14.3,31.9,31.9,31.9h72.2
c19,0,34-18.7,34-42.6v-111.2v-34v-83.5l41.2,36.9c2.6,2.3,5.8,3.4,9,3.4c3.7,0,7.4-1.5,10.1-4.5
C487.708,233.956,487.208,225.456,481.708,220.456z "/>
<text x="190" y="248" style="font: 25px sans-serif;stroke-width: 2">${d3.format(
".0%"
)(perCentFilled / 100)} Filled</text>
</g>
</svg>`;
} // fill="${contrast()}"
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.
