Public
Edited
Dec 9, 2023
chart = {
const width = 400; // uncomment for responsive width
const height = 400;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
let badge = svg.append("g").attr("transform", "translate(200,150)");
let badges = badgeKit();
badge.datum(config).call(badges);
return svg.node();
}
badgeKit = () => {
function badgeKit(selection) {
let g = selection
.selectAll("g")
.data((d) => d)
.join("g")
.attr("class", "badgecomp")
.each(function (d, i) {
const ig = d3.select(this);
if (d.type === "circle") {
ig.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d.radius)
.attr("stroke", d.stroke ? d.stroke : "black")
.attr("stroke-width", d.strokeWidth ? d.strokeWidth : 1)
.attr("fill", d.fill ? d.fill : "none");
} else if (d.type === "ring") {
let c = d3.curveLinearClosed;
if (d.curve === "linear") c = d3.curveLinearClosed;
if (d.curve === "basis") c = d3.curveBasisClosed;
if (d.curve === "catmull") c = d3.curveCatmullRomClosed;
if (d.curve === "natural") c = d3.curveNatural;
const shape = d3
.radialLine()
//.angle((_, i) => (i / d.no) * 2 * Math.PI)
.curve(c);
//.radius(() => d.radius);
let el = d3
.range(0, d.no)
.map((de) => [
(de * Math.PI * 2) / d.no,
de % 2 === 0 ? d.inner : d.outer
]);
console.log("EL", el);
const path = shape(el);
ig.append("path")
.attr("d", path)
.attr("stroke", d.stroke ? d.stroke : "none")
.attr("stroke-width", d.strokeWidth ? d.strokeWidth : 1)
.attr("fill", d.fill ? d.fill : "none");
}
});
}
return badgeKit;
}
config = [
{
type: "ring",
inner: 90,
outer: 135,
no: 40,
fill: "#ccddcc",
curve: "catmull"
},
{
type: "circle",
radius: 80,
strokeWidth: 8,
stroke: "white"
}
]
ringCreator = (inner, outer) => {
return (r, pos) => findCircleCoordinates(inner + r * (outer - inner), pos);
}
path1 = {
let x = d3.range(0, 1, 1 / 20);
let w = (i) => (i + x.length) % x.length;
let y = x.map((d, i) => [w(i - 1), i, w(i + 1)]);
let p = y.map((d) => {
let prev = findCircleCoordinates(90, d[0]);
let cur = findCircleCoordinates(100, d[1]);
let next = findCircleCoordinates(90, d[2]);
return `C ${cur.x},${cur.y} `;
});
return y;
}
findCircleCoordinates = (r, pos) => {
// Calculating the x-coordinate
// cosine(angle) gives the x-coordinate of the point on the circle
const angleInRadians = pos * Math.PI * 2 - Math.PI / 2;
var x = r * Math.cos(angleInRadians);
// Calculating the y-coordinate
// sine(angle) gives the y-coordinate of the point on the circle
var y = r * Math.sin(angleInRadians);
return { x: x, y: y };
}
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.
