colorGradient = (data, thresholds, id, vertical = false) => {
if (thresholds.length < 5) throw 'Must have 5 threshold levels'
const s = d3.scaleLinear(
d3.extent(data, (d) => d.co2),
[0, 100]
)
return () => htl.svg.fragment`<defs>
<linearGradient id=${id} gradientTransform=${vertical ? 'rotate(-90 0.5 0.5)' : null}>
<stop stop-color=${d3.lch(80, 65, 150)} offset=0 />
<stop stop-color=${d3.lch(80, 65, 150)} offset=${s(thresholds[0] - 1)}% />
<stop stop-color=${d3.lch(70, 65, 150)} offset=${s(thresholds[0])}% />
<stop stop-color=${d3.lch(70, 65, 150)} offset=${s(thresholds[1] - 1)}% />
<stop stop-color=${d3.lch(80, 80, 90)} offset=${s(thresholds[1])}% />
<stop stop-color=${d3.lch(80, 80, 90)} offset=${s(thresholds[2] - 1)}% />
<stop stop-color=${d3.lch(60, 80, 40)} offset=${s(thresholds[2])}% />
<stop stop-color=${d3.lch(60, 80, 40)} offset=${s(thresholds[3] - 1)}% />
<stop stop-color=${d3.lch(60, 80, 40, 0.2)} offset=${s(thresholds[3])}% />
<stop stop-color=${d3.lch(60, 80, 40, 0)} offset=${s(thresholds[4])}% />
<stop stop-color=${d3.lch(60, 80, 40, 0)} offset=100% />
</linearGradient>
</defs>`
}