Forgive my blunt objectivity but I’ve spent the last 3 hours trying to understand why when it takes less than 100 lines of pure JavaScript to create a Tidy Chart it takes 5 separate dependency files to achieve the same with Observable.
Allow me to show you a working example of a Tidy Chart in 81 lines of code. Single html file with a single link to flare-2.json.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
// d3.json returns a Promise, so we have to use .then()
// also, used a web-accessible link
var data = d3.json("http://127.0.0.1/tidy-tree/flare-2.json").then(data => {
var width = 1200;
var tree = data => {
const root = d3.hierarchy(data);
root.dx = 10;
root.dy = width / (root.height + 1);
return d3.tree().nodeSize([root.dx, root.dy])(root);
};
// attach chart to HTML body
d3.select("body").append(() => chart(tree, data, width));
});
function chart(tree, data, width) {
const root = tree(data);
let x0 = Infinity;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);
const g = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);
const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x));
const node = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.text(d => d.data.name + " (" + d.data.value + ")")
.clone(true).lower()
.attr("stroke", "white");
return svg.node();
};
</script>
</body>
</html>
Why don’t we get examples like this, no one really knows.
I need to know how to get the Indented-Tree Observable and convert it to D3.js just like the code example above.
I learn by breaking things and then making them better. I need examples. Then once I learn them, I can create an Observable in order to waste someone else’s time who’s just trying to learn about the keyword they’ve typed in Google to inevitably get to this page.
I’ve read a thread on here that had to be closed after countless comments on how D3.js library code examples are nested with Observable code in every way there is.
