Published
Edited
Aug 4, 2020
1 fork
7 stars
chart = {
const treeData = transformToTree(data)[0]
const root = d3.hierarchy(treeData);
root.x0 = dx / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
//if (d.depth && d.data.nodeid.length !== 7) d.children = null;
});
const svg = d3.create("svg")
.attr('width', width)
.attr('height', width/2)
//.attr("viewBox", [-margin.left, -margin.top, width, dx])
.style("font", "10px sans-serif")
.style("user-select", "none");
const g = svg.append('g')
.attr('transform', `translate(${width/2}, 40)`)
const gLink = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = g.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update(source, idx) {
const duration = d3.event && d3.event.altKey ? 2500 : 250;
const nodes = root.descendants().reverse();
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("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.person")
.data(nodes, d => d.id);
// Enter any new nodes at the parent's previous position.
const nodeEnter = node.enter().append("g")
.attr('class', 'person')
.attr("transform", d => `translate(${source.x0},${source.y0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
.on("click", d => {
d.children = d.children ? null : d._children;
update(d, idx);
});
nodeEnter.append('g')
.filter(d=> !d.children)
.each(function (d) {
drawStripPlot(
d3.select(this),
d.data.sessions
)
})
nodeEnter.append("circle")
.attr("r", 8)
.attr("fill", d => d._children ? "#555" : "#999")
.attr("stroke-width", 10);
nodeEnter.append("text")
.attr("y", 0)
.attr("x", 0)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("fill", "white")
.text(d => d.data.desknumber)
nodeEnter.append("text")
.attr("y", -20)
.attr("x", 0)
.attr("text-anchor", "middle")
.text(d => d.data.firstname)
.clone(true).lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
nodeEnter.append("text")
.attr("y", -10)
.attr("x", 0)
.attr("text-anchor", "middle")
.text(d => d.data.lastname)
.clone(true).lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.attr("stroke", "white");
// Transition nodes to their new position.
const nodeUpdate = node.merge(nodeEnter).transition(transition)
.attr("transform", d => `translate(${d.x},${d.y})`)
.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.x},${source.y})`)
.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;
});
idx += 1
}
update(root, 0);
return svg.node();
}
data = await FileAttachment("data.json").json()
function drawStripPlot(nodeElement, data) {
const yScale = d3.scaleTime()
.domain([new Date(2020, 7, 0), new Date(2020, 7, 31)])
.range([20, 120])
const nodeData = nodeElement.selectAll("g").data(data)
const nodesEnter = nodeData.enter().append("g")
.attr('class', "node-group")
.attr("id", (d, i) => "node-group-" + i)
nodesEnter
.append("line")
.attr('id', (d) => d.id)
.attr("y1", function(d,i) { return yScale(d.start); })
.attr("y2", function(d) { return yScale(d.end); })
.attr("x1", 0)
.attr("x2", 0)
.style("stroke", "#cc0000")
.style("stroke-width", 12)
.style("opacity", 0.4)
nodeElement
.append("line")
.attr("class", "bg")
.attr("y1", function(d,i) { return yScale(new Date(2020, 7, 0)); })
.attr("y2", function(d) { return yScale(new Date(2020, 7, 31)); })
.attr("x1", 0)
.attr("x2", 0)
.style("stroke", "lightgrey")
.style("stroke-width", 12)
.style("opacity", 0.4)
}
function transformToTree(data) {
var dataMap = data.reduce(function(map, node) {
map[node.nodeid] = node;
return map;
}, {});
// create the tree array
var treeData = [];
data.forEach(function(node) {
// add to parent
node.sessions = createSessions()
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
} else {
// parent is null or missing
treeData.push(node);
}
});
return treeData
}
function createSessions() {
let sessions = []
d3.range(0, getRandomInt(5)).map((d,i)=>{
let day = getRandomInt(30)
sessions.push({
id: i,
start: new Date(2020, 7, day),
end: new Date(2020, 7, day + getRandomInt(7))
})
})
return sessions
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
diagonal = d3.linkVertical().x(d => d.x).y(d => d.y)
tree = d3.tree().nodeSize([dx, dy])
dx = 35
dy = 70
margin = ({top: 10, right: 120, bottom: 10, left: 40})
d3 = require("d3@5")
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.
