chart = {
const divtooltip = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
const root = d3.hierarchy(data);
root.x0 = dy / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth && d.data.name.length !== 4) d.children = null;
//if (d.data.name.length !== 4) d.children = null;
});
const svg = d3
.create("svg")
.attr("id", "svg")
.attr("width", width)
//.attr("height", dx)
.attr("viewBox", [-margin.left, -margin.top, width, dx])
.style("font", "14px sans-serif")
.style("user-select", "none");
const forest = svg.append("g").attr("id", "forest");
const gLink = forest
.append("g")
.attr("id", "branches")
.attr("fill", "none")
.attr("stroke", "grey")
.attr("stroke-width", 0.4);
const gNode = forest
.append("g")
.attr("cursor", "pointer")
.attr("id", "feuilles");
function update(source) {
// two speed for the transition
const duration = d3.event && d3.event.altKey ? 1500 : 250;
const nodes = root.descendants().reverse();
//nodes.forEach(function(d) { d.y = d.depth * 230 + 120 ; });
const links = root.links();
// Compute the new tree layout.
tree(root);
let left = root;
let right = root;
root.eachBefore(node => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
const height = right.x - left.x + margin.top + margin.bottom;
const transition = svg
.transition()
.duration(duration)
.attr("height", height)
.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);
// 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)
.on("click", d => {
d.children = d.children ? null : d._children;
update(d);
if (!d.parent) {
d3.select("#svg").attr("transform", "translate(0,0) scale(1)");
d3.select("#forest").attr("transform", "translate(0,0) scale(1)");
d3.select("#feuilles").attr("transform", "translate(0,0) scale(1)");
d3.select("#branches").attr("transform", "translate(0,0) scale(1)");
}
});
nodeEnter
.append("circle")
.attr("r", function(d) {
if (!d.parent) {
return 16;
} else if (d.data.topicid || d.data.catid) {
if (20 - 20 / d.data.nbarticle < 1) {
return 4;
} else {
return 20 - 20 / d.data.nbarticle;
}
} else if (d.data.sujets) {
if (20 - 20 / d.data.sujets < 1) {
return 4;
} else {
return 20 - 20 / d.data.sujets;
}
} else return 4;
})
.attr("fill", function(d) {
if (d._children) return bs_color.bs_blue;
else if (d.data.topicid || d.data.catid) {
if (d.data.nbarticle) {
var co = 20 - 20 / d.data.nbarticle;
return colorrange[Math.round(co)];
} else return "white";
} else if (d.data.sujets) {
var co = 20 - 20 / d.data.sujets;
return colorrange[Math.round(co)];
} else return "white";
})
.attr("stroke", d => (d._children ? bs_color.bs_blue : "grey"))
.attr("stroke-width", d => (d._children ? "2" : "0.5"))
.on("mouseover", d => {
if (d.data.nbarticle || d.data.sujets) {
divtooltip
.transition()
.duration(200)
.style("opacity", .8);
if (d.data.nbarticle) {
divtooltip
.html(`<div class="tooltip-inner">${d.data.nbarticle}</div>`)
.style("left", d3.event.pageX - 40 + "px")
.style("top", d3.event.pageY - 8 + "px");
} else if (d.data.sujets) {
divtooltip
.html(`<div class="tooltip-inner">${d.data.sujets}</div>`)
.style("left", d3.event.pageX - 40 + "px")
.style("top", d3.event.pageY - 8 + "px");
}
}
})
.on("mouseout", d => {
divtooltip
.transition()
.duration(1500)
.style("opacity", 0);
});
nodeEnter
.append("a")
.attr("xlink:href", function(d) {
return d.data.url;
})
.append("text")
.attr("dy", "0.28em")
.attr("x", d => (d._children ? -9 : 24))
.attr("text-anchor", d => (d._children ? "end" : "start"))
.text(d => (!d.parent ? '' : d.data.name))
.attr("fill", d => (d.data.url ? colorrange[29] : 'grey'))
.on("mouseover", function(d) {
if (d.data.url) d3.select(this).style("fill", "#0056b3");
})
.on("mouseout", function(d) {
if (d.data.url) d3.select(this).style("fill", bs_color.bs_blue);
})
.clone(true)
.lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 6)
.attr("stroke", "white");
// 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("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);
const zoom = d3
.zoom()
.scaleExtent([0.5, 1])
.on("zoom", () => {
gNode.attr("transform", d3.event.transform);
gLink.attr("transform", d3.event.transform);
forest.attr("transform", d3.event.transform);
svg.attr("transform", d3.event.transform);
});
svg
.call(zoom)
.on("dblclick.zoom", null)
.on("wheel", function() {
d3.event.preventDefault();
});
return svg.node();
}
dx = width / 24
dy = width / 3.8
bscolor = [
"#007bff",
"#6610f2",
"#6f42c1",
"#e83e8c",
"#dc3545",
"#fd7e14",
"#ffc107",
"#28a745",
"#20c997",
"#17a2b8",
"#fff",
"#6c757d",
"#343a40",
"#007bff",
"#6c757d",
"#28a745",
"#17a2b8"
]
bs_color = ({
bs_blue: "#007bff",
bs_indigo: "#6610f2",
bs_purple: "#6f42c1",
bs_pink: "#e83e8c",
bs_red: "#dc3545",
bs_orange: "#fd7e14",
bs_yellow: "#ffc107",
bs_green: "#28a745",
bs_teal: "#20c997",
bs_cyan: "#17a2b8",
bs_white: "#fff",
bs_gray: "#6c757d",
bs_gray_dark: "#343a40",
bs_primary: "#007bff",
bs_secondary: "#6c757d",
bs_success: "#28a745",
bs_info: "#17a2b8",
bs_warning: "#ffc107",
bs_danger: "#dc3545",
bs_light: "#f8f9fa",
bs_dark: "#343a40"
})
d3 = require("https://d3js.org/d3.v5.min.js")
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.
