I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Public
Edited
Mar 15, 2024
Paused
3 forks
Importers
2 stars
chart = ForceHulls(
{ nodes: graph.nodes.slice(0, n), links: graph.links },
{
width,
groupBy: (d) => d.group,
chargeStrength: -100,
disjoint: disjoint,
animate: animate,
this: this, // provide this and invalidation to support better animations
invalidation
}
)
fadeInJoin({element: "circle", o: {animate: true}})
function ForceHulls(
graph, // { nodes, links, clusters /* Map of Arrays for hulls */ }
options = {}
) {
let o = {
groupBy: (d) => d.group,
nodeSize: 25,
height: 500,
width: 800,
hullPadding: 5,
showGroupingNodes: false,
hullColor: d3.scaleOrdinal(d3.schemeCategory10),
fontSize: 6,
clipLabels: true,
minDegree: 0,
useImages: true,
sizeBy: (d) => d.degree,
id: (d) => d.id,
labelBy: (d, i) => d.id,
lineWidth: 1.3,
title: "",
invalidation: null,
this: null,
chargeStrength: null, // If provided sets the fixed charge strength for all nodes
maxCharge: -200, // If chargeStrength is null, this value will be use to assign the charge strength proportionally to the radius and with this maxCharge strength value
photoBy: (d) => d.photo,
photoMargin: 2,
centerStrength: 0.1,
linkStrength: 0.15,
linkDistance: 5,
disjoint: false,
tipcontent: null, // Provide a function that returns html for the tooltip
warmUpTicks: 100,
drawHulls: true,
transitionDuration: 500,
animate: false,
...options
};
let visibleNodes = new Map(graph.nodes.map((d) => [o.id(d), d]));
let clusters = [];
if (o.drawHulls) {
if (graph.clusters) {
clusters = graph.clusters;
} else {
clusters = d3.group(graph.nodes, (d) => ("" + o.groupBy(d)).trim());
}
}
const filteredClusters = filterClustersFromNodes({
clusters,
visibleNodes,
id: o.id
});
const filteredLinks = filterLinksFromNodes({
links: graph.links,
visibleNodes,
id: o.id
});
console.log( "filtered Links", filteredLinks);
const chargeScale = d3
.scalePow()
.exponent(1.5)
.domain([1, 30])
.range([-0.1, o.maxCharge]);
o.chargeStrength = o.chargeStrength || ((d) => chargeScale(d.r));
const svg = o.this ? d3.select(o.this).select("svg") : d3.create("svg");
svg.append("defs").append("style").text(`
circle.highlight { stroke: red; stroke-width: 2px; }
`);
const target = htl.html`<div>
<h2>${o.title}</h2>
${svg.node()}
</div>`;
svg
.attr("width", o.width + "px")
.attr("height", o.height + "px")
.attr("viewBox", [0, 0, o.width, o.height])
.attr(
"style",
// "max-width: 100%; height: auto; height: intrinsic; overflow: visible",
"overflow: visible"
);
const r = d3
.scalePow()
.domain([0, d3.max(graph.nodes, o.sizeBy)])
.range([o.nodeSize / 2, o.nodeSize * 2]);
graph.nodes.map((d) => (d.r = o.sizeBy(d) ? r(o.sizeBy(d)) : r.range()[0]));
const collision = d3.forceCollide((d) => d.r + 2).iterations(4);
const simulation = d3
.forceSimulation(graph.nodes)
.force(
"link",
d3
.forceLink(filteredLinks)
.id((n) => o.id(n))
.distance(o.linkDistance)
.strength(o.linkStrength)
)
.force("charge", d3.forceManyBody().strength(o.chargeStrength));
// Accelerate the simulation the first time
if (!o.this) {
simulation.alpha(3);
} else {
simulation.alpha(1);
}
if (o.disjoint) {
simulation
.force("x", d3.forceX(o.width / 2).strength(o.centerStrength))
.force(
"y",
d3
.forceY(o.height / 2)
.strength((o.centerStrength * 0.7 * width) / o.height)
);
} else {
simulation.force("center", d3.forceCenter(width / 2, o.height / 2));
}
// -------- HULLS ---------
const { hull, getHull } = drawHull({ o, svg, graph, filteredClusters });
// -------- LINKS ---------
const link = drawLinks({ graph, o, svg, filteredLinks });
// -------- NODES ---------
const node = drawNodes({ svg, graph, simulation, o, filteredClusters });
// -------- LABELS ---------
const label = createLabels({
svg,
_data: graph.nodes.filter(
(d) =>
// d.type !== "Connection" ? d.degree >= o.minDegree : 0
d.type !== "Connection"
),
className: "nodeLabel",
o
});
// ---------- IMAGES ---------------
const images = drawImages({ svg, graph, simulation, o });
// --------- Group Labels ------------
const labelDepts = createLabels({
svg,
_data: graph.nodes.filter((d) => d.type === "Connection"),
className: "connectionLabel",
o
});
// --------- Tooltips ---------------
const hoverOptions = { raise: false, r: r.range()[1], svg };
if (o.tipcontent) hoverOptions.tipcontent = o.tipcontent;
const hoverObj = hover(node, invalidation, hoverOptions);
function ticked() {
link
// .transition()
// .duration(o.transitionDuration)
// .attr("display", simulation.alpha() <= 0.1 ? "block" : "none")
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);
label
.classed("shadow", simulation.alpha() <= 0.1)
// .transition()
// .duration(o.transitionDuration)
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
labelDepts
.classed("shadow", simulation.alpha() <= 0.1)
// .transition()
// .duration(o.transitionDuration)
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
node
.classed("shadow", simulation.alpha() <= 0.1)
// .transition(t)
// .duration(o.transitionDuration)
.attr("transform", (d) => `translate(${d.x}, ${d.y})`);
// .attr("cx", (d) => d.x)
// .attr("cy", (d) => d.y)
o.useImages &&
images
// .transition()
// .duration(o.transitionDuration)
// .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
.attr("x", (d) => d.x)
.attr("y", (d) => d.y);
hull.attr("d", getHull);
// Update the binary tree for the tooltip;
hoverObj.reset();
// collide only at the end of the simulation
simulation.force("collide", simulation.alpha() <= 0.5 ? collision : null);
}
simulation.stop();
simulation.on("tick", ticked);
for (let i = 0; i < o.warmUpTicks; i++) {
simulation.tick();
}
simulation.restart();
// For when no invalidation is passed
const _invalidation = o.invalidation || invalidation;
_invalidation.then(() => {
simulation.stop();
});
ticked();
target.clusters = filteredClusters;
return target;
}
// ----------- Drag ----------------
function drag(simulation) {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
// ----------- /Drag ----------------
// To be used with selection.join to generate a fade in effect
fadeInJoin = ({ element, o, opacity = 1 } = {}) => o.animate ? [
(enter) => {
const ele = enter.append(element).style("opacity", 0);
ele
.transition()
.delay((_, i, all) => (i * o.transitionDuration) / all.length)
.duration(1000)
.style("opacity", opacity);
return ele;
},
(update) => update,
(exit) =>
exit
.transition()
.duration(o.transitionDuration)
.style("opacity", 0)
.remove()
] : [element]
function drawNodes({ svg, graph, simulation, o, filteredClusters }) {
const nodeG = svg
.selectAll("g#gNodes")
.data([0])
.join("g")
.attr("id", "gNodes");
const node = nodeG
.selectAll("circle")
.data(
graph.nodes.filter(
(d) => o.showGroupingNodes || d.type !== "Connection" // hide grey nodes
),
(n) => o.id(n)
)
.join(...fadeInJoin({ element: "circle", o }))
.attr("fill", (d) =>
d.type === "Connection"
? "#999"
: o.hullColor(
getFirstMatchInMap({ map: filteredClusters, query: d, id: o.id })
)
)
// .attr("stroke", "black")
.attr("stroke-opacity", 1)
.attr("stroke-width", 1)
.attr("r", (d) => d.r)
.call(drag(simulation));
return node;
}
function drawLinks({ graph, o, svg, filteredLinks }) {
const linkG = o.this
? svg.select("g#gLinks")
: svg.append("g").attr("id", "gLinks");
const link = linkG
.attr("stroke", "#999a")
.attr("stroke-opacity", 1)
.attr("stroke-width", 0.5)
.attr("stroke-linecap", "round")
.selectAll("line.link")
.data(
filteredLinks.filter(
(d) => o.showGroupingNodes || d.target.type !== "Connection"
),
(d) => `${o.id(d.source)}-${o.id(d.target)}`
)
.join(...fadeInJoin({element: "line", o}))
.attr( "class", "link")
.style("pointer-events", "none");
return link;
}
function drawHull({ o, svg, graph, filteredClusters }) {
const area = d3.line().curve(d3.curveCatmullRomClosed);
const hp = o.hullPadding;
const getHull = (d) => {
const points = d[1]
.filter((d) => o.showGroupingNodes || d.type !== "Connection")
.map((n) => [
[n.x - (n.r + hp), n.y],
[n.x + n.r + hp, n.y],
[n.x, n.y + n.r + hp],
[n.x, n.y - (n.r + hp)]
])
.flat();
const hull = d3.polygonHull(points);
return hull && area(hull);
};
const hullG = o.this
? svg.select("g#gHulls")
: svg.append("g").attr("id", "gHulls");
const hull = hullG
.selectAll("path.hull")
.data(filteredClusters, (d) => d[0])
.join(...fadeInJoin({ element: "path", opacity: 0.3, o }))
.attr("class", "hull")
.attr("fill", (d) => o.hullColor(d[0]))
.attr("opacity", 0.3)
.attr("pointer-events", "none");
return { hull, getHull };
}
function createLabels({ svg, _data, className = "nodeLabel", o }) {
const gLabel = svg
.selectAll(`g#gLabel_${className}`)
.data([0])
.join("g")
.attr("id", `gLabel_${className}`);
const getNameArray = (d, i, all) => {
const label = d.type === "Connection" ? d._id : o.labelBy(d, i, all);
return d.nameArray
? d.nameArray
: label && typeof label.split === "function"
? label.split(" ")
: [label];
};
// 1.8 for each line, but then move back for centering on y
const fontSizeFn = (d) => o.fontSize * (d.type !== "Connection" ? 1 : 1.8);
return (
gLabel
.selectAll(`text.${className}`)
.data(_data, o.id)
.join(...fadeInJoin({ element: "text", o }))
.attr("class", className)
// .attr("text-align", "center")
.attr("text-anchor", "middle")
// // .attr("x", (d) => d.r)
.attr(
"y",
(d, i, all) =>
-(getNameArray(d, i, all).length / 2) * fontSizeFn(d) + "px"
)
.attr("font-size", (d) => `${fontSizeFn(d)}pt`)
.attr("font-weight", (d) =>
d.type !== "Connection" ? "light" : "bolder"
)
.attr("font-family", "Oswald")
.attr("pointer-events", "none")
// .style("clip-path", (d) =>
// o.clipLabels && d.type !== "Connection" ? `circle(closest-side)` : ""
// )
.style("clip-path", (d) =>
o.clipLabels && d.type !== "Connection"
? `circle(${d.r - o.photoMargin}px at 50% 50%)`
: ""
)
// .text(id);
.each(function (d) {
return (
d3
.select(this)
.selectAll("tspan")
.data(getNameArray)
.join("tspan")
.attr("x", 0)
.attr("dy", fontSizeFn(d) + "px")
// .attr("dy", "2.1ch")
.text((n) => n)
);
})
);
}
function drawImages({svg, graph, simulation, o}) {
const gImages = svg
.selectAll("g#gImages")
.data([0])
.join("g")
.attr("id", "gImages");
return gImages
.selectAll("image")
.data(
o.useImages
? graph.nodes.filter(
(d) =>
d.type !== "Connection" &&
o.photoBy(d)
// && d.photo.toUpperCase().indexOf("JPG") !== -1
)
: [],
o.id
)
.join(...fadeInJoin({element: "image", o}))
.attr("href", o.photoBy)
.attr("width", (d) => d.r * 2 - o.photoMargin)
.attr("height", (d) => d.r * 2 - o.photoMargin)
// .attr("stroke", "black")
.attr("preserveAspectRatio", "xMidYMid slice")
.attr("transform", (d) => `translate(-${d.r - o.photoMargin/2}, -${d.r - o.photoMargin/2})`)
.style("clip-path", (d) => `circle(${d.r - o.photoMargin/2}px)`)
.style("pointer-events", "none")
.call(drag(simulation));
}
// Searches in a Map of Arrays for the first occurance of a value using an id function
function getFirstMatchInMap({ map, query, id }) {
for (let [eleKey, eleNodes] of map) {
for (let n of eleNodes) {
if (id(n) === id(query)) return eleKey;
}
}
return null;
}
function filterClustersFromNodes({clusters, visibleNodes, id}) {
let filteredMap = new Map();
for (let [eleKey, eleNodes] of clusters) {
const filteredNodes = eleNodes.filter(n => visibleNodes.has(id(n)));
if (filteredNodes.length>0) {
filteredMap.set(eleKey, filteredNodes);
}
}
return filteredMap;
}
function filterLinksFromNodes({ links, visibleNodes, id }) {
const idIfObject = (d) => (typeof d === "string" ? d : id(d));
return links.filter(
({ source, target }) =>
visibleNodes.has(idIfObject(source)) &&
visibleNodes.has(idIfObject(target))
);
}
graph = FileAttachment("miserables.json").json()
import {hover, link} with {tippytheme} from "@john-guerra/hello-tippy"
link
tippytheme = "light"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.