I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
viewof val = ColorAreaRange([0, 50], {
valueRanges : [
{min: 0, max: 5, color: "#77bbff", label: "Unity" },
{min: 5, max: 20, color: "#b66af2", label: "Progresivity" },
{min: 20, max: 50, color: "#ec7ea6", label: "Contrast" }
],
step: 1,
label: "Range ",
width
})
val
function ColorAreaRange(extent = [0, 1], _options = {}) {
const o = Object.assign(
{
// default Options
valueRanges: [
// {min: 0, max: 5, color: "red", label: "Unity" }
],
flexShrinkNumber: 5,
flexShrinkLabel: 10
},
_options
);
const range = Inputs.range(extent, o);
// Make the number and label smaller
range.querySelector("label").style["flex-shrink"] = o.flexShrinkLabel;
range.querySelector("input[type=number]").style["flex-shrink"] =
o.flexShrinkNumber;
const scentEle = htl.html`<div></div>`;
const target = htl.html`<div>
${scentEle}
${range}
</div>`;
function set() {
target.value = range.value;
target.dispatchEvent(new Event("input", { bubbles: true }));
}
target.value = range.value;
function onResize() {
const rangeBB = range
.querySelector("input[type=range]")
.getBoundingClientRect();
console.log(range);
const x = d3.scaleLinear().domain(extent).range([0, rangeBB.width]);
scentEle.innerHTML = `<div style="
display:flex;
position:relative;
left: ${rangeBB.left - target.getBoundingClientRect().left}px;
top: ${rangeBB.top - target.getBoundingClientRect().top - 5}px;
height: 30px;
">
${o.valueRanges
.map(
(d) => `<div style="
background:${d.color};
width:${x(d.max - d.min)}px;
height: 10px;
margin-top:30px;
z-index:-1;">
<span style="transform-origin: 0 0;
transform: rotate(-35deg);
position: absolute;
top: ${15}px;
font-size: 8pt;
font-family: helvetica;
">${d.label}</span></div>`
)
.join("")}
</div>`;
}
// Hack for resizing after the element is mounted
// https://stackoverflow.com/questions/15875128/is-there-element-rendered-event
const resizeObserver = new ResizeObserver(() => {
// console.log("Resize observer");
onResize();
resizeObserver.disconnect();
});
resizeObserver.observe(target);
// yield target;
range.addEventListener("input", set);
return target;
}
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.
