Public
Edited
Dec 1, 2022
ring_to_test = "Ring 1"
yPlacement = function(expr) {
switch(expr) {
case "Ring 7":
return 0.01
break;
case "Ring 6":
return 0.15
break;
case "Ring 5":
return 0.27
break;
case "Ring 4":
return 0.4
break;
case "Ring 3":
return 0.52
break;
case "Ring 2":
return 0.64
break;
case "Ring 1":
return 0.77
break;
default:
console.log(`value out of bounds`);
}
}
icon_size = 20
piechart = {
const svg = d3.select(DOM.svg(width, height));
const g = svg
.append("g")
.attr("transform", `translate(${(width / 2)}, ${height / 2})`);
const arc = g
.selectAll(".arc")
.data(final_data)
.enter()
.append("g")
.classed("arc", true);
paths.forEach((path, index) => {
arc
.append("path")
.attr("d", path.path)
.attr("stroke", "white")
.attr("stroke-width", 2)
.attr("fill", (d) => color(d.data.name))
.attr('opacity', 0.25)
});
const axisGrid = g.append("g").attr("class", "axisWrapper");
const axis = axisGrid
.selectAll(".axis")
.data(final_data)
.enter()
.append("g")
.attr("class", "axis");
const points = g
.selectAll(".graph_points")
.data(final_data)
.enter()
.append("g")
.classed("segment", true)
.selectAll('g')
.classed("points", true)
.append('circle')
.data(d => d.data.points)
.enter()
points.append("g")
.attr(
"transform",
(d) =>
`translate(${d3.pointRadial(
d.placement,
(rScale(maxValue) * yPlacement(d.ring))
).map(x => x-iconsize/2)})`
)
.call(g => g.append("use")
.attr("href", d=>`#A`)
.attr("width", iconsize)
.attr("height", iconsize)
.attr("stroke", "#000")
.attr("fill", (d) => color(d.group_name)))
g
.selectAll("paths")
.data(paths)
.enter()
.append('path')
.attr("id", d => d.ring)
.attr("d", d => d.ringPath())
.attr('fill', 'none')
.attr("transform", "translate(0,5)");
g.selectAll("texts")
.data(paths)
.enter()
.append("text")
.append("textPath")
.attr("xlink:href", d => "#" + d.ring)
.style("text-anchor","left")
.text(d => d.ring)
.attr("fill", 'navy')
.attr("filter", "drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))")
return svg.node();
}
iconsize = 20;
axis = make_axis(0, radius)
ring_name = ["Ring 1", "Ring 2", "Ring 3", "Ring 4", "Ring 5", "Ring 6", "Ring 7"]
ring_start = [-1,-0.4,-0.25,-0.17,-0.14,-0.11,-0.09]
pied_data = pie(data)
new_data = {
let new_data = []
for (let j = 0; j < data.length; j++) {
var arr = pied_data[j].data.points.map(function(value) {return value.ring;});
var uniques = arr.reduce((acc, val) => {
acc[val] = acc[val] === undefined ? 1 : acc[val] += 1;
return acc;
}, {})
let counts = {};
let current = pied_data[j].data.points.map(({
ring,
name,
value}) => {
if(!counts[ring])
counts[ring]=0;
counts[ring]+=1
return {
ring,
name,
group_name: pied_data[j].data.name,
n_in_slice: uniques[ring],
iterator_in_slice: counts[ring],
placement: placement_fun(uniques[ring], pied_data[j].startAngle, pied_data[j].endAngle, counts[ring])
}
})
new_data.push(current)
}
return new_data
}
placement_fun = (points_in_arc, start, end, index) => {
// if there's one point put it in the center
if (points_in_arc === 1) {
return (end + start) / 2
} else {
let slice_size = (end - start) / points_in_arc
return (slice_size*index) + start - (slice_size/2)
}
}
final_data = {
for (let j = 0; j < pied_data.length; j++) {
pied_data[j].data.points = new_data[j]
}
return pied_data
}
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.
