Public
Edited
Aug 13, 2023
1 star
chart = {
const sw = 0.3;
const so = 1;
const cols = 6;
const offSet = 0;
const off = 38;
const strokeWidth = 2;
// const ray = 55;
const ray = 55 + 22;
// const ray2 = 100;
const ray2 = 100 + 22;
// const ray3 = 22;
const ray3 = 22 + 22;
const offnumber = 22;
const offAngle = (Math.PI / 180) * 1.3;
// const magic = (d) => (d.data.subcat != "" ? d.data.subcat : d.data.cat);
const magic = (d) => d.data.cat;
// const myColor = d3.scaleOrdinal(d3.schemeSpectral[7]);
// const myColor = d3.scaleOrdinal(d3.schemeSet1);
// const myColor = d3.scaleOrdinal(
// d3.quantize(d3.interpolateHcl("#60c96e", "#4d4193"), 10)
// );
const myColor = d3.scaleOrdinal(d3.quantize(d3.interpolateRainbow, cols));
function darken(color, k = 1) {
const { l, c, h } = d3.lch(color);
return d3.lch(l - 30 * k, c, h);
}
const root = tree(
rootWithIngoing.sort((a, b) => d3.ascending(a.data.subcat, b.data.subcat))
);
const svg = d3
.create("svg")
.attr("viewBox", [-width / 2, -width / 2, width, width]);
const node = svg
.append("g")
// .attr("font-family", "sans-serif")
.attr("font-size", 9.2)
// .attr("font-kerning", "none")
// .attr("font-variant-numeric", "tabular-nums")
.selectAll("g")
.data(root.leaves())
.join("g")
.attr(
"transform",
(d) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`
)
.append("text")
.attr("dy", "0.31em")
.attr("x", (d) => (d.x < Math.PI ? 6 : -6 - offnumber))
.attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "start"))
.attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null))
.style("fill", (d) => darken(myColor(magic(d))))
.text((d) => {
if (d.x < Math.PI - offSet) {
if (typeof d.data.num !== "undefined") {
if (d.data.num.length <= 4) {
var str = d.data.num;
var nameOnly = str.substring(0, str.length - 1);
var numOnly = str.substring(str.length - 1, str.length);
d.data.num = nameOnly + "\xa0\xa0" + numOnly;
}
return d.data.num;
} else return d.data.content;
} else {
if (typeof d.data.num !== "undefined") {
if (d.data.num.length <= 4) {
var str = d.data.num;
var nameOnly = str.substring(0, str.length - 1);
var numOnly = str.substring(str.length - 1, str.length);
d.data.num = nameOnly + "\xa0\xa0" + numOnly;
}
return d.data.num;
} else return d.data.content;
}
})
.clone(true)
.lower()
.attr("stroke", "white")
.clone(true)
.attr("stroke-width", 0)
// .attr("transform", (d) => `translate(${ray3},0)`) // .attr("transform", `translate(${ray3},0)`)
// .attr("dy", "0.31em")
.attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "end"))
.attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null))
.attr("x", (d) =>
d.x < Math.PI - offSet === !d.children ? off + ray3 : -off - ray3
)
.style("fill", (d) => darken(myColor(magic(d))))
.text((d) => {
// return d.data.content + " (" + magic(d).slice(1) + ")";
return d.data.content;
});
// CONNECTIONS //
const line = d3
.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius((d) => d.y)
.angle((d) => d.x);
const link = svg
.append("g")
// .attr("stroke", "red")
.attr("fill", "none")
.attr("stroke-width", sw)
.attr("stroke-opacity", so)
.selectAll("path")
.data(root.leaves().flatMap((leaf) => leaf.outgoing))
.join("path")
.style("mix-blend-mode", "multiply")
.style("opacity", so)
.attr("d", ([i, o]) => line(i.path(o)))
.attr("stroke", (d) => myColor(magic(d[inout])))
.each(function (d) {
d.path = this;
});
// svg
// .append("g")
// .attr("fill", "none")
// .selectAll("path")
// .data(
// d3.transpose(
// root
// .leaves()
// .filter((rule) => rule.outgoing)
// .flatMap((leaf) => leaf.outgoing.map(path))
// .map((path) => Array.from(path.split(k)))
// )
// )
// .join("path")
// .style("mix-blend-mode", "darken")
// .attr("stroke", (d, i) => color(d3.easeQuad(i / ((1 << k) - 1))))
// // .attr("stroke", (d, i) => {
// // // const magic = d.data.subcat != "" ? d.data.subcat : d.data.cat;
// // color(d3.easeQuad(i / (1 << k)));
// // })
// // .attr("stroke", (d, i) => color(i - 1))
// .attr("d", (d) => d.join(""));
// RING //
const halfPI = Math.PI / 2;
const cx = 0;
const cy = 0;
const r = radius - 100 + ray;
const arc = d3
.arc()
.innerRadius(r - 24)
.outerRadius(r);
// .padAngle(Math.PI / 180);
const atBottom = (d) => {
const middle = (d.startAngle - halfPI + d.endAngle - halfPI) / 2;
return middle >= 0 && middle < Math.PI;
};
const enter = (enter) => {
const g = enter
.append("g")
.attr("class", "arcLabel")
.attr("transform", `translate(${cx}, ${cy})`);
g.append("path")
.attr("id", (d) => d.uid.id)
.style("fill", "none")
.attr("d", (d) => {
const context = d3.path();
if (atBottom(d)) {
context.arc(
0,
0,
r,
d.endAngle - halfPI,
d.startAngle - halfPI,
true
);
} else {
context.arc(
0,
0,
r,
d.startAngle - halfPI,
d.endAngle - halfPI,
false
);
}
return context.toString();
});
g.append("path")
.style("fill", "grey")
.attr("d", (d) => arc(d));
g.append("text")
.style("fill", "white")
.style("font-size", 14)
.style("font-weight", "bold")
.attr("dy", (d) => 13 * (atBottom(d) ? -0.8 : 1.1))
.attr("dominant-baseline", "middle")
.attr("text-anchor", "middle")
.append("textPath")
.attr("startOffset", "50%")
.attr("xlink:href", (d) => d.uid.href)
.text((d) => d.data);
};
const myDataArc1 = myDataArc(offAngle);
myDataArc1.forEach((d) => (d.uid = DOM.uid("p-" + d.index)));
svg.selectAll("g.arcLabel").data(myDataArc1).join(enter);
///////////// subcat ///////////
return svg.node();
}
line = d3.lineRadial()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
// line = d3.lineRadial()
// .curve(d3.curveBundle)
// .radius(d => d.y)
// .angle(d => d.x)
myDataArcsubcat = (offAngle) => {
const myDataArc = [];
let i = 0;
rootUsed.each((d) => {
const push = {};
if (d.height == 1) {
push.data = d.data[0].slice(1);
push.index = i;
i++;
push.value = 1;
push.startAngle = d.children[0].x - offAngle;
push.endAngle = d.children[d.children.length - 1].x + offAngle;
myDataArc.push(push);
}
});
return myDataArc;
}
myDataArc
myDataArc = (offAngle) => {
const myDataArc = [];
let i = 0;
rootUsed.each((d) => {
const push = {};
if (d.height == 1) {
push.data = d.data[0].slice(1);
push.index = i;
i++;
push.value = 1;
push.startAngle = d.children[0].x - offAngle;
push.endAngle = d.children[d.children.length - 1].x + offAngle;
myDataArc.push(push);
}
});
return myDataArc;
}
rootUsed = tree(
rootWithIngoing.sort((a, b) => d3.ascending(a.data.subcat, b.data.subcat))
)
dataArc = d3
.pie()
.sort(null)
.value((d) => 1)([
"Samana Etiquette",
"Communal Harmony",
"Right Livelyhood",
"Right Action",
"Right Speech"
])
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRdNo7gB5mA7rJUYOxIyvljDYeb5t5pgW60eGGBjzQ9f0JlTrCIo_e3QmHly9kgQ4A_TiIqRHECGfDN/pub?output=csv"
rootSub = d3.hierarchy(data3)
data3 = d3.group(
csvData,
(d) => d.cat
// (d) => d.subcat
)
root2 = d3.hierarchy(data2)
array = [["test", "test2"]]
rootSorted = rootWithIngoing.sort((a, b) =>
d3.ascending(a.data.subcat, b.data.subcat)
)
rootWithIngoing = {
rootNew.each((node) => {
let foundLeaf = 0;
// tree() necessary ?
if (node.height == 0) {
// on leaves ?
rootNew.each((leaf) => {
if (leaf.outgoing) {
// check if leaf has outgoing
for (var i = 0; i < leaf.outgoing.length; i++) {
// check if leaf is outgoing to node
if (leaf?.outgoing[i][1] == node) {
foundLeaf = 1;
if (!node.incoming) {
node.incoming = [[leaf, node]];
} else {
node.incoming = [...node.incoming, [leaf, node]];
}
}
}
}
});
}
if (node.height == 0 && foundLeaf == 0) node.incoming = [];
});
return rootNew;
}
rootNew = tree(rootWithOutgoing)
rootWithOutgoing = {
rootSub.each((d) => {
if (d.data.related) {
const ruleNums = d3.csvParse(d.data.related).columns; // an array
const ruleNames = ruleNums.map((ruleNum) => {
ruleNum = ruleNum.trim();
const name = rootSub.find((x) => x.data.num == ruleNum);
return [d, name];
});
d.outgoing = ruleNames;
} else if (d.height == 0) {
d.outgoing = [];
}
});
return rootSub;
}
data = hierarchy(await FileAttachment("flare.json").json())
d3.hierarchy(data)
function hierarchy(data, delimiter = ".") {
let root;
const map = new Map;
data.forEach(function find(data) {
const {name} = data;
if (map.has(name)) return map.get(name);
const i = name.lastIndexOf(delimiter);
map.set(name, data);
if (i >= 0) {
find({name: name.substring(0, i), children: []}).children.push(data);
data.name = name.substring(i + 1);
} else {
root = data;
}
return data;
});
return root;
}
function bilink(root) {
const map = new Map(root.leaves().map(d => [id(d), d]));
for (const d of root.leaves()) d.incoming = [], d.outgoing = d.data.imports.map(i => [d, map.get(i)]);
for (const d of root.leaves()) for (const o of d.outgoing) o[1].incoming.push(o);
return root;
}
function id(node) {
return `${node.parent ? id(node.parent) + "." : ""}${node.data.name}`;
}
function path([source, target]) {
const p = new Path;
line.context(p)(source.path(target));
return p;
}
class Path {
constructor(_) {
this._ = _;
this._m = undefined;
}
moveTo(x, y) {
this._ = [];
this._m = [x, y];
}
lineTo(x, y) {
this._.push(new Line(this._m, this._m = [x, y]));
}
bezierCurveTo(ax, ay, bx, by, x, y) {
this._.push(new BezierCurve(this._m, [ax, ay], [bx, by], this._m = [x, y]));
}
*split(k = 0) {
const n = this._.length;
const i = Math.floor(n / 2);
const j = Math.ceil(n / 2);
const a = new Path(this._.slice(0, i));
const b = new Path(this._.slice(j));
if (i !== j) {
const [ab, ba] = this._[i].split();
a._.push(ab);
b._.unshift(ba);
}
if (k > 1) {
yield* a.split(k - 1);
yield* b.split(k - 1);
} else {
yield a;
yield b;
}
}
toString() {
return this._.join("");
}
}
class Line {
constructor(a, b) {
this.a = a;
this.b = b;
}
split() {
const { a, b } = this;
const m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
return [new Line(a, m), new Line(m, b)];
}
toString() {
return `M${this.a}L${this.b}`;
}
}
BezierCurve = {
const l1 = [4 / 8, 4 / 8, 0 / 8, 0 / 8];
const l2 = [2 / 8, 4 / 8, 2 / 8, 0 / 8];
const l3 = [1 / 8, 3 / 8, 3 / 8, 1 / 8];
const r1 = [0 / 8, 2 / 8, 4 / 8, 2 / 8];
const r2 = [0 / 8, 0 / 8, 4 / 8, 4 / 8];
function dot([ka, kb, kc, kd], {a, b, c, d}) {
return [
ka * a[0] + kb * b[0] + kc * c[0] + kd * d[0],
ka * a[1] + kb * b[1] + kc * c[1] + kd * d[1]
];
}
return class BezierCurve {
constructor(a, b, c, d) {
this.a = a;
this.b = b;
this.c = c;
this.d = d;
}
split() {
const m = dot(l3, this);
return [
new BezierCurve(this.a, dot(l1, this), dot(l2, this), m),
new BezierCurve(m, dot(r1, this), dot(r2, this), this.d)
];
}
toString() {
return `M${this.a}C${this.b},${this.c},${this.d}`;
}
};
}
tree = d3.cluster()
.size([2 * Math.PI, radius - 100])
color = t => d3.interpolateRdBu(1 - t)
k = 6 // 2^k colors segments per curve
width = 954
radius = width / 3
d3 = require("d3@6")
// from https://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript?noredirect=1&lq=1
function toTitleCase(str) {
const articles = ["a", "an", "the"];
const conjunctions = ["for", "and", "nor", "but", "or", "yet", "so"];
const prepositions = [
"with",
"at",
"from",
"into",
"upon",
"of",
"to",
"in",
"for",
"on",
"by",
"like",
"over",
"plus",
"but",
"up",
"down",
"off",
"near"
];
// The list of spacial characters can be tweaked here
const replaceCharsWithSpace = (str) =>
str.replace(/[^0-9a-z&/\\]/gi, " ").replace(/(\s\s+)/gi, " ");
const capitalizeFirstLetter = (str) =>
str.charAt(0).toUpperCase() + str.substr(1);
const normalizeStr = (str) => str.toLowerCase().trim();
const shouldCapitalize = (word, fullWordList, posWithinStr) => {
if (posWithinStr == 0 || posWithinStr == fullWordList.length - 1) {
return true;
}
return !(
articles.includes(word) ||
conjunctions.includes(word) ||
prepositions.includes(word)
);
};
//str = replaceCharsWithSpace(str);
str = normalizeStr(str);
let words = str.split(" ");
if (words.length <= 2) {
// Strings less than 3 words long should always have first words capitalized
words = words.map((w) => capitalizeFirstLetter(w));
} else {
for (let i = 0; i < words.length; i++) {
words[i] = shouldCapitalize(words[i], words, i)
? capitalizeFirstLetter(words[i], words, i)
: words[i];
}
}
const str2 = words.join(" ");
words = str2.split("-");
words = words.map((w) => capitalizeFirstLetter(w));
return words.join("-");
}
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.
