Published
Edited
Jan 26, 2022
1 star
Abstract Radial Bar Chart in D3 + Tweening
{
const svgBackgroundColor = "#152c33",
fontFamily = "helvetica",
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", svgBackgroundColor),
container = svg.append("g")
.attr("transform", `translate(${width/2},${height/2})`),
update = (data) => {
let t = d3.transition()
.duration(650).delay((d,i) => i * 10);
container.selectAll("path")
.data(data, d => d.id)
.join(
enter => enter.append("path")
.attr("fill", d => {return Math.random() < .5 ? "#b5179e" : "#fca311"})
.attr("d", arc)
.attr("stroke", d => "#f72585")
.style("opacity", d => {let rand = Math.random(); return rand < minOpacity ? minOpacity : rand})
,
update => update.call(e => e.transition(t)
.style("opacity", d => {let rand = Math.random(); return rand < minOpacity ? minOpacity : rand})
.attr("fill", d => {return Math.random() < .5 ? "#b5179e" : "#fca311"})
.attrTween("d", d => {
let oldInner = d.start;
let oldOuter = d.end;
let randomNew = Math.random();
let randomNewEnd = Math.random();
let i = d3.interpolate(oldInner, randomNew);
let u = d3.interpolate(oldOuter,randomNewEnd);
return t => {
d.end = u(t);
d.start = i(t);
return arc(d);
};
}
)//end attrTween
)
)
}
update(data);
yield svg.node();
d3.interval(function() {
update(data);
}, 500)
}
height = 400
width = 400
numNodes = 500
data = d3.range(numNodes).map(d => {
return {
id: d,
height: Math.random(),
size: Math.random(),
start: Math.random(),
end: Math.random()
}
})
innerRadius = 0
outerRadius = Math.min(width, height) / 2
minOpacity = .5
x = d3.scaleBand()
.domain(data.map(d => d.id))
.range([0, 2 * Math.PI])
.padding(0.2)
y = d3.scaleRadial()
.domain([0, 1])
.range([innerRadius, outerRadius])
arc = d3.arc()
.innerRadius(d => y(d.start))
.outerRadius(d => y(d.end))
.startAngle(d => x(d.id))
.endAngle(d => x(d.id) + x.bandwidth())
.padAngle(0.01)
.padRadius(innerRadius)
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.
