viewof component_slider = new ComponentSlider({
data: initial_data
})
component_slider
initial_data = [
{
percent: 70,
color: "#3b5fc0"
},
{
percent: 20,
color: "#DA340E"
},
{
percent: 10,
color: "#10a778",
last: true
}
]
function update(element, data, n) {
function render() {
(g = 0),
(y = 0),
(p = element.getBoundingClientRect()),
svg.attr("viewBox", "0 0 " + Math.min(370,p.width) + " 32"),
(f = Math.min(370,p.width) - 18 * (data.length - 1)),
(h = d3
.scaleLinear()
.range([0, f])
.domain([0, 100])),
(m = svg
.selectAll("g.responses")
.data(data)
.enter()
.append("g")
.classed("responses", !0)),
(v = m
.append("g")
.classed("markers", !0)
.style("display", function(e) {
if (e.last) return "none";
})
.style("cursor", "col-resize")),
v
.append("circle")
.attr("r", 8)
.attr("cx", 6)
.attr("cy", 13.5)
.style("fill", function(e) {
return e.color;
}),
m
.filter(function(e, t, n) {
return t < n.length - 1;
})
.call(
d3
.drag()
.on("start", o)
.on("drag", a)
.on("end", render)
),
m.append("rect").classed("rectangles", !0),
m.append("text")
.classed("texts", !0)
.attr("y", 6)
.attr("font-family", "sans-serif")
.style("fill", "#000")
.style("text-anchor", "middle")
.style("font-size", "13px"),
svg
.selectAll("g.responses .rectangles")
.data(data)
.attr("y", 10)
.attr("height", 7)
.attr("rx", 4)
.style("fill", function(e) {
return e.color;
})
.attr("width", function(e) {
return (
d3
.select(this.parentNode)
.select(".texts")
.style("display", e.percent > 2 ? "block" : "none")
.text(e.percent + "%")
.attr(
"transform",
"translate(" + (g + 4 + h(e.percent) / 2) + ",0)"
),
(e.xo = g),
d3.select(this).attr("x", g),
(g += h(e.percent)),
d3
.select(this.parentNode)
.select(".markers")
.attr("transform", "translate(" + (g - 4) + ",0)"),
d3
.select(this.parentNode)
.select(".markers")
.attr("transform", "translate(" + (g - 4) + ",0)"),
(g += 11),
(e.po = y),
(e.pm = 100 - e.po),
(y += e.percent),
(e.xm = e.xo + h(100 - e.po) + 4),
h(e.percent) + 4
);
});
element.value = data;
element.dispatchEvent(new CustomEvent('input'));
return data;
}
function o(e, n) {
(u = d3
.scaleLinear()
.domain([e.xo, e.xm])
.range([0, e.pm])),
(c = JSON.parse(JSON.stringify(data))),
(s = e.percent);
}
function a(e, n) {
var o = Math.round(u(d3.event.x)),
a = JSON.parse(JSON.stringify(c));
if (o >= 0 && o <= e.pm) {
(a[n].percent = o), (l = o - s);
var i = Math.abs(l);
for (p = n + 1; p < c.length && i > 0; )
l > 0
? a[p].percent > 0
? (a[p].percent--, i--)
: p++
: (a[p].percent++, i--);
(data = a), render();
} else if (o < 0 && n > 0) {
a[n].percent = 0;
for (var i = -o, p = n - 1; p >= 0 && i > 0; )
a[p].percent > 0 ? (a[p].percent--, i--) : p--;
for (var d = 0, p = 0; p <= n; p++) d += c[p].percent;
var i = -o + e.percent;
i > d && (i = d);
for (var p = n + 1; p < c.length && i > 0; )
a[p].percent < 100 ? (a[p].percent++, i--) : p++;
(data = a), render();
}
}
var u;
var s;
var l;
var c;
var p;
var f;
var h;
var m;
var v;
var g;
var y;
var svg = d3
.select(element)
.append("svg")
.style("width", "370px")
.style("height", "32px")
.style("overflow", "visible");
render();
}
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.
