Network chart / Carolinewwx

rawData = d3.csv(await FileAttachment("employee_2185_billing_updated.csv").url(), d3.autoType)

projectsData = d3.csv(await FileAttachment("projects_cleaned.csv").url(), d3.autoType)

projectSummary = Array.from(

d3.rollups(

rawData.filter(d => d.employee_id === 2185),

v => ({

total_hours: d3.sum(v, d => d.regular_hours),

Category: v[0].Category

}),

d => String(d.project_key)

),

([project_key, val]) => ({ project_key, ...val })

)

// Node list: one employee + one node for each project

nodes = [

{ id: "Employee 2185", label: "Employee 2185", group: "employee" },

...projectSummary.map(d => ({

id: d.project_key,

label: "Project " + d.project_key,

group: "project",

project_type: projectsData.find(p => String(p.project_key) === d.project_key)?.project_type || "Unknown"

}))

]

// Link list: one link from employee to each project

links = projectSummary.map(d => ({

source: "Employee 2185",

target: d.project_key

}))

tooltip = (() => {

const div = document.createElement("div");

div.style.position = "absolute";

div.style.visibility = "hidden";

div.style.background = "#fff";

div.style.border = "1px solid #ccc";

div.style.padding = "8px";

div.style.fontSize = "12px";

div.style.maxWidth = "300px";

div.style.boxShadow = "0 2px 6px rgba(0,0,0,0.2)";

div.style.pointerEvents = "none";

div.style.zIndex = "1000";

document.body.appendChild(div); // ✅ Insert into the page

return div;

})();

employeeProjectGraph = {

const width = 1000;

const height = 700;

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height);

// Extract unique project types for coloring

const allTypes = Array.from(new Set(

nodes.filter(d => d.group === "project").map(d => d.project_type)

));

const color = d3.scaleOrdinal()

.domain(["employee", ...allTypes])

.range(["#e74c3c", ...d3.schemeSet3]);

// Force-directed simulation

const simulation = d3.forceSimulation(nodes)

.force("link", d3.forceLink(links).id(d => d.id).distance(160))

.force("charge", d3.forceManyBody().strength(-300))

.force("center", d3.forceCenter(width / 2, height / 2));

// Create lines for links

const link = svg.append("g")

.selectAll("line")

.data(links)

.join("line")

.attr("stroke", "#aaa");

// Create circles for nodes

const node = svg.append("g")

.selectAll("circle")

.data(nodes)

.join("circle")

.attr("r", 10)

.attr("fill", d => d.group === "employee" ? color("employee") : color(d.project_type || "Unknown"))

.call(d3.drag()

.on("start", dragstarted)

.on("drag", dragged)

.on("end", dragended));

node.append("title").text(d => d.label);

// Show tooltip when project node is clicked

node.on("click", (event, d) => {

event.stopPropagation();

tooltip.style.visibility = "hidden";

if (d.group === "project") {

const details = rawData.filter(r => String(r.project_key) === d.id);

const project = projectsData.find(p => String(p.project_key) === d.id);

let content = "";

if (project) {

content += `

<div><strong>Branch:</strong> ${project.branch_id}</div>

<div><strong>Leader:</strong> ${project.project_leader}</div>

<div><strong>Coordinator:</strong> ${project.project_coordinator}</div>

<div><strong>Type:</strong> ${project.project_type}</div>

<div><strong>Status:</strong> ${project.status}</div>

<div><strong>Source:</strong> ${project.source}</div>

<hr/>

`;

}

if (details.length) {

content += details.map(item => `

<div><strong>Date:</strong> ${item.transfer_date} |

<strong>Hours:</strong> ${item.regular_hours}</div>

<div><strong>Comment:</strong> ${item.comment}</div>

<hr/>

`).join("");

}

tooltip.innerHTML = `<strong style="font-size:14px;">${d.label}</strong><br/><br/>${content}`;

tooltip.style.top = event.clientY + 10 + "px";

tooltip.style.left = event.clientX + 10 + "px";

tooltip.style.visibility = "visible";

}

});

// Hide tooltip when clicking on empty space

svg.on("click", () => {

tooltip.style.visibility = "hidden";

});

// Update positions on each tick

simulation.on("tick", () => {

link

.attr("x1", d => d.source.x)

.attr("y1", d => d.source.y)

.attr("x2", d => d.target.x)

.attr("y2", d => d.target.y);

node

.attr("cx", d => d.x)

.attr("cy", d => d.y);

});

// Dragging functions

function dragstarted(event, d) {

if (!event.active) simulation.alphaTarget(0.3).restart();

d.fx = d.x;

d.fy = d.y;

}

function dragged(event, d) {

d.fx = event.x;

d.fy = event.y;

}

function dragended(event, d) {

if (!event.active) simulation.alphaTarget(0);

d.fx = null;

d.fy = null;

}

// Legend

const legend = svg.append("g").attr("transform", `translate(${width - 220}, 20)`);

allTypes.forEach((type, i) => {

const g = legend.append("g").attr("transform", `translate(0, ${i * 20})`);

g.append("rect").attr("width", 12).attr("height", 12).attr("fill", color(type));

g.append("text").attr("x", 18).attr("y", 10).text(type).style("font-size", "12px");

});

return svg.node();

}

Purpose-built for displays of data