Published
Edited
Nov 6, 2021
9 forks
103 stars
prototype = {
const d = diameter;
const svg = d3.create("svg")
.style("width", d)
.style("height", d)
.style("background", "black")
.attr("viewBox", [-d/2, -d/2, d, d]);
var lines;
if (options2.color === "rank") {
lines = svg.selectAll(".line")
.data(ranks)
.join("path")
.attr("opacity", 0)
.attr("class", "line")
.attr("fill", "none")
.attr("stroke", (d, i) => color(sortedTerritories[i]))
.attr("d", d => line(d.series));
}
var g;
const isSeq = options2.color === "value";
if (isArc) {
g = svg.append("g")
.selectAll("g")
.data(sorted)
.join("g")
.selectAll("path")
.data((d, i) => d.values.map(v => ({index: i, territory: v.territory, value: v.value})))
.join("path")
.attr("fill", d => color(isSeq ? d.value : d.territory))
.attr("d", arc);
}
else {
const r = radius, x = 2 * r;
const gg = svg.append("g")
.selectAll("g")
.data(sorted)
.join("g")
.attr("transform", (d, i) => `rotate(${xl(i)})`);
if (options2.shape === "circle")
g = gg.selectAll("circle")
.data(d => d.values)
.join("circle")
.attr("fill", d => color(isSeq ? d.value : d.territory))
.attr("cx", (d, i) => sticky ? i * x + options2.innerRadius: y(i))
.attr("r", r);
else {
const w = 2 * r, hb = y.bandwidth() / 2;
g = gg.selectAll("rect")
.data(d => d.values)
.join("rect")
.attr("fill", d => color(isSeq ? d.value : d.territory))
.attr("x", (d, i) => (sticky ? i * w + options2.innerRadius: y(i)) - hb)
.attr("y", sticky ? -r : -hb)
.attr("width", w)
.attr("height", w);
}
}
g.attr("opacity", 1)
.on("mouseenter", (e, d) => {
g.transition().duration(500).attr("opacity", _ => _.territory === d.territory ? 1 : 0.5);
if (lines) lines.transition().duration(250).attr("opacity", _ => _.territory === d.territory ? 1 : 0);
})
.on("mouseleave", () => {
g.transition().duration(500).attr("opacity", 1);
if (lines) lines.transition().duration(250).attr("opacity", 0);
});
return svg.node();
}
arc = d3.arc()
.innerRadius((d, i) => y(i))
.outerRadius((d, i) => y(i) + y.bandwidth())
.startAngle(d => xb(d.index))
.endAngle(d => xb(d.index) + xb.bandwidth())
line = {
var a = Math.PI * 0.5, r = 0;
if (isArc) {
a = xb.bandwidth() / 2;
r = y.bandwidth() / 2;
}
return d3.lineRadial()
.curve(d3.curveLinearClosed)
.angle((d, i) => xb(i) + a)
.radius(d => y(d.index) + r)
}
radius = {
const
r1 = 2 * Math.PI * options2.innerRadius / sample.length / 2,
r2 = (diameter / 2 - options2.innerRadius) / (territories.length * 2);
return Math.min(r1, r2);
}
// for dot
xl = d3.scaleLinear().domain([0, sample.length]).range([0, 360])
// for arc
xb = d3.scaleBand().domain(seq(sample.length)).range([0, 2 * Math.PI])
y = {
const max = isArc || !sticky ? diameter / 2 : options2.innerRadius + radius * 2 * territories.length;
return d3.scaleBand().domain(seq(territories.length)).range([options2.innerRadius, max])
}
color = {
if (options2.color === "rank")
return d3.scaleOrdinal()
.domain(sortedTerritories)
.range(d3.schemeTableau10);
else
return d3.scaleSequential(d3.interpolateBlues)
.domain(d3.extent(sample.flatMap(d => Object.values(d).slice(1))));
}
ranks = sortedTerritories.map(t => ({
territory: t,
series: sorted.map(d => ({
date: d.date,
index: d.values.findIndex(e => e.territory === t)
}))
}))
sortedTerritories = {
const ts = sorted[0].values.map(d => d.territory);
if (ts.length < territories.length) {
territories.forEach(t => {
if (ts.indexOf(t) === -1) {
if (options2.reverse) ts.unshift(t);
else ts.push(t);
}
});
}
return ts;
}
sorted = sample.map(d => {
let values = territories.map(t => ({territory: t, value: d[t]}));
if (!options2.showEmpty) values = values.filter(v => v.value !== 0)
if (options2.color === "rank") {
if (options2.reverse) values.sort((a, b) => a.value - b.value)
else values.sort((a, b) => b.value - a.value)
}
return {
date: d.Date,
values: values
}
})
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.
