Public
Edited
Feb 23, 2022
Importers
chart = {
const offSet = 0;
const off = 38;
const strokeWidth = 2;
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", 10)
.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))
.attr("text-anchor", (d) => (d.x < Math.PI ? "start" : "end"))
.attr("transform", (d) => (d.x >= Math.PI ? "rotate(180)" : null))
.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 + " : " + d.data.content;
} 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.content + " : " + d.data.num;
} else return d.data.content;
}
});
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("d", (d) => d.join(""));
return svg.node();
}
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}`;
}
};
}
line = d3.lineRadial()
.curve(d3.curveBundle)
.radius(d => d.y)
.angle(d => d.x)
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 * 1.3
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.
