chart = {
const root = d3.hierarchy(data);
root.x0 = width / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth) d.children = null;
});
const svg = d3.create("svg")
.attr("viewBox", [-margin.left, -margin.top, width, dx])
.style("font", "10px sans-serif")
.style("user-select", "none");
const gLink = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555");
const gNode = svg.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update_value(d) {
if (d.children == null)
{
d.data._value = d.data.value;
}
else
{
d.data._value = d.data.value - d3.sum(d.children.map(u => u.data.value));
d.children.forEach(u => {update_value(u); });
}
}
function update(source) {
const duration = d3.event && d3.event.altKey ? 2500 : 250;
const nodes = root.descendants().reverse();
const links = root.links();
// Compute the new tree layout.
tree1(root);
let left = root;
let right = root;
root.eachBefore(node => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
function one_click(event, d) {
d.children = d.children ? null : d._children;
update(d);
}
function showimg(x) {
x.filter(d => d.data.name > 1)
.append("image")
.attr("width", 40)
.attr("height", 50)
.attr("href", d => d.data.name)
.attr("x", function() {
return radius * (2.2 * 3 + 0.5);
})
.attr("y", function() {
return -radius;
})
.attr("height", radius * 2)
.attr("width", radius * 2).on("click", one_click);
for(var i = 2; i >= 0; i--)
{
x.filter(d => d.data.name > i)
.append("image")
.attr("width", 40)
.attr("height", 50)
.attr("href", d => d.data.name)
.attr("x", function() {
return radius * (2.2 * i + 0.5);
})
.attr("y", function() {
return -radius;
})
.attr("height", radius * 2)
.attr("width", radius * 2)
.on( 'mouseenter', function() {
// select element in current context
d3.select( this )
.transition()
.attr("height", radius * 6)
.attr("width", radius * 6).raise();
})
.on( 'mouseleave', function() {
d3.select( this )
.transition()
.attr("height", radius * 2)
.attr("width", radius * 2).lower();
});
// .on('click', function() {
// click_scatter();
// var this_x = d3.select( this ).attr("x");
// var this_y = d3.select( this ).attr("y");
// d3.select("#scatter").attr("x", this_x)
// .attr("y", left.x - margin.top)
// });
}
}
const height = right.x - left.x + margin.top + margin.bottom;
const transition = svg.transition()
.duration(duration)
.attr("viewBox", [-margin.left, left.x - margin.top, width, height])
.tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle"));
// Update the nodes…
const node = gNode.selectAll("g")
.data(nodes, d => d.id);
const node_no_img = node.filter(d => d.data._value == 0);
const node_has_img = node.filter(d => d.data._value == 0);
// Enter any new nodes at the parent's previous position.
const nodeEnter = node.enter().append("g")
.attr("transform", d => `translate(${source.y0},${source.x0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
update_value(root);
node.selectAll("text").text(d => d.data.name);
showimg(node_no_img);
//node_has_img.filter(d => d.data.name == 0).selectAll("image").remove();
nodeEnter.append("circle")
.attr("r", 5)
.attr("fill", d => d._children ? "#333" : "#999")
.attr("stroke-width", 10).on("click", one_click);
nodeEnter.append("text")
.attr("dy", "0.31em")
.attr("x", d => -6)
.attr("text-anchor", d => "end")
.attr("font-size", 9)
.text(d => d.data.name).on("click", one_click)
.clone(true).lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
showimg(nodeEnter);
// Transition nodes to their new position.
const nodeUpdate = node.merge(nodeEnter).transition(transition)
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
// Transition exiting nodes to the parent's new position.
const nodeExit = node.exit().transition(transition).remove()
.attr("transform", d => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
// Update the links…
const link = gLink.selectAll("path")
.data(links, d => d.target.id);
// Enter any new links at the parent's previous position.
const linkEnter = link.enter().append("path")
.attr("stroke-width", d => 1 + d.target.data.value / 5)
.attr("stroke-opacity", d => 0.1 + 0.9 * d.target.data.value / 5)
.attr("d", d => {
const o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.merge(linkEnter).transition(transition)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition(transition).remove()
.attr("d", d => {
const o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
});
// Stash the old positions for transition.
root.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}
update(root);
return svg.node();
}
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
tree1 = root => {
root.dx = dx;
root.dy = width / (root.height + 1) - radius;
return d3.cluster().nodeSize([root.dx, root.dy])(root);
}
data = FileAttachment("soccer.json").json()
// data = FileAttachment("page[1]-ordered@5.json").json()
dots = FileAttachment("Logo_dotdotdot_400x400.jpeg").url()
dx = 50
radius = (dx) / 2.5
a = d3.hierarchy(data).descendants().map(d => d.height);
margin = ({top: dx / 2, right: 10, bottom: dx * 2, left: 40})
d3 = require("d3@6")
d3_5 = require("d3@5")
soccer = FileAttachment("soccer.json").json()
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.
