arcTween = {
const svg = d3.select(DOM.svg(width, height));
var arcMin = -Math.PI/2,
arcMax = Math.PI/2,
innerRadius = 100,
outerRadius = 110,
dataDomain = [0, 50, 100],
labelPad = 20,
colorScale = d3.scaleLinear(),
arcScale = d3.scaleLinear(),
colorOptions = ['#d63031', '#fdcb6e', '#00b894'],
arc = d3.arc();
arcScale = d3.scaleLinear().domain(dataDomain).range([arcMin, 0, arcMax]);
colorScale = d3.scaleLinear().domain(dataDomain).range(colorOptions);
arc = d3.arc().innerRadius(innerRadius)
.outerRadius(outerRadius)
.startAngle(arcMin);
//Create the chart.
const gArc = svg.append("g")
//.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.attr("class", "arc");
gArc.append("path").attr("class", "bg-arc");
gArc.append("path").attr("class", "data-arc")
.datum({endAngle: arcMin, startAngle: arcMin, score: dataDomain[0]})
.attr("d", arc)
.style("fill", colorScale(dataDomain[0]))
.each(function(d) { this._current = d; });
//TODO: Add back label?
gArc.append("text").attr("class", "arc-label");
gArc.selectAll(".lines").data(arcScale.ticks(5).map(score => ({ score })))
.enter()
.append("path")
.attr("class", "lines");
gArc.selectAll(".ticks").data(arcScale.ticks(5))
.enter().append("text")
.attr("class", "ticks")
.style("font-size", "16px")
.style("text-anchor", "middle");
// Update the outer dimensions.
svg.attr("width", width).attr("height", height);
// Update the inner dimensions.
const arcG = svg.select("g.arc")
.attr("transform", "translate(" +
((width - margin.left - margin.right) / 2) + "," +
((height * (2 / 3)) + ")"));
svg.select("g.arc .bg-arc")
.datum({endAngle: arcMax})
.style("fill", "#ddd")
.attr("d", arc);
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
console.log('--- arcTween:', a, this._current); //fish ------
return t => arc(i(t));
}
const dataArc = svg.select("g.arc .data-arc")
.datum({score: score, startAngle: arcMin, endAngle: arcScale(score)})
.transition()
.duration(750)
.style("fill", d => colorScale(d.score))
.style("opacity", d => d.score < dataDomain[0] ? 0 : 1)
.attrTween("d", arcTween);
const arcCentroid = arc.centroid({endAngle: arcMax, startAngle: arcMin, score: 0});
svg.select("text.arc-label")
.datum({score: score})
.attr("x", arcCentroid[0])
.attr("y", -15)
.style("alignment-baseline", "central")
.style("text-anchor", "middle")
.style("font-size", "64px")
.text(d => d3.format(".0f")(d.score));
const markerLine = d3.radialLine()
.angle(d => arcScale(d))
.radius((d, i) => {
return innerRadius + ((i % 2) * ((outerRadius - innerRadius)));
});
/*
arcG.selectAll(".lines")
.attr("d", d => markerLine([d.score, d.score]))
.style("fill", "none")
.style("stroke-width", 2.5)
.style("stroke", "#fff");
arcG.selectAll(".ticks")
.attr("x", d => Math.cos(arcScale(d) + arcMin) * (outerRadius + labelPad))
.attr("y", d => {
const yVal = Math.sin(arcScale(d) + arcMin) * (outerRadius + labelPad);
return yVal < -1 ? yVal : -7;
}).text(d => d);
*/
return svg.node();
}
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.
