31:T2d48,{ const width = 1300; const height = 1000; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); let padding = { top: 30, left: 100, right: 300, bottom: 50 }; let attr_bars = ["houseName", "numkills", "degree"]; let node_attr_bar_size = (padding.right - 10) / attr_bars.length; sort_edges(edges2); sort_edges_by_type(nodes2, edges2); sort_nodes_by_family(nodes2, edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); // legend up top let edge_types = [ "siblings", "parents", "marriedEngaged", "killed", "servedBy" ]; let spaces_between_labels = (width - padding.right - padding.left) / (edge_types.length + 2); for (let edge_type of edge_types) { svg .append("circle") .attr( "cx", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) - 10 ) .attr("cy", padding.top / 2) .attr("r", 5) .attr("fill", d3.schemeTableau10[edge_types.indexOf(edge_type)]); svg .append("text") .attr( "x", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) ) .attr("y", padding.top / 2) .style("font-size", "1.5em") .text(edge_type); } // column titles for (let attr_bar of attr_bars) { svg .append("text") .attr( "x", width - padding.right + attr_bars.indexOf(attr_bar) * node_attr_bar_size + node_attr_bar_size / 2 ) .attr("y", padding.top / 2) .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "1.5em") .text(attr_bar) .style("cursor", "pointer") .on("click", () => { if (attr_bar == "houseName") sort_nodes_by_family(nodes2, edges2); if (attr_bar == "numkills") sort_nodes_by_num_kills(nodes2, edges2); if (attr_bar == "degree") sort_nodes_by_degree(nodes2, edges2); assign_node_and_edge_coordinates( nodes2, edges2, width, height, padding ); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); } // edge sorting methods svg .append("text") .attr("x", padding.left) .attr("y", height - padding.bottom + 5) .style("font-size", "1.5em") .style("cursor", "pointer") .style("font-weight", "bold") .text("sort edges by type >") .on("click", () => { sort_edges_by_type(nodes2, edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); svg .append("text") .attr("x", padding.left) .attr("y", height - padding.bottom + 20) .style("font-size", "1.5em") .style("cursor", "pointer") .style("font-weight", "bold") .text("sort edges by degreecending >") .on("click", () => { sort_edges(edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); // drawing part for (let node of nodes2) { svg .append("line") .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("id", "node-line-" + node.id) .attr("class", "node-line") .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round") .on("mouseover", () => { d3.select("#node-line-" + node.id).attr("stroke-width", 5); }) .on("mouseout", () => { d3.selectAll(".node-line").attr("stroke-width", 3); }); svg .append("text") .attr("id", "node-label-" + node.id) .attr("x", padding.left - 10) .attr("y", padding.top + node.y) .text(node.name) .style("text-anchor", "end"); // right column about family name svg .append("text") .attr("id", "family-name-base-" + node.id) .attr("x", width - padding.right + node_attr_bar_size / 2) .attr("y", node.y + padding.top) .style("text-anchor", "middle") .text(node.houseName); // right column about num killed svg .append("line") .attr("id", "num-killed-base-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size + 5) .attr("x2", width - padding.right + node_attr_bar_size * 2 - 5) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "lightgray") .attr("stroke-width", "3") .style("stroke-linecap", "round"); svg .append("line") .attr("id", "num-killed-fill-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size + 5) .attr( "x2", width - padding.right + node_attr_bar_size + 5 + node.numkills * 2 ) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "red") .attr("stroke-width", "3") .style("stroke-linecap", "round"); // right columnd about degree svg .append("line") .attr("id", "degree-base-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size * 2 + 5) .attr("x2", width - padding.right + node_attr_bar_size * 3 - 5) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "lightgray") .attr("stroke-width", "3") .style("stroke-linecap", "round"); svg .append("line") .attr("id", "degree-fill-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size * 2 + 5) .attr( "x2", width - padding.right + node_attr_bar_size * 2 + 5 + node.degree * 2 ) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "red") .attr("stroke-width", "3") .style("stroke-linecap", "round"); } for (let edge of edges2) { svg .append("line") .attr( "id", "edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id ) .attr("class", "edge-line") .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y) .attr("stroke", () => { if (edge.type == "siblings") return d3.schemeTableau10[0]; if (edge.type == "parents") return d3.schemeTableau10[1]; if (edge.type == "marriedEngaged") return d3.schemeTableau10[2]; if (edge.type == "killed") return d3.schemeTableau10[3]; if (edge.type == "servedBy") return d3.schemeTableau10[4]; else return "black"; }) .attr("stroke-width", 3) .style("stroke-linecap", "round") .on("mouseover", () => { d3.select( "#edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id ).attr("stroke-width", 6); d3.select("#node-line-" + edge.endpoints[0].id).attr("stroke-width", 6); d3.select("#node-line-" + edge.endpoints[1].id).attr("stroke-width", 6); }) .on("mouseout", () => { d3.selectAll(".edge-line").attr("stroke-width", 3); d3.selectAll(".node-line").attr("stroke-width", 3); }); } function move_elements(nodes, edges, svg, width, height, padding) { for (let node of nodes) { svg .select("#node-line-" + node.id) .transition() .duration(1000) .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y); svg .select("#node-label-" + node.id) .transition() .duration(1000) .attr("x", padding.left - 10) .attr("y", padding.top + node.y); // right column about family name svg .select("#family-name-base-" + node.id) .transition() .duration(1000) .attr("y", node.y + padding.top); // right column about num killed svg .select("#num-killed-base-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); svg .select("#num-killed-fill-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); // right columnd about degree svg .select("#degree-base-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); svg .select("#degree-fill-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); } for (let edge of edges2) { svg .select( "#edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id ) .transition() .duration(1000) .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y); } } function assign_node_and_edge_coordinates( nodes, edges, width, height, padding ) { let verticalSpacing = (height - padding.top - padding.bottom) / nodes2.length; let horizontalSpacing = (width - padding.left - padding.right) / edges2.length; // assign node coordinates for (let i in nodes2) { nodes2[i].y = i * verticalSpacing; } // assign edge coordinates for (let i in edges2) { edges2[i].x = i * horizontalSpacing; } } // edge sorting functions function sort_edges_by_type(nodes, edges) { edges.sort((a, b) => (a.type < b.type ? 1 : -1)); } // node sorting functions function sort_nodes_by_degree(nodes, edges) { nodes.sort((a, b) => { return a.degree < b.degree ? 1 : -1; }); } function sort_nodes_by_num_kills(nodes, edges) { nodes.sort((a, b) => { if (a.numkills == undefined) return 1; if (b.numkills == undefined) return -1; else return a.numkills < b.numkills ? 1 : -1; }); } function sort_nodes_by_family(nodes, edges) { nodes.sort((a, b) => { if (a.houseName == undefined) return 1; if (b.houseName == undefined) return -1; else return a.houseName > b.houseName ? 1 : -1; }); } function sort_edges(edges) { edges.sort((a, b) => { let a_top_y = Math.min.apply( 0, a.endpoints.map((p) => p.y) ); let b_top_y = Math.min.apply( 0, b.endpoints.map((p) => p.y) ); if (a_top_y != b_top_y) return a_top_y < b_top_y ? -1 : 1; else { let a_length = Math.abs(a.endpoints[0].y - a.endpoints[1].y); let b_length = Math.abs(b.endpoints[0].y - b.endpoints[1].y); return a_length < b_length ? -1 : 1; } }); } return svg.node(); }32:T4e1,chart = { const width = 1000; const height = 1000; for (let edge of edges) { edge.source = edge.endpoints[0]; edge.target = edge.endpoints[1]; } for (let node of nodes) { node.x = width / 2; node.y = width / 2; } const force = d3 .forceSimulation(nodes) .force( "links", d3.forceLink(edges).id((d) => d.name) ) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .alpha(0.3); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "50%"); const link = svg .append("g") .selectAll("g") .data(edges) .enter() .append("line") .attr("stroke-width", 1) .attr("stroke", "gray"); const node = svg .append("g") .selectAll("g") .data(nodes) .enter() .append("circle") .attr("r", 5) .attr("fill", "gray"); force.on("tick", () => { link .attr("x1", (d) => d.endpoints[0].x) .attr("y1", (d) => d.endpoints[0].y) .attr("x2", (d) => d.endpoints[1].x) .attr("y2", (d) => d.endpoints[1].y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); invalidation.then(() => force.stop()); return svg.node(); }33:T787,function draw_biofabric(nodes, edges) { { const width = 1100; const height = 500; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // assign padding and node spacing if needed let padding = { left: 100, right: 20, top: 20, bottom: 20 }; let vertical_spacing_between_nodes = (height - padding.top - padding.bottom) / nodes.length; let horizontal_spacing_between_nodes = (width - padding.right - padding.left) / edges.length; // assign node coordinates for (let i in nodes) { let node = nodes[i]; node.y = i * vertical_spacing_between_nodes; } // assign edge coordinates for (let i in edges) { edges[i].x = i * horizontal_spacing_between_nodes; } // draw nodes for (let node of nodes) { // add labels to the nodes svg .append("line") .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("stroke", "#eee") .attr("stroke-linecap", "round") .attr("stroke-width", 4); svg .append("text") .attr("x", padding.left - 5) .attr("y", padding.top + node.y) .attr("text-anchor", "end") .text(node.name); } // draw edges for (let edge of edges) { svg .append("line") .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y) .attr("stroke", "gray") .attr("stroke-width", 4) .attr("stroke-linecap", "round"); } return svg.node(); } }34:T42a,nodes2 = { let nodes = []; for (let c of characters2) { let relationships = [] .concat(c.siblings) .concat(c.killed) .concat(c.parents) .concat(c.marriedEngaged) .concat(c.servedBy) .concat(c.killedBy) .concat(c.parentOf); relationships = relationships.filter((r) => r != undefined); console.log(relationships); if (relationships.length < 3) continue; nodes.push({ name: c.characterName, x: 0, y: 0, id: nodes.length, houseName: c.houseName, numkills: c.killed != undefined ? c.killed.length : 0, degree: (c.killed != undefined ? c.killed.length : 0) + (c.siblings != undefined ? c.siblings.length : 0) + (c.parents != undefined ? c.parents.length : 0) + (c.marriedEngaged != undefined ? c.marriedEngaged.length : 0) + (c.servedBy != undefined ? c.servedBy.length : 0) + (c.killedBy != undefined ? c.killedBy.length : 0) + (c.parentOf != undefined ? c.parentOf.length : 0) }); } return nodes; }35:T668,{ const width = 3000; const height = 3000; for (let edge of edges2) { edge.source = edge.endpoints[0]; edge.target = edge.endpoints[1]; } for (let node of nodes2) { node.x = width / 2; node.y = width / 2; } const force = d3 .forceSimulation(nodes2) .force( "links", d3 .forceLink(edges2) .id((d) => d.name) .distance(100) ) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .alpha(1); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "50%"); const link = svg .append("g") .selectAll("g") .data(edges2) .enter() .append("line") .attr("stroke-width", 3) .attr("stroke", (el) => { if (el.type == "siblings") return d3.schemeTableau10[0]; if (el.type == "parents") return d3.schemeTableau10[1]; if (el.type == "marriedEngaged") return d3.schemeTableau10[2]; if (el.type == "killed") return d3.schemeTableau10[3]; if (el.type == "servedBy") return d3.schemeTableau10[4]; else return "gray"; }); const node = svg .append("g") .selectAll("g") .data(nodes2) .enter() .append("circle") .attr("r", 10) .attr("fill", "gray"); force.on("tick", () => { link .attr("x1", (d) => d.endpoints[0].x) .attr("y1", (d) => d.endpoints[0].y) .attr("x2", (d) => d.endpoints[1].x) .attr("y2", (d) => d.endpoints[1].y); node.attr("cx", (d) => d.x).attr("cy", (d) => d.y); }); invalidation.then(() => force.stop()); return svg.node(); }36:T7c4,{ const width = 1300; const height = 1000; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); let padding = { top: 10, left: 100, right: 10 }; let verticalSpacing = (height - padding.top) / nodes2.length; let horizontalSpacing = (width - padding.left - padding.right) / edges2.length; // assign node coordinates for (let i in nodes2) { nodes2[i].y = i * verticalSpacing; } // assign edge coordinates for (let i in edges2) { edges2[i].x = i * horizontalSpacing; } for (let node of nodes2) { svg .append("line") .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round"); svg .append("text") .attr("x", padding.left - 10) .attr("y", padding.top + node.y) .text(node.name) .style("font-family", "Arial") .style("text-anchor", "end") .style("dominant-baseline", "middle"); } for (let edge of edges2) { svg .append("line") .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y) .attr("stroke", () => { if (edge.type == "siblings") return d3.schemeTableau10[0]; if (edge.type == "parents") return d3.schemeTableau10[1]; if (edge.type == "marriedEngaged") return d3.schemeTableau10[2]; if (edge.type == "killed") return d3.schemeTableau10[3]; if (edge.type == "servedBy") return d3.schemeTableau10[4]; else return "black"; }) .attr("stroke-width", 3) .style("stroke-linecap", "round"); } return svg.node(); }37:T1159,{ const width = 1300; const height = 1000; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); let padding = { top: 30, left: 100, right: 300, bottom: 50 }; let attr_bars = ["houseName", "numkills", "degree"]; let node_attr_bar_size = (padding.right - 10) / attr_bars.length; assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); // legend up top let edge_types = [ "siblings", "parents", "marriedEngaged", "killed", "servedBy" ]; let spaces_between_labels = (width - padding.right - padding.left) / (edge_types.length + 2); for (let edge_type of edge_types) { svg .append("circle") .attr( "cx", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) - 10 ) .attr("cy", padding.top / 2) .attr("r", 5) .attr("fill", d3.schemeTableau10[edge_types.indexOf(edge_type)]); svg .append("text") .attr( "x", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) ) .attr("y", padding.top / 2) .style("font-size", "1.5em") .text(edge_type); } // column titles for (let attr_bar of attr_bars) { svg .append("text") .attr( "x", width - padding.right + attr_bars.indexOf(attr_bar) * node_attr_bar_size + node_attr_bar_size / 2 ) .attr("y", padding.top / 2) .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "1.5em") .text(attr_bar); } // drawing part for (let node of nodes2) { svg .append("line") .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("id", "node-line-" + node.id) .attr("class", "node-line") .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round") .on("mouseover", () => { d3.select("#node-line-" + node.id).attr("stroke-width", 5); }) .on("mouseout", () => { d3.selectAll(".node-line").attr("stroke-width", 3); }); svg .append("text") .attr("id", "node-label-" + node.id) .attr("x", padding.left - 10) .attr("y", padding.top + node.y) .text(node.name) .style("text-anchor", "end"); // fill in here: right column about family name svg .append("text") .attr("x", width - padding.right + 10) .attr("y", padding.top + node.y) .text(node.houseName); // fill in here: right column about num killed svg .append("line") .attr("x1", width - padding.right + node_attr_bar_size) .attr("x2", width - padding.right + node_attr_bar_size * 2) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("stroke", "#eee") .attr("stroke-width", 4); svg .append("line") .attr("x1", width - padding.right + node_attr_bar_size) .attr( "x2", width - padding.right + node_attr_bar_size + node.numkills * 2 ) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("stroke", "red") .attr("stroke-width", 4); // fill in here: right column about degree } for (let edge of edges2) { svg .append("line") .attr( "id", "edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id ) .attr("class", "edge-line") .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y) .attr("stroke", () => { if (edge.type == "siblings") return d3.schemeTableau10[0]; if (edge.type == "parents") return d3.schemeTableau10[1]; if (edge.type == "marriedEngaged") return d3.schemeTableau10[2]; if (edge.type == "killed") return d3.schemeTableau10[3]; if (edge.type == "servedBy") return d3.schemeTableau10[4]; else return "black"; }) .attr("stroke-width", 3) .style("stroke-linecap", "round"); } return svg.node(); }38:T1cb9,{ const width = 1300; const height = 1000; // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); let padding = { top: 30, left: 100, right: 300, bottom: 50 }; let attr_bars = ["houseName", "numkills", "degree"]; let node_attr_bar_size = (padding.right - 10) / attr_bars.length; sort_edges(edges2); sort_edges_by_type(nodes2, edges2); sort_nodes_by_family(nodes2, edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); // legend up top let edge_types = [ "siblings", "parents", "marriedEngaged", "killed", "servedBy" ]; let spaces_between_labels = (width - padding.right - padding.left) / (edge_types.length + 2); for (let edge_type of edge_types) { svg .append("circle") .attr( "cx", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) - 10 ) .attr("cy", padding.top / 2) .attr("r", 5) .attr("fill", d3.schemeTableau10[edge_types.indexOf(edge_type)]); svg .append("text") .attr( "x", padding.left + spaces_between_labels * (edge_types.indexOf(edge_type) + 1) ) .attr("y", padding.top / 2) .style("font-size", "1.5em") .text(edge_type); } // column titles for (let attr_bar of attr_bars) { svg .append("text") .attr( "x", width - padding.right + attr_bars.indexOf(attr_bar) * node_attr_bar_size + node_attr_bar_size / 2 ) .attr("y", padding.top / 2) .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "1.5em") .text(attr_bar) .style("cursor", "pointer") .on("click", () => { if (attr_bar == "houseName") sort_nodes_by_family(nodes2, edges2); if (attr_bar == "numkills") sort_nodes_by_num_kills(nodes2, edges2); if (attr_bar == "degree") sort_nodes_by_degree(nodes2, edges2); assign_node_and_edge_coordinates( nodes2, edges2, width, height, padding ); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); } // edge sorting methods svg .append("text") .attr("x", padding.left) .attr("y", height - padding.bottom + 5) .style("font-size", "1.5em") .style("cursor", "pointer") .style("font-weight", "bold") .text("sort edges by type >") .on("click", () => { sort_edges_by_type(nodes2, edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); svg .append("text") .attr("x", padding.left) .attr("y", height - padding.bottom + 20) .style("font-size", "1.5em") .style("cursor", "pointer") .style("font-weight", "bold") .text("sort edges by degreecending >") .on("click", () => { sort_edges(edges2); assign_node_and_edge_coordinates(nodes2, edges2, width, height, padding); move_elements( nodes2, edges2, svg, width, height, padding, node_attr_bar_size ); }); // drawing part for (let node of nodes2) { svg .append("line") .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y) .attr("id", "node-line-" + node.id) .attr("class", "node-line") .attr("stroke", "#ddd") .attr("stroke-width", 3) .style("stroke-linecap", "round") .on("mouseover", () => { d3.select("#node-line-" + node.id).attr("stroke-width", 5); }) .on("mouseout", () => { d3.selectAll(".node-line").attr("stroke-width", 3); }); svg .append("text") .attr("id", "node-label-" + node.id) .attr("x", padding.left - 10) .attr("y", padding.top + node.y) .text(node.name) .style("text-anchor", "end"); // right column about family name svg .append("text") .attr("id", "family-name-base-" + node.id) .attr("x", width - padding.right + node_attr_bar_size / 2) .attr("y", node.y + padding.top) .style("text-anchor", "middle") .text(node.houseName); // right column about num killed svg .append("line") .attr("id", "num-killed-base-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size + 5) .attr("x2", width - padding.right + node_attr_bar_size * 2 - 5) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "lightgray") .attr("stroke-width", "3") .style("stroke-linecap", "round"); svg .append("line") .attr("id", "num-killed-fill-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size + 5) .attr( "x2", width - padding.right + node_attr_bar_size + 5 + node.numkills * 2 ) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "red") .attr("stroke-width", "3") .style("stroke-linecap", "round"); // right columnd about degree svg .append("line") .attr("id", "degree-base-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size * 2 + 5) .attr("x2", width - padding.right + node_attr_bar_size * 3 - 5) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "lightgray") .attr("stroke-width", "3") .style("stroke-linecap", "round"); svg .append("line") .attr("id", "degree-fill-" + node.id) .attr("x1", width - padding.right + node_attr_bar_size * 2 + 5) .attr( "x2", width - padding.right + node_attr_bar_size * 2 + 5 + node.degree * 2 ) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top) .attr("stroke", "red") .attr("stroke-width", "3") .style("stroke-linecap", "round"); } for (let edge of edges2) { svg .append("line") .attr( "id", "edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id ) .attr("class", "edge-line") .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y) .attr("stroke", () => { if (edge.type == "siblings") return d3.schemeTableau10[0]; if (edge.type == "parents") return d3.schemeTableau10[1]; if (edge.type == "marriedEngaged") return d3.schemeTableau10[2]; if (edge.type == "killed") return d3.schemeTableau10[3]; if (edge.type == "servedBy") return d3.schemeTableau10[4]; else return "black"; }) .attr("stroke-width", 3) .style("stroke-linecap", "round"); } return svg.node(); }39:T713,function move_elements(nodes, edges, svg, width, height, padding) { for (let node of nodes) { svg .select("#node-line-" + node.id) .transition() .duration(1000) .attr("x1", padding.left) .attr("x2", width - padding.right) .attr("y1", padding.top + node.y) .attr("y2", padding.top + node.y); svg .select("#node-label-" + node.id) .transition() .duration(1000) .attr("x", padding.left - 10) .attr("y", padding.top + node.y); // right column about family name svg .select("#family-name-base-" + node.id) .transition() .duration(1000) .attr("y", node.y + padding.top); // right column about num killed svg .select("#num-killed-base-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); svg .select("#num-killed-fill-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); // right columnd about degree svg .select("#degree-base-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); svg .select("#degree-fill-" + node.id) .transition() .duration(1000) .attr("y1", node.y + padding.top) .attr("y2", node.y + padding.top); } for (let edge of edges2) { svg .select("#edge-line-" + edge.endpoints[0].id + "-" + edge.endpoints[1].id) .transition() .duration(1000) .attr("x1", padding.left + edge.x) .attr("x2", padding.left + edge.x) .attr("y1", padding.top + edge.endpoints[0].y) .attr("y2", padding.top + edge.endpoints[1].y); } }3a:[{"id":"6aed7df1d9ee5265745beaedcaed30d27bef1a7138f44a39e5152282b0ac87f735ae143b06eb3a744981bc46706cb73bda0edc5673ae78278d8be4329cafffb3","href":"https://static.observableusercontent.com/files/6aed7df1d9ee5265745beaedcaed30d27bef1a7138f44a39e5152282b0ac87f735ae143b06eb3a744981bc46706cb73bda0edc5673ae78278d8be4329cafffb3","name":"characters.json","type":"application/json","lastModified":1758399304681.777,"size":207763},{"id":"eb79db1020a330b2a5db634f2029050fec94a6d7493ea0258f617a6e59d2b94b4099ca73a56ae2d3129806b2873ff81875be35f234076cc2a4df77802c07e821","href":"https://static.observableusercontent.com/files/eb79db1020a330b2a5db634f2029050fec94a6d7493ea0258f617a6e59d2b94b4099ca73a56ae2d3129806b2873ff81875be35f234076cc2a4df77802c07e821","name":"grafik.png","type":"image/png","lastModified":1758399304681.777,"size":58674}] 2f:{"title":"Biofabric visualization: exercise - blank template (sara copy)","cells":[{"id":0,"value":"# Biofabric visualization: exercise - blank template (sara copy)\n","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":" - This notebook has been made for the PhD school at Graph Drawing 2025, in Sweden. ","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"## Objectives","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"This is the objective of today's exercise. Please click on column names or on edge sorting methods below the visualization to see it rearrange itself according to what you clicked on. ","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"We are going to visualize relationships among characters in game of thrones using Biofabric. \n\nThe following line uploads the data to this document. The data is already loaded and ready to use: you can take a look at its contents by clicking on the little arrow below to expand the list of characters and see their attributes, and how their relationships are defined.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = FileAttachment(\"characters.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"Initially, we will only play with a subset of characters and use only the edges representing that two characters are siblings. The block below filters the dataset according to these criteria: ","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"characters = {\n let characters = data[\"characters\"].filter(\n (c) =>\n c.siblings != undefined\n );\n return characters;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"## A very brief introduction to observable and d3","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"Everything needs to be contained in an svg container. This is how you create an svg container:","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"{\n const width = 100;\n const height = 100;\n\n // Create the SVG container.\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"Shapes and other elements are appended to the svg container. Below, you can see how I have created a small rectangle:","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"{\n const width = 100;\n const height = 100;\n\n // Create the SVG container.\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n // create the rectangle\n svg\n .append(\"rect\")\n .attr(\"fill\", \"green\")\n .attr(\"x\", 40)\n .attr(\"y\", 40)\n .attr(\"width\", 40)\n .attr(\"height\", 20);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"A line, instead, is drawn as such:","pinned":false,"hidden":false,"mode":"md"},{"id":782,"value":"{\n const width = 100;\n const height = 100;\n\n // Create the SVG container.\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n // create the line\n svg\n .append(\"line\")\n .attr(\"stroke\", \"red\")\n .attr(\"stroke-width\", 5)\n .attr(\"x1\", 20)\n .attr(\"x2\", 80)\n .attr(\"y1\", 50)\n .attr(\"y2\", 50)\n .style(\"stroke-linecap\", \"round\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"# Drawing Biofabric","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"First of all, we need to construct our graph. We will build a nodes array based on our list of characters, described at the beginning of this document.","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"nodes = {\n let nodes = [];\n for (let c of characters) {\n nodes.push({ name: c.characterName, x: 0, y: 0 });\n }\n return nodes;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"We will do the same for the edges:","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"edges = {\n let edges = [];\n for (let c of characters) {\n for (let sibling of c.siblings) {\n // if the sibling is not in the nodes we currently have, skip the edge.\n if (!nodes.find((n) => n.name == sibling)) continue;\n\n // if we already have an edge with the same endpoints, skip adding another one.\n if (\n edges.find(\n (e) =>\n e.endpoints.map((p) => p.name).includes(sibling) &&\n e.endpoints.map((p) => p.name).includes(c.characterName)\n )\n )\n continue;\n\n edges.push({\n endpoints: [\n nodes.find((n) => n.name == c.characterName),\n nodes.find((n) => n.name == sibling)\n ],\n type: \"sibling\"\n });\n }\n }\n return edges;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"On a force-directed layout, this dataset would look like this:","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"Now, we want to draw it in biofabric. The function in the next code block describes the logic to make the drawing, but we are going to need a bit more than this to create a satisfying and orderly visualization:","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"Fill in the code in the next block:","pinned":false,"hidden":false,"mode":"html"},{"id":415,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"Here, we execute the function and see the output:","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"draw_biofabric(nodes, edges)","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"The visualization is there, but it does not look particularly more informative than the node-link version at this point. This is because there is no ordering in the nodes and edges: the node-link version works because a layout algorithm is applied to it, and it vastly aids in reading the visualization. In this case, in biofabric, we have not implemented any sorting algorithm yet. Let's proceed to the next step, which describes exactly this.","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"# Sorting edges and nodes","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"Sorting of nodes and edges can be done in several different ways, according to the objective tasks of the final visualization. Today, we will implement sorting by degree for the nodes, and a technique called \"degreecending\" for the edges.","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"We will do the sorting of edges and nodes in two separate functions. ","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"Fill in the code in the next block:","pinned":false,"hidden":false,"mode":"html"},{"id":388,"value":"function sort_nodes(nodes, edges) {\n nodes.sort((a, b) => {\n let a_edges = edges.filter((e) => e.endpoints.includes(a));\n let b_edges = edges.filter((e) => e.endpoints.includes(b));\n return a_edges.length < b_edges.length ? 1 : -1;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"function sort_edges(edges) {\n edges.sort((a, b) => {\n let a_top_y = Math.min.apply(\n 0,\n a.endpoints.map((p) => p.y)\n );\n let b_top_y = Math.min.apply(\n 0,\n b.endpoints.map((p) => p.y)\n );\n if (a_top_y != b_top_y) return a_top_y < b_top_y ? -1 : 1;\n else {\n let a_length = Math.abs(a.endpoints[0].y - a.endpoints[1].y);\n let b_length = Math.abs(b.endpoints[0].y - b.endpoints[1].y);\n return a_length < b_length ? -1 : 1;\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":437,"value":"{\n // the undefined output up top is fine, there is no output here.\n sort_nodes(nodes, edges);\n sort_edges(edges);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"draw_biofabric(nodes, edges)","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"The graph does now look more orderly than before, but there is still something more that we can do with it, to fully embrace the potential of this type of visualization. In the next section, we will see how to implement multivariate attributes in it.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"# Adding Multivariate Attributes to the visualization","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"Multivariate attributes are additional attributes that can be contained in a graph - either associated to nodes, edges, or both. They can be different data types: geographical data, temporal data, categorical values, etcetera. Representing these, and organizing a layout algorithm around them, can be particularly challenging.","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"I will now reload the dataset, excluding the filtering I had done before, to show that it contained much more than just siblings relationships. The dataset contains now much more nodes and edges, and each node is associated with multivariate data.","pinned":false,"hidden":false,"mode":"md"},{"id":256,"value":"characters2 = data[\"characters\"].filter(\n (c) =>\n c.killedBy != undefined ||\n c.siblings != undefined ||\n c.parents != undefined ||\n c.parentOf != undefined ||\n c.marriedEngaged != undefined ||\n c.killed != undefined ||\n c.servedBy != undefined\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"The table below shows the content of the data I have just loaded:","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"characters2","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"We also update our arrays of nodes and edges to include the new information","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"edges2 = {\n let edges = [];\n for (let c of characters2) {\n let includeset = (setname) => {\n if (c[setname] != undefined) {\n for (let elem of c[setname]) {\n if (\n edges.length > 0 &&\n edges.find(\n (e) =>\n e.endpoints.map((p) => p.name).includes(elem) &&\n e.endpoints.map((p) => p.name).includes(c.characterName)\n )\n ) {\n continue;\n }\n\n if (!nodes2.find((n) => n.name == elem)) continue;\n if (!nodes2.find((n) => n.name == c.characterName)) continue;\n\n edges.push({\n endpoints: [\n nodes2.find((n) => n.name == c.characterName),\n nodes2.find((n) => n.name == elem)\n ],\n type: setname\n });\n }\n }\n };\n\n includeset(\"marriedEngaged\");\n includeset(\"siblings\");\n includeset(\"parents\");\n includeset(\"killed\");\n includeset(\"servedBy\");\n }\n return edges;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"This now looks like this on a node-link visualization. Different colors represent different types of relationships, but it's pretty hard to understand relationships in this visualization now:","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"Now we sort nodes and edges, as we did before:","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"{\n sort_nodes(nodes2, edges2);\n sort_edges(edges2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"And draw them:","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"draw_biofabric(nodes2, edges2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"This is perhaps a little more interesting, but clearly the space we allocated doesn't work anymore, plus we have a lot more information that would be cool to see in the visualization as well (for instance, the type of relationship, or what family do the characters belong to. ","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"FileAttachment(\"grafik.png\").image({\n width: 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"This is an example on how to encode data on edges. For now, we will just change the colors of the edges. In order to do this, we need to update the function that draws biofabric. This will also give us a chance to change the size of the visualization appropriately.","pinned":false,"hidden":false,"mode":"md"},{"id":825,"value":"Fill in the code in the next block:","pinned":false,"hidden":false,"mode":"html"},{"id":269,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"Now I want to visualize the additional attributes on the side of the visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":844,"value":"Fill in the code in the next block:","pinned":false,"hidden":false,"mode":"html"},{"id":841,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"Finally, I want to create additional sorting function to address the fact that we now have multiple and varied attributes. I already added the buttons for it, but the sorting functions need to be filled in.","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"Fill in the code in the next blocks:","pinned":false,"hidden":false,"mode":"html"},{"id":575,"value":"function sort_nodes_by_family(nodes, edges) {\n nodes.sort((a, b) => {\n\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"function sort_nodes_by_num_kills(nodes, edges) {\n nodes.sort((a, b) => {\n\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"function sort_nodes_by_degree(nodes, edges) {\n nodes.sort((a, b) => {\n\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"function sort_edges_by_type(nodes, edges) {\n edges.sort((a, b) => a.type < b.type);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"function assign_node_and_edge_coordinates(\n nodes,\n edges,\n width,\n height,\n padding\n) {\n let verticalSpacing = (height - padding.top - padding.bottom) / nodes2.length;\n let horizontalSpacing =\n (width - padding.left - padding.right) / edges2.length;\n\n // assign node coordinates\n for (let i in nodes2) {\n nodes2[i].y = i * verticalSpacing;\n }\n\n // assign edge coordinates\n for (let i in edges2) {\n edges2[i].x = i * horizontalSpacing;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"# Questions and exercises\n","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"- What other types of sorting could you implement for nodes and edges in Biofabric?\n- In what other ways could we represent multivariate data?\n- What other interactive features could we implement to facilitate navigation?","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"# Attachments, imports and helper functions\n","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":675,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {toc} from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}