Founding Sisters / Founders NLP

Type Table, then Shift-Enter. Ctrl-space for more options.

data = d3.csv(await FileAttachment("founders_metadata - Founding Sisters.csv").url())

// Get unique people from both source and target

people = Array.from(new Set(data.flatMap(d => [d.source, d.target])))

nodes = people.map(name => {

// Find a gender label if this person is ever a sender

const match = data.find(d => d.source === name)

return {

id: name,

gender: match ? match.gender : "N/A"

}

})

links = data.map(d => ({

source: d.source,

target: d.target,

weight: +d.weight

}))

networkChart = {

const width = 800;

const height = 600;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("width", width)

.attr("height", height)

.call(

d3.zoom()

.scaleExtent([0.1, 10])

.on("zoom", (event) => {

g.attr("transform", event.transform);

})

);

const g = svg.append("g");

// Log scale with smaller stroke range

const weightScale = d3.scaleLog()

.domain(d3.extent(links, d => d.weight))

.range([0.2, 2]); // smaller max width for better readability

const simulation = d3.forceSimulation(nodes)

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

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

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

// Arrow markers

svg.append("defs").append("marker")

.attr("id", "arrow")

.attr("viewBox", "0 -5 10 10")

.attr("refX", 15)

.attr("refY", 0)

.attr("markerWidth", 4)

.attr("markerHeight", 4)

.attr("orient", "auto")

.append("path")

.attr("d", "M0,-5L10,0L0,5")

.attr("fill", "#999");

// Links

const link = g.append("g")

.attr("stroke", "#999")

.attr("stroke-opacity", 0.5)

.selectAll("line")

.data(links)

.join("line")

.attr("stroke-width", d => weightScale(d.weight))

.attr("marker-end", "url(#arrow)");

// Nodes

const node = g.append("g")

.attr("stroke", "#fff")

.attr("stroke-width", 1)

.selectAll("circle")

.data(nodes)

.join("circle")

.attr("r", 8) // larger node radius

.attr("fill", d => {

if (d.gender === "female") return "#ADD8E6";

if (d.gender === "male") return "#008000";

return "#808080";

})

.call(d3.drag()

.on("start", (event, d) => {

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

d.fx = d.x;

d.fy = d.y;

})

.on("drag", (event, d) => {

d.fx = event.x;

d.fy = event.y;

})

.on("end", (event, d) => {

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

d.fx = null;

d.fy = null;

}));

// Always-visible node labels

const label = g.append("g")

.selectAll("text")

.data(nodes)

.join("text")

.text(d => d.id)

.attr("font-size", 10)

.attr("dy", -10)

.attr("text-anchor", "middle")

.attr("pointer-events", "none") // allows interaction with circles underneath

.attr("fill", "#333");

// Update positions

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);

label

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

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

});

return svg.node();

}

Type Table, then Shift-Enter. Ctrl-space for more options.

nodes1 = d3.csv(await FileAttachment("nodes_file1.csv").url(), d3.autoType)

edges1 = d3.csv(await FileAttachment("edges_file1.csv").url(), d3.autoType)

// Normalize and add ID field

nodes1.forEach(d => {

d.Label = d.Label.trim();

d.id = d.Label;

});

// Normalize edge labels

edges1.forEach(d => {

d.Source = d.Source.trim();

d.Target = d.Target.trim();

});

// Link the actual node objects to source/target

edgesClean1 = edges1.map(d => ({

...d,

source: nodes1.find(n => n.id === d.Source),

target: nodes1.find(n => n.id === d.Target)

})).filter(d => d.source && d.target); // Remove unresolved links

mentionsNetwork1 = {

const width = 900;

const height = 600;

const svg1 = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("width", width)

.attr("height", height)

.call(

d3.zoom()

.scaleExtent([0.1, 10])

.on("zoom", (event) => {

g1.attr("transform", event.transform);

})

);

const g1 = svg1.append("g");

const weightScale1 = d3.scaleLog()

.domain(d3.extent(edgesClean1, d => d.Weight))

.range([0.2, 2.5]);

const simulation1 = d3.forceSimulation(nodes1)

.force("link", d3.forceLink(edgesClean1).id(d => d.id).distance(140))

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

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

svg1.append("defs").append("marker")

.attr("id", "arrow1")

.attr("viewBox", "0 -5 10 10")

.attr("refX", 20)

.attr("refY", 0)

.attr("markerWidth", 4)

.attr("markerHeight", 4)

.attr("orient", "auto")

.append("path")

.attr("d", "M0,-5L10,0L0,5")

.attr("fill", "#888");

const link1 = g1.append("g")

.attr("stroke", "#888")

.attr("stroke-opacity", 0.6)

.selectAll("line")

.data(edgesClean1)

.join("line")

.attr("stroke-width", d => weightScale1(d.Weight))

.attr("marker-end", "url(#arrow1)");

const node1 = g1.append("g")

.attr("stroke", "#fff")

.attr("stroke-width", 1)

.selectAll("circle")

.data(nodes1)

.join("circle")

.attr("r", 8)

.attr("fill", d => d.Type === "Person" ? "#91c9f7" : "#a1d99b")