chart = {
// Specify the chart’s dimensions.
const width = scale;
const height = width;
const cx = width * 0.5; // adjust as needed to fit
const cy = height * 0.5; // adjust as needed to fit
const radius = Math.min(width, height) / 2 + spread;
// Create a radial tree layout. The layout’s first dimension (x)
// is the angle, while the second (y) is the radius.
const tree = d3.tree()
.size([2 * Math.PI, radius])
//.separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);
.separation((a) =>1 / a.depth);
// Sort the tree and apply the layout.
let hier = d3.hierarchy(data)
.sort((a, b) => d3.ascending(a.data.name, b.data.name));
// Can you add an in between node to prolongue one ?
const addNode = (targetName) => {
// const targetName = "analytics"
const targetNode = hier.descendants().find(d=>d.data.name==targetName).copy();// .copy()
const emptyNode = d3.hierarchy({name:'', id:targetName});
hier.each(d=>{
if(d.children && d.children.find(e=>e.data.name == targetName)){
d.children = d.children.map(child => child.data.name == targetName ? emptyNode : child);
}
if(d.data.id==targetName){
d.children = [targetNode]
}
});
hier = d3.hierarchy(hier); // could do but need data.data... reformat
hier.each(d=>d.data = d.data.data)
}
console.log('---')
console.log(hier)
const leaves = hier.leaves();
const depths = leaves.map(leaf => leaf.depth);
const maxDepth = depths.sort().pop();
const lnames = leaves.map(leaf => leaf.data.name)
console.log(maxDepth);
const nodesToPush = [];
leaves.forEach(leaf =>{
if(leaf.depth < maxDepth && leaf.depth > limit) {
console.log('---')
// console.log(leaf)
// console.log(leaf.parent.parent.children)
// if parent have siblings that don't have grandchild, then push down grandparent.
// i.e. if you can find a grandchild in the parent's siblings, i.e. a cousin's children,
// then don't push grandparent
//if (leaf.parent.parent.children
// && ! leaf.parent.parent.children
// .find(parentSibling => parentSibling.children &&
// parentSibling.children.find(cousin => cousin.children)
// )
//) console.log(leaf); // nodesToPush.push(leaf.parent.parent);
//if (!leaf.parent.parent.descendants().find(node=>node.depth-leaf.parent.parent.depth>2)) nodesToPush.push(leaf.parent.parent)
// if siblings (parent.children) have a child, i.e. there are not leaves, then push down leaf
if (leaf.parent.children.find(child => child.children )) nodesToPush.push(leaf);
// if siblings have no child, then push parent with all siblings leaf.
else if (!nodesToPush.includes(leaf.parent)) nodesToPush.push(leaf.parent)
}
})
nodesToPush.forEach(node => {
addNode(node.data.name);
})
// Buiding the coordinates
const root = tree(hier);
console.log(root)
// Creates the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-cx, -cy, width, height])
.attr("style", "width: 100%; height: auto; font: 10px sans-serif;");
// Append links.
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll()
.data(root.links())
.join("path")
.attr("d", d3.linkRadial()
.angle(d => d.x)
.radius(d => d.y));
// Append nodes.
svg.append("g")
.selectAll()
.data(root.descendants())
.join("circle")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", d => d.data.name ? 2.5 : 0);
// Append labels.
svg.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll()
.data(root.descendants())
.join("text")
.attr("transform", d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) rotate(${d.x >= Math.PI ? 180 : 0})`)
.attr("dy", "0.31em")
.attr("x", d => d.x < Math.PI === !d.children ? 6 : -6)
.attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
.attr("paint-order", "stroke")
.attr("stroke", "white")
.attr("fill", "currentColor")
.text(d => d.data.name);
return svg.node();
}
doesItfitIn = (orbite_A, orbite_B) => {
// Does A fit in B ?
const holeOrbite_B = calculateHoles(orbite_B);
// every ranges has to fit into a hole
let itFits = true;
for (const range_A of orbite_A) {
const a = range_A[0];
const b = range_A[1];
// if we cannot find a range_Hole where it can fit // the set don't overlap !
if (!holeOrbite_B.find((range_H) => range_H[0] < a && b < range_H[1]))
itFits = false;
}
return itFits;
}
calculateHoles = (R) => {
// created by phind with the prompt :
// in javascript, let's say you have an array R of ranges. Ranges are represented by arrays of two number [x,y], where x < y. This give you an array R of arrays. All the number are bounded between 0 and 2pi.
// How do you calculate the "holes" in the array R, i.e. the complementary set of ranges that fill up the space in between the first set of ranges
R.sort((a, b) => a[0] - b[0]);
const holes = [];
let previous_end = 0;
for (const [start, end] of R) {
if (start > previous_end) {
holes.push([previous_end, start]);
}
previous_end = Math.max(previous_end, end);
}
if (previous_end < 2 * Math.PI) {
holes.push([previous_end, 2 * Math.PI]);
}
return holes;
}
data = hierarchy(await FileAttachment("flare.json").json())
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}`;
}
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}`;
}
};
}
color = t => d3.interpolateRdBu(1 - t)
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.
