31:T7b0,md` 1) [**Force-Directed Placement**](https://observablehq.com/@d3/force-directed-graph?ui=classic) - These node-link diagrams represent nodes as point marks and edges (links) connecting the nodes as line marks. - The number of individual edges that must be traversed to get from one node to another is a network-oriented way to measure distances. *Strengths* - For sufficiently small networks, they are extremely *intuitive* for supporting many of the abstract tasks that pertain to network data - They shine for tasks that involve understanding the network topology: - finding all possible paths from one node to another - finding the shortest path between two nodes - finding all the adjacent nodes one hop away from a target node - finding nodes that act as a bridge between two components of the network that would otherwise be disconnected - providing a general overview or finding similar substructures *Weaknesses* - Past a centain limit of network size and link density, they become impossible to read because of occlusion from edges crossing each other and crossing underneath nodes (the upper limit for node-link diagram effectiveness is a link density of around three or four [[Melancon 06](https://hal-lirmm.ccsd.cnrs.fr/lirmm-00091354/document)]) - Even for smaller, less-dense networks, as the network size increases the resulting visual clutter of edges and nodes occluding each other eventually causes the layout to degenerate into an unreadable hairball (the legibility limit depends on the algorithm) Idiom | Force-directed Placement | :-- | :-- | What: Data | Network | How: Encode | Point marks for nodes, Connection marks for edges (links) | Why: Tasks | Explore topology, Locate paths | Scale | Nodes: dozens/hundreds ; Links: hundreds ; Node/Link Density: L < 4N | **Source: [Visualization Analysis and Design](https://www.cs.ubc.ca/~tmm/vadbook/) by [Tamara Munzner](https://www.cs.ubc.ca/~tmm/)** `32:Tbce,md` 2) [**Matrix Representation**](https://observablehq.com/@fil/hello-reorder-js?ui=classic) - These adjacency matrix views transform the original network data into a table with two key attributes that are separate full lists of every node in the network, and one value attribute for each cell that records whether an edge (link) exists between the nodes that index the cell. - With this representation, all of the nodes in the network are laid out along the vertical and horizontal edges of a square region, and edges (links) between two nodes are indicated by coloring an area mark in the cell in the matrix that is the intersection between their row and column. - For weighted networks, each edge has an associated quantitiative value attribute, which can be encoded with an ordered channel such as luminance or saturation. - For undirected networks, where edges are symmetric, only half of the matrix needs to be shown, either above or below the diagonal. For directed networks, the full square matrix has meaning, because links can be asymmetric. *Strengths* - A major strength of matrix views is perceptual scalability for both large and dense networks. Matrix views completely eliminate the occlusion of node-link views, so they can handle dense graphs up to the mathematical limit where the edge count is the number of nodes squared (unlike node-link views, which break down once the density of edges is more than about three or four times the number of nodes) - Matrix views are predictable, stable, and support reordering: - Predictable: matrix views can be laid out within a predictable amount of screen space - Stable: adding a new item will only cause a small visual change (supports geometric or semantic zooming) - Reordering: the linear ordering of the elements along the axes can be changed on demand - One can quickly estimate the number of nodes in the network, and the number of edges that connect to a node can be found by counting the number of filled-in cells in a row or column (moreover, with reordering, they support search through fast node lookup) *Weaknesses* - Unfamiliarity: most users are able to easily interpret node-link views of small networks without training, but they typically need training to interpret matrix views (with sufficient training, users can accomplish tasks, such as finding specific types of nodes or node groups) - Lack of support for investigating topological structure because they show edges in a more indirect way than the direct connections of node-link diagrams (this weakness is a direct trade-off for their strength in avoiding clutter) Idiom | Adjacency Matrix View | :-- | :-- | What: Data | Network | What: Derived | Table: network nodes as keys, link status between two nodes as values | How: Encode | Area marks in 2D matrix alignment | Scale | Nodes: 1000 ; Links: one million | **Source: [Visualization Analysis and Design](https://www.cs.ubc.ca/~tmm/vadbook/) by [Tamara Munzner](https://www.cs.ubc.ca/~tmm/)** `33:Tcb6,fdg = { const links = book === "The Fellowship of the Ring" ? book1.links.map(d => Object.create(d)) : book === "The Two Towers" ? book2.links.map(d => Object.create(d)) : book3.links.map(d => Object.create(d)); const nodes = book === "The Fellowship of the Ring" ? book1.nodes.map(d => Object.create(d)) : book === "The Two Towers" ? book2.nodes.map(d => Object.create(d)) : book3.nodes.map(d => Object.create(d)); // const svg = d3 // .create("svg") // .attr("viewBox", [-width / 2, -height / 2, width, height]); const target = html`

`; const svg = d3.select(target).select(".target"); const tooltip = d3.select(target).select(".tooltip"); // tooltip tooltip .style("position", "absolute") .style("opacity", 0) .style("color", "white") .style("font-size", "14px") .style("background-color", "dimgrey") .style("border", "1px solid dimgrey") .style("border-radius", "5px") .style("padding", "10px"); const simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-1000)) .force( "link", d3 .forceLink(links) .id(d => d.id) .distance(100) ) .force("x", d3.forceX()) .force("y", d3.forceY()); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.weight)); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes, d => d.id) .join("circle") .attr("r", d => size(d[importance])) .attr("fill", d => color(d[colorby])) .call(drag(simulation)); //.call(node => // node.append("title").text(d => `${importance}: ${round(d[importance])}`) //); node .on("mouseover", (e, d) => { const pt = d3.pointer(e); tooltip .html( `Name: ${d.id}
Gender: ${capitalize(d.gender)}
Subtype: ${capitalize(d.subtype)}
${capitalize(importance)}: ${round(d[importance])}` ) .style("left", `${pt[0] + 525}px`) .style("top", `${pt[1] + 250}px`) .transition() .duration(200) .style("opacity", 1); }) .on("mouseout", d => { tooltip .transition() .duration(200) .style("opacity", 0); }); const text = svg .append("g") .selectAll("text") .data(nodes, d => d.id) .join("text") .attr("x", d => size(d[importance]) + 2) .attr("y", "0.31em") .attr("fill", "black") .attr("stroke", "none") .style("font", "12px sans-serif") .text(d => d.id); 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); text.attr("transform", d => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return target; //svg.node(); }38:Tb42,setup = { const margin = { top: 80, right: 0, bottom: 10, left: 80 }, width = 620, height = 620; const nodeIds = d3.range(graph.nodes.length); const x = d3 .scaleBand() .domain(nodeIds) .range([0, width]), z = d3 .scaleLinear() .domain([0, 4]) .clamp(true), c = d3.scaleOrdinal(tableau20); // d3.scaleOrdinal(d3.range(10), d3.schemeCategory10); const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); const g = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); g.append("rect") .style("fill", "#eee") .attr("width", width) .attr("height", height); const matrix = graph.links .flatMap(({ source, target, value }) => [ [source, target, value], [target, source, value] ]) .concat(nodeIds.map(i => [i, i])); const labels = g .append("g") .style("font-size", "8px") .style("font-family", "sans-serif"); const columns = labels .append("g") .selectAll() .data(nodeIds) .join("g") .attr("transform", "rotate(-90)") .append("g"); columns .append("line") .attr("x2", -width) .style("stroke", "white"); columns .append("text") .attr("dx", 2) .attr("dy", x.bandwidth() / 2 + 2) .text(i => graph.nodes[i].name); const rows = labels .append("g") .selectAll() .data(nodeIds) .join("g"); rows .append("line") .attr("x2", width) .style("stroke", "white"); rows .append("text") .attr("text-anchor", "end") .attr("dx", -2) .attr("dy", x.bandwidth() / 2 + 2) .text(i => graph.nodes[i].name); const rects = g .append("g") .attr("transform", "translate(1,1)") .selectAll() .data(matrix) .join("rect") .attr("width", x.bandwidth() - 2) .attr("height", x.bandwidth() - 2) .attr("fill", ([s, t]) => graph.nodes[s].group === graph.nodes[t].group ? c(graph.nodes[t].group) : "darkgrey" ) .attr("fill-opacity", ([, , v]) => z(v)); let prev; update(nodeIds); function update(permutation) { x.domain(permutation); const delay = prev ? i => x(i) * 4 : 0; const delay2 = prev ? ([i]) => x(i) * 4 : 0; const duration = prev ? 1500 : 0; columns .transition() .delay(delay) .duration(duration) .attr("transform", i => `translate(0, ${x(i)})`); rows .transition() .delay(delay) .duration(duration) .attr("transform", i => `translate(0, ${x(i)})`); rects .transition() .delay(delay2) .duration(duration) .attr("x", ([s]) => x(s)) .attr("y", ([, t]) => x(t)); prev = permutation; return permutation; } return Object.assign(svg.node(), { update }); }39:Ta6c,orders = ({ nodes, links }) => { const n = nodes.length; const matrix = Array.from(nodes, (_, i) => d3.range(n).map(j => ({ x: j, y: i, z: 0 })) ); const index = nodes.map((d, i) => ("id" in d ? d.id : i)); const l = []; for (const node in nodes) nodes.count = 0; links.forEach(link => { const i = index.indexOf(link.source), j = index.indexOf(link.target); if (!("value" in link)) link.value = 1; matrix[i][j].z += link.value; matrix[j][i].z += link.value; matrix[i][j].z += link.value; matrix[j][i].z += link.value; nodes[i].count += link.value; nodes[j].count += link.value; l.push({ source: i, target: j, value: link.value }); }); const adjacency = matrix.map(row => row.map(c => c.z)); const graph = reorder .graph() .nodes(nodes) .links(l) .init(); let dist_adjacency; const leafOrder = reorder.optimal_leaf_order(); //.distance(science.stats.distance.manhattan); function computeLeaforder() { const order = leafOrder(adjacency); order.forEach((lo, i) => (nodes[i].leafOrder = lo)); return nodes.map(n => n.leafOrder); } function computeLeaforderDist() { if (!dist_adjacency) dist_adjacency = reorder.graph2valuemats(graph); const order = reorder.valuemats_reorder(dist_adjacency, leafOrder); order.forEach((lo, i) => (nodes[i].leafOrderDist = lo)); return nodes.map(n => n.leafOrderDist); } function computeBarycenter() { const barycenter = reorder.barycenter_order(graph); const improved = reorder.adjacent_exchange(graph, ...barycenter); improved[0].forEach((lo, i) => (nodes[i].barycenter = lo)); return nodes.map(n => n.barycenter); } function computeRCM() { const rcm = reorder.reverse_cuthill_mckee_order(graph); rcm.forEach((lo, i) => (nodes[i].rcm = lo)); return nodes.map(n => n.rcm); } function computeSpectral() { const spectral = reorder.spectral_order(graph); spectral.forEach((lo, i) => (nodes[i].spectral = lo)); return nodes.map(n => n.spectral); } const orders = { none: () => d3.range(n), name: () => d3.range(n).sort((a, b) => d3.ascending(nodes[a].name, nodes[b].name)), count: () => d3.range(n).sort((a, b) => nodes[b].count - nodes[a].count), group: () => d3 .range(n) .sort( (a, b) => d3.ascending(nodes[a].group, nodes[b].group) || d3.ascending(nodes[a].name, nodes[b].name) ), leafOrder: computeLeaforder, leafOrderDist: computeLeaforderDist, barycenter: computeBarycenter, rcm: computeRCM, spectral: computeSpectral }; return orders; }3a:T4cb,{ const formatTime = d3.timeFormat("%B %d, %Y"); function highlight(d) { return new RegExp(`${highlight_character}`).test(d.id); } return addTooltips( Plot.plot({ y: { grid: true, label: `↑ ${centrality_metric}` }, x: { domain: [new Date("1954-04-01"), new Date("1956-01-01")] }, color: { domain: [false, true], range: ["#ccc", "red"] }, marks: [ Plot.ruleY([0]), Plot.line(lotr_data.nodes, { x: "publication_date", y: `${centrality_metric}`, z: "id", sort: true && highlight, stroke: highlight, strokeWidth: 2, title: d => `Name: ${d.id} \n Gender: ${d.gender} \n Subtype: ${ d.subtype } \n Title: ${d.title} \n Published: ${formatTime( d.publication_date )}` }), Plot.text( lotr_data.nodes, Plot.selectLast({ x: "publication_date", y: `${centrality_metric}`, z: "id", text: "id", textAnchor: "start", dx: 3, dy: -3 }) ) ] }), {} ); }3b:T5e7,chart_decon2 = { // Make height a fraction of width const height = 0.4 * width; // Create the SVG space into which we will append our visual elements const svg = d3 .create("svg") .attr("width", width) // Observable built-in .attr("height", height) // Fraction of width .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Add the nodes and edges from Book 1 const nodes = book1.nodes.map(d => Object.create(d)); const links = book1.links.map(d => Object.create(d)); // Create the line marks for the edges (links) const link = svg .append("g") .attr("stroke", "#999") // link stroke color .attr("stroke-opacity", 0.6) // link stroke opacity .attr("stroke-width", 1.5) // given d in links, returns a stroke width in pixels .attr("stroke-linecap", "round") // link stroke linecap .selectAll("line") .data(links) .join("line"); // Create the circle marks for the nodes const node = svg .append("g") .attr("fill", "steelblue") // node stroke fill (if not using a group color encoding) .attr("stroke", "#fff") // node stroke color .attr("stroke-opacity", 1) // node stroke opacity .attr("stroke-width", 1.5) // node stroke width, in pixels .selectAll("circle") .data(nodes, d => d.id) // id is the character's name .join("circle") .attr("r", 5); // node radius, in pixels //.call(drag(simulation)); return svg.node(); }3c:Ta92,chart_decon3 = { // Make height a fraction of width const height = 0.4 * width; // Add the nodes and edges from Book 1 const nodes = book1.nodes.map(d => Object.create(d)); const links = book1.links.map(d => Object.create(d)); // Construct the forces. const forceNode = d3.forceManyBody(); // .strength(-1000) const forceLink = d3 .forceLink(links) .id(d => d.id) .distance(100); // Initialize the force simulation. const simulation = d3 .forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); const svg = d3 .create("svg") .attr("width", width) // Observable built-in .attr("height", height) // Fraction of width .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Create the line marks for the edges (links) const link = svg .append("g") .attr("stroke", "#999") // link stroke color .attr("stroke-opacity", 0.6) // link stroke opacity .attr("stroke-width", 1.5) // given d in links, returns a stroke width in pixels .attr("stroke-linecap", "round") // link stroke linecap .selectAll("line") .data(links) .join("line"); // Create the circle marks for the nodes const node = svg .append("g") .attr("fill", "steelblue") // node stroke fill (if not using a group color encoding) .attr("stroke", "#fff") // node stroke color .attr("stroke-opacity", 1) // node stroke opacity .attr("stroke-width", 1.5) // node stroke width, in pixels .selectAll("circle") .data(nodes, d => d.id) // id is the character's name .join("circle") .attr("r", 5); // node radius, in pixels //.call(drag(simulation)); // Add a SVG title element to serve as a quick tooltip // Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title node.append("title").text(titleTooltip); // Alternative: d => d.id (id is the character's name) // Adjust the positions of the nodes and links each time the simulation "ticks" forward through time function ticked() { 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); } // Source: https://observablehq.com/@observablehq/invalidation // `invalidation` is promise that resolves when the current cell is re-evaluated: // when the cell’s code changes, // when it is run using Shift-Enter, // or when a referenced input changes invalidation.then(() => simulation.stop()); return svg.node(); }3d:Tdab,chart_decon4 = { // Make height a fraction of width const height = 0.4 * width; // Add the nodes and edges from Book 1 const nodes = book1.nodes.map(d => Object.create(d)); const links = book1.links.map(d => Object.create(d)); // Construct the forces. const forceNode = d3.forceManyBody(); // .strength(-1000) const forceLink = d3 .forceLink(links) .id(d => d.id) .distance(100); // Initialize the force simulation. const simulation = d3 .forceSimulation(nodes) .force("link", forceLink) .force("charge", forceNode) .force("center", d3.forceCenter()) .on("tick", ticked); // `ticked` is grey because it's defined below const svg = d3 .create("svg") .attr("width", width) // Observable built-in .attr("height", height) // Fraction of width .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); // Create the line marks for the edges (links) const link = svg .append("g") .attr("stroke", "#999") // link stroke color .attr("stroke-opacity", 0.6) // link stroke opacity .attr("stroke-width", 1.5) // given d in links, returns a stroke width in pixels .attr("stroke-linecap", "round") // link stroke linecap .selectAll("line") .data(links) .join("line"); // Create the circle marks for the nodes const node = svg .append("g") .attr("fill", "steelblue") // node stroke fill (if not using a group color encoding) .attr("stroke", "#fff") // node stroke color .attr("stroke-opacity", 1) // node stroke opacity .attr("stroke-width", 1.5) // node stroke width, in pixels .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) // node radius, in pixels .call(draggable(simulation)); // `draggable` is grey because it's defined below // Add a SVG title element to serve as a quick tooltip // Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title node.append("title").text(titleTooltip); // Simple alternative (id is the character's name): d => d.id // Adjust the positions of the nodes and links each time the simulation "ticks" forward through time function ticked() { 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); } // Source: https://github.com/d3/d3-drag // Observable drag collection: https://observablehq.com/collection/@d3/d3-drag function draggable(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); } // Source: https://observablehq.com/@observablehq/invalidation // `invalidation` is promise that resolves when the current cell is re-evaluated: // when the cell’s code changes, // when it is run using Shift-Enter, // or when a referenced input changes invalidation.then(() => simulation.stop()); return svg.node(); }3e:[{"id":"349075e329e1360bfe96907660deb3ee7d156a139728bbdbd50c807a3cd08d47a717d85194a1c633957d7977c6caff3334b1f22aa0722805393ed0b933b3b2d7","href":"https://static.observableusercontent.com/files/349075e329e1360bfe96907660deb3ee7d156a139728bbdbd50c807a3cd08d47a717d85194a1c633957d7977c6caff3334b1f22aa0722805393ed0b933b3b2d7","name":"LotR_Book2_from_Python.json","type":"application/json","lastModified":1635879849014.287,"size":4825},{"id":"510d44f6c083328536d89071087e88fc34d02c8da13e35ad39da3d965d4fe40b7db1966349ae35c58ce8d2e5e161ca74fc4e7a919dd4a0c311e95e1201729ef6","href":"https://static.observableusercontent.com/files/510d44f6c083328536d89071087e88fc34d02c8da13e35ad39da3d965d4fe40b7db1966349ae35c58ce8d2e5e161ca74fc4e7a919dd4a0c311e95e1201729ef6","name":"LotR_Book3_from_Python.json","type":"application/json","lastModified":1635879849026.828,"size":5809},{"id":"a94a9ad881ca8cc6f58c2268fa74f3784cd5bfd59c6949fd10d30a00730d4023f24eb1f4be2ec0076bc9d656a00fa0d73f70895158eb88f64a4bd4b624ec4785","href":"https://static.observableusercontent.com/files/a94a9ad881ca8cc6f58c2268fa74f3784cd5bfd59c6949fd10d30a00730d4023f24eb1f4be2ec0076bc9d656a00fa0d73f70895158eb88f64a4bd4b624ec4785","name":"LotR_Book1_from_Python.json","type":"application/json","lastModified":1635879849011.586,"size":5849}] 2f:{"title":"ODSC West 2021: Network Visualization","cells":[{"id":0,"value":"# ODSC West 2021: [Network Visualization](https://observablehq.com/collection/@d3/d3-force)\n\nThere are two common visual encoding idioms (designs) for network data:","pinned":false,"hidden":false,"mode":"md"},{"id":1256,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"md`\n\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"md`## [Force-Directed Placement (D3)](https://observablehq.com/@d3/force-directed-graph?ui=classic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"viewof book = Inputs.select(\n [\"The Fellowship of the Ring\", \"The Two Towers\", \"The Return of the King\"],\n { label: \"Book:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"viewof attribute = Inputs.select([\"id\", \"gender\", \"subtype\"], {\n label: \"Color nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"viewof importance = Inputs.select(centralities, {\n label: \"Size nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## [Modifying a Force-Directed Graph (D3)](https://observablehq.com/@d3/modifying-a-force-directed-graph?ui=classic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"viewof attribs = Inputs.select([\"id\", \"gender\", \"subtype\"], {\n label: \"Color nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof centrality = Inputs.select(centralities, {\n label: \"Size nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"update_mfdg = mfdg.update(select_graph)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`## [Temporal Force-Directed Graph (D3)](https://observablehq.com/@d3/temporal-force-directed-graph?ui=classic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof date = Scrubber(dates, {\n delay: 5000,\n loop: true,\n format: date =>\n date.toLocaleString(\"en-US\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n hour: undefined,\n minute: undefined,\n timeZone: \"UTC\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"viewof colorAttribs = Inputs.select([\"id\", \"gender\", \"subtype\"], {\n label: \"Color nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"viewof sizeBy = Inputs.select(centralities, {\n label: \"Size nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"update_tfdg = {\n const nodes = data.nodes.filter(\n d => d.publication_date.getTime() === date.getTime()\n );\n\n const links = data.links.filter(\n d => d.publication_date.getTime() === date.getTime()\n );\n\n tfdg.update({ nodes, links });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"// Source: https://stackoverflow.com/questions/40346773/unique-array-for-dates-javascript\ndates = {\n const dateSerialisation = date => date.getTime();\n\n function filterUnique(data, canonicalize = x => x) {\n const lookup = new Set();\n\n return data.filter(item => {\n const serialised = canonicalize(item); //use extract the value by which items are considered unique\n\n if (lookup.has(serialised)) {\n return false;\n } else {\n lookup.add(serialised);\n return true;\n }\n });\n }\n return filterUnique(\n data.nodes.map(d => new Date(d.publication_date)),\n dateSerialisation\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"md`## [Ego Force-Directed Graph (D3)](https://observablehq.com/@d3/force-directed-graph?ui=classic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"viewof volume = Inputs.select(\n [\"The Fellowship of the Ring\", \"The Two Towers\", \"The Return of the King\"],\n { label: \"Book:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"viewof character = {\n const dataset =\n volume === \"The Fellowship of the Ring\"\n ? book1.links\n : volume === \"The Two Towers\"\n ? book2.links\n : volume === \"The Return of the King\"\n ? book3.links\n : undefined;\n\n return Inputs.select(\n Array.from(new Set(dataset.map(n => n.source))).sort((a, b) => {\n let sourceA = a.toUpperCase(); // ignore upper and lowercase\n let sourceB = b.toUpperCase(); // ignore upper and lowercase\n if (sourceA < sourceB) {\n return -1;\n }\n if (sourceA > sourceB) {\n return 1;\n }\n // sources must be equal\n return 0;\n }),\n {\n label: \"Character:\",\n format: c => capitalize(c)\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"viewof colorby = Inputs.select([\"id\", \"gender\", \"subtype\"], {\n label: \"Color nodes by:\",\n format: c => capitalize(c)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"md`\n\n\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"md`## [Matrix Representation (D3)](https://observablehq.com/@fil/hello-reorder-js?ui=classic)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"viewof sorting = select({\n options: [...Object.keys(permutations)],\n description: \"ordering method\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"Swatches(\n d3.scaleOrdinal([\"Men\", \"Hobbit\", \"Elves\", \"Ainur\", \"Dwarf\"], tableau20)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"current = setup.update(permutations[sorting]())","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"currentlist = current.map(i => graph.nodes[i].name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"graph = lotr_maxtrix // miserables","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"permutations = orders(graph)","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"lotr_maxtrix = {\n const nodesMap = new Map(book1.nodes.map(n => [n.id, n]));\n const subtypeMap = new Map([\n [\"men\", 0],\n [\"elves\", 1],\n [\"hobbit\", 2],\n [\"ainur\", 3],\n [\"dwarf\", 4],\n [\"animal\", 5],\n [\"ents\", 6]\n ]);\n const index = book1.nodes.map((d, i) => (\"id\" in d ? d.id : i));\n const l = [];\n book1.links.forEach(link => {\n const i = index.indexOf(link.source),\n j = index.indexOf(link.target);\n l.push({ source: i, target: j, value: link.weight });\n });\n\n return {\n nodes: book1.nodes\n //.filter((n, i) => i < 22)\n .map((n, i) => ({\n name: n.id,\n group: subtypeMap.get(n.subtype),\n count: n.count,\n index: n.index,\n weight: n.weight\n })),\n links: l //.filter((n, i) => n.source < 22 && n.target < 22)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md`## [Matrix Representation (Vega-Lite)](https://observablehq.com/@vega/vega-lite-adjacency-matrix?collection=@vega/vega-lite-api)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"lotr_vega_lite_matrix = {\n const base = vl.markRect({ tooltip: true }).encode(\n vl\n .x()\n .fieldO('source')\n .sort(vl.field('source_group'))\n .title(null)\n .axis({ orient: 'top' }),\n vl\n .y()\n .fieldO('target')\n .sort(vl.field('source_group'))\n .title(null),\n vl\n .color()\n .fieldN('source_group')\n .scale({ scheme: 'Tableau20' })\n .title('Group')\n );\n\n const reverse = base.encode(\n vl\n .x()\n .fieldO('target')\n .sort(vl.field('source_group')),\n vl\n .y()\n .fieldO('source')\n .sort(vl.field('source_group'))\n );\n\n return vl\n .layer(base, reverse)\n .data(\n lotr_data.links.filter(\n n =>\n new Date(n.publication_date).getDate() ===\n new Date(\"1954-07-29\").getDate()\n )\n )\n .width(500)\n .height(500)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"md`## [Line Plot Representation (Observable Plot)](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"viewof centrality_metric = Inputs.select(\n [\n \"clustering_centrality\",\n \"degree_centrality\",\n \"closeness_centrality\",\n \"betweenness_centrality\",\n \"eigenvector_centrality\",\n \"pagerank_centrality\"\n ],\n {\n format: op => capitalize(op),\n value: \"clustering_centrality\",\n label: \"Centrality Metric:\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"viewof highlight_character = Inputs.select(\n Array.from(new Set(lotr_data.nodes.map(d => d.id))).sort((a, b) =>\n d3.ascending(a, b)\n ),\n { value: \"Frodo\", label: \"Highlight:\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"md`## [Force-Directed Placement (D3)](https://observablehq.com/@d3/force-directed-graph?ui=classic) Deconstructed`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"md`#### 1. Create [Scalable Vector Graphics (SVG)](https://developer.mozilla.org/en-US/docs/Web/SVG) Space for the Visual Elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"chart_decon1 = {\n // Make height a fraction of width\n const height = 0.4 * width;\n\n // Create the SVG space into which we will append our visual elements\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width) // Observable built-in\n .attr(\"height\", height) // Fraction of width\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1378,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"md`#### 2. Add Nodes and Edges (Links)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"md`#### 3. Initialize the [Force Simulation](https://github.com/d3/d3-force#simulation)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"},{"id":1339,"value":"titleTooltip = d => `Name: ${d.id}\nSubtype: ${d.subtype}\nGender: ${d.gender}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1372,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"md`#### 4. Make the Nodes [Draggable](https://observablehq.com/collection/@d3/d3-drag)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1277,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## [Read Data](https://github.com/morethanbooks/projects/tree/master/LotR)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"lotr_data = {\n const nodesMap = new Map(data.nodes.map(n => [n.id, n]));\n return {\n nodes: data.nodes,\n links: data.links.map(l => ({\n ...l,\n source_group: capitalize(nodesMap.get(l.source).subtype),\n target_group: capitalize(nodesMap.get(l.target).subtype)\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"data = ({\n nodes: [...book1.nodes, ...book2.nodes, ...book3.nodes],\n links: [...book1.links, ...book2.links, ...book3.links]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"book1 = {\n let g = JSON.parse(\n await FileAttachment(\"LotR_Book1_from_Python.json\").text(),\n (key, value) => (key === \"publication_date\" ? new Date(value) : value)\n );\n return {\n nodes: g.nodes,\n links: g.links.map(l => ({\n ...l,\n publication_date: new Date(g.nodes[0][\"publication_date\"])\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"book2 = {\n let g = JSON.parse(\n await FileAttachment(\"LotR_Book2_from_Python.json\").text(),\n (key, value) => (key === \"publication_date\" ? new Date(value) : value)\n );\n return {\n nodes: g.nodes,\n links: g.links.map(l => ({\n ...l,\n publication_date: new Date(g.nodes[0][\"publication_date\"])\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"book3 = {\n let g = JSON.parse(\n await FileAttachment(\"LotR_Book3_from_Python.json\").text(),\n (key, value) => (key === \"publication_date\" ? new Date(value) : value)\n );\n return {\n nodes: g.nodes,\n links: g.links.map(l => ({\n ...l,\n publication_date: new Date(g.nodes[0][\"publication_date\"])\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"miserables = (await fetch(\n \"https://raw.githubusercontent.com/jdfekete/reorder.js/master/examples/miserables/miserables.json\"\n)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"// load data, update links data to include node group data\nmiserables_for_vega_lite = (await fetch(\n \"https://cdn.rawgit.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\"\n))\n .json()\n .then(data => {\n const nodesMap = new Map(data.nodes.map(n => [n.id, n]));\n return {\n nodes: data.nodes,\n links: data.links.map(l => ({\n ...l,\n source_group: nodesMap.get(l.source).group,\n target_group: nodesMap.get(l.target).group\n }))\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"md`\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## [Appendix](https://observablehq.com/@d3/gallery)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"drag = simulation => {\n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"round = num => Math.round((num + Number.EPSILON) * 100) / 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"capitalize = (text, sep = \"_\") => {\n const words = text.split(sep);\n\n return words\n .map(word => {\n return word[0].toUpperCase() + word.substring(1);\n })\n .join(\" \");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"size = {\n const graph =\n book === \"The Fellowship of the Ring\"\n ? book1\n : book === \"The Two Towers\"\n ? book2\n : book3;\n\n return d3\n .scaleSqrt()\n .domain(d3.extent(graph.nodes, d => d[centrality]))\n .nice()\n .range([8, 32]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"gsize = d3\n .scaleSqrt()\n .domain(d3.extent(select_graph.nodes, d => d[centrality]))\n .nice()\n .range([8, 32])","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"tsize = d3\n .scaleSqrt()\n .domain(\n d3.extent(\n data.nodes.filter(d => d.publication_date.getTime() === date.getTime()),\n d => d[centrality]\n )\n )\n .nice()\n .range([8, 32])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"color = d3.scaleOrdinal(tableau20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"centralities = {\n const regexp = /coefficient|centrality|pagerank/; // new RegExp('Argentina|Portugal')\n return Object.keys(book1.nodes.flat()[0]).filter(heading =>\n heading.match(regexp)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"// Source: http://vis.stanford.edu/color-names/analyzer/\ntableau20 = [\n \"#1f77b4\",\n \"#aec7e8\",\n \"#ff7f0e\",\n \"#ffbb78\",\n \"#2ca02c\",\n \"#e377c2\",\n \"#f7b6d2\",\n \"#7f7f7f\",\n \"#c7c7c7\",\n \"#bcbd22\",\n \"#dbdb8d\",\n \"#17becf\",\n \"#9edae5\",\n \"#98df8a\",\n \"#d62728\",\n \"#ff9896\",\n \"#9467bd\",\n \"#c5b0d5\",\n \"#8c564b\",\n \"#c49c94\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"reorder = require('reorder.js@^2.0.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}