pixel flipper, data sifter. trying to see what I can while I'm here
Plot.plot({
marks: [
Plot.link(nodes, {
x1: "x",
y1: "y",
x2: d => d.parent.data.name ? d.parent.x : d.x,
y2: d => d.parent.data.name ? d.parent.y : d.y,
stroke: "#eee",
}),
Plot.dot(nodes, { x: "x", y: "y", fill: "rootId", r: 3 }),
// Plot.rect(nodes, {
// x1: d => d.x - .005,
// y1: "y",
// x2: d => d.x + .006,
// y2: d => d.y + 0.2,
// // x2: d => d.parent.data.name ? d.parent.x : d.x,
// // y2: d => d.parent.data.name ? d.parent.y : d.y,
// stroke: "rootId",
// }),
Plot.text(nodes, {
x: "x",
y: "y",
text: (d) => d.data.name,
textAnchor: "start",
// rotate: (d) => (d.depth == 1 ? 0 : 90),
rotate: 90,
dx: 5,
fill: "rootId",
fontSize: 12
})
],
x: { axis: false },
y: { axis: false, reverse: true },
// color: { legend: true },
width: 1250,
// marginRight: 20,
marginBottom: 180,
height: 420,
inset: 20,
// facet: {
// data: nodes,
// x: "rootId"
// }
})
tree = d3.tree()(d3.hierarchy(data).count())
nodes = {
let nodes = tree.descendants().filter(d => d.data.name)
nodes.forEach(d => {
if(d.depth === 1) {
d.rootId = d.data.name
} else {
let a = d
while(a.parent.depth > 0) {
a = a.parent
}
d.rootId = a.data.name
}
})
return nodes
}
function treeify(source) {
const parents = [];
const nodes = source.trim().split(/\n/g);
parents.push({children: []});
for (let i = 0, n = nodes.length; i < n; ++i) {
const depth = nodes[i].match(/^\t*/)[0].length;
const parent = parents[depth];
if (!parent.children) parent.children = [];
parent.children.push(parents[depth + 1] = {name: nodes[i].slice(depth)});
}
return parents[0];
}
// nodes = tree.descendants()
partition = data => d3.partition()
.size([2 * Math.PI, radius])
(d3.hierarchy(data).count())
color = d3.scaleOrdinal().range(d3.quantize(d3.interpolateRainbow, data.children.length + 1))
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.
