3f:null 40:["$","title",null,{"children":"Game of Thrones Relationship Graph | 2007040204 | Observable"}] 46:T2f89,chart = { // Obtain links and nodes from json file. var links = data.links.map(d => Object.create(d)); var nodes = data.nodes.map(d => Object.create(d)); // Force Diagram var simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); // SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); //Create marker arrows var marker = svg .append("svg:defs") .selectAll("marker") .data(["end"]) .enter() .append("svg:marker") .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 0) .attr("refY", 0) .attr("markerWidth", 3) .attr("markerHeight", 2) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); // Create links /*const link = svg .append("g") .attr("stroke", "Gray") .selectAll("line") .data(links) .join("line") .attr("stroke-width",1) .attr("marker-mid", "url(#end)")*/ var link = svg .selectAll(".link") .data(links) .enter() .append("polyline") //Create as polyline for arrows .attr("stroke", "Gray") .attr("stroke-width",3) // Set default stroke width .attr("marker-mid", "url(#end)") // Add Marker // Create nodes var node = svg .append("g") .attr("stroke", "White") .selectAll("circle") .data(nodes) .join("circle") .attr("r", d=>5*Math.sqrt(d.value)) //.attr("fill", function(d) { return color(d.group); }) .attr("fill", function(d) { return mycolor(d.group); }) //.attr("fill", function(d) { return "pink"; }) .call(drag(simulation)).attr('class', 'node'); var nodeLinkStatus = {}; links.forEach(d => { nodeLinkStatus[`${d.source.index},${d.target.index}`] = 1; }); function isConnected(a, b) { return nodeLinkStatus[`${a.index},${b.index}`] || nodeLinkStatus[`${b.index},${a.index}`] || a.index === b.index; } // Node interactibility node.on('mouseover',function (d) { node.style('stroke-opacity', function (o) { var thisOpacity = 0; if(isConnected(d, o)){ thisOpacity = 1; } else{ thisOpacity = 0.3; } this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); link.style('opacity', function(l) { if (d === l.source || d === l.target){ return 1; } else{ return 0.2; } }); link.style('stroke-width', function(l) { if (d === l.source || d === l.target){ return 5; }else{ return 3; } }); var xpos =d.x; var ypos = d.y; var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos+10},${ypos})`); tgrp.append("rect") .attr("width", "40px") .attr("height", "24px") .attr("fill", "gray") tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "110px") .attr("font-weight", "bold") .attr("fill", "white") .text(`${d.name}`); }); node.on('mouseout',function (d) { node.style('stroke-opacity', function (o) { this.setAttribute('fill-opacity', 1); return 1; }); link.style('opacity',1); link.style('stroke-width',3); d3.select("#tooltip").remove(); }); // Legend var allGroupNames = ['Targaryen','Stark','Lannister','Greyjoy','Baratheon','Snow','Other'] var groupHouses = (color.domain()).slice(0,7) var colorLegend = svg .selectAll('.colorLegend') .data(groupHouses) .enter().append("g") //下面是图标的位置 .attr('transform', function(d, i) { return 'translate('+(10)+',' + (10+(25*i)) +')'; }) colorLegend.append('rect') //这里对应的是左上角图标的颜色 .attr('fill', function(d) { return color(d); }) //.attr('fill', function(d) { return "black"; }) .attr('width', 20) .attr('height', 20); colorLegend.append("text") .attr('x', 25) .attr('y', 25/2) .text(function(d) {return allGroupNames[d-1]; }); // Simulation 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);*/ link.attr("points", function(d) { return d.source.x + "," + d.source.y + " " + (d.source.x + d.target.x)/2 + "," + (d.source.y + d.target.y)/2 + " " + d.target.x + "," + d.target.y; }); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); // Event listener for edge coloring function update() { link.style('stroke', function(l) { var query = viewof order.value if (query.includes("sibling")){ if (l.relationship === "sibling" || l.relationship === "siblings"){ return '#DC143C'; } } else if (l.relationship === query){ return '#DC143C'; } else{ return 'gray'; } }) } function changeFunction() { svg.selectAll("*").remove(); var targaryen = document.getElementById('1').checked; var stark = document.getElementById('2').checked; var lannister = document.getElementById('3').checked; var grayjoy = document.getElementById('4').checked; var baratheon = document.getElementById('7').checked; var snow = document.getElementById('6').checked; var other = document.getElementById('5').checked; var houses = [targaryen,stark,lannister,grayjoy,baratheon,snow,other]; var validNodes = []; var validLinks = []; var i; for (i=0;i Object.create(d)); links = validLinks.map(d => Object.create(d)); // Force Diagram simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); //Create marker arrows marker = svg .append("svg:defs") .selectAll("marker") .data(["end"]) .enter() .append("svg:marker") .attr("id", String) .attr("viewBox", "0 -5 10 10") .attr("refX", 0) .attr("refY", 0) .attr("markerWidth", 3) .attr("markerHeight", 2) .attr("orient", "auto") .append("svg:path") .attr("d", "M0,-5L10,0L0,5"); link = svg .selectAll(".link") .data(links) .enter() .append("polyline") //Create as polyline for arrows .attr("stroke", "Gray") .attr("stroke-width",3) // Set default stroke width .attr("marker-mid", "url(#end)") // Add Marker // Create nodes node = svg .append("g") .attr("stroke", "White") .selectAll("circle") .data(nodes) .join("circle") .attr("r", d=>5*Math.sqrt(d.value)) .attr("fill", function(d) { return color(d.group); }) //.attr("fill", function(d) { return "black"; }) .call(drag(simulation)).attr('class', 'node'); nodeLinkStatus = {}; links.forEach(d => { nodeLinkStatus[`${d.source.index},${d.target.index}`] = 1; }); // Node interactibility node.on('mouseover',function (d) { node.style('stroke-opacity', function (o) { var thisOpacity = 0; if(isConnected(d, o)){ thisOpacity = 1; } else{ thisOpacity = 0.3; } this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; }); link.style('opacity', function(l) { if (d === l.source || d === l.target){ return 1; } else{ return 0.2; } }); link.style('stroke-width', function(l) { if (d === l.source || d === l.target){ return 5; }else{ return 3; } }); var xpos =d.x; var ypos = d.y; var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos+10},${ypos})`); tgrp.append("rect") .attr("width", "40px") .attr("height", "24px") .attr("fill", "gray") tgrp.append("text") .attr("x", 5) .attr("y", 14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "white") .text(`${d.name}`); }); node.on('mouseout',function (d) { node.style('stroke-opacity', function (o) { this.setAttribute('fill-opacity', 1); return 1; }); link.style('opacity',1); link.style('stroke-width',3); d3.select("#tooltip").remove(); }); colorLegend = svg.selectAll('.colorLegend') .data(groupHouses) .enter().append("g") .attr('transform', function(d, i) { return 'translate('+(10)+',' + (10+(25*i)) +')'; }) colorLegend.append('rect') //.attr('fill', function(d) { return color(d); }) .attr('fill', function(d) { return "black"; }) .attr('width', 20) .attr('height', 20); colorLegend.append("text") .attr('x', 25) .attr('y', 25/2) .text(function(d) {return allGroupNames[d-1]; }); // Simulation 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);*/ link.attr("points", function(d) { return d.source.x + "," + d.source.y + " " + (d.source.x + d.target.x)/2 + "," + (d.source.y + d.target.y)/2 + " " + d.target.x + "," + d.target.y; }); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); } viewof order.addEventListener("input", update); invalidation.then(() => viewof order.removeEventListener("input", update)); viewof orderHouse.addEventListener("input", changeFunction); invalidation.then(() => viewof orderHouse.removeEventListener("input",changeFunction)); return svg.node(); }47:[{"id":"ccb43404821830e1411f7adc376ece19db6fffe7c024978f846e051e82c260e21fd3dc3a32117d33c55c29252a22b7b78e0624413b43aff263e27378819b22eb","href":"https://static.observableusercontent.com/files/ccb43404821830e1411f7adc376ece19db6fffe7c024978f846e051e82c260e21fd3dc3a32117d33c55c29252a22b7b78e0624413b43aff263e27378819b22eb","name":"got-r.json","type":"application/json","lastModified":1675410836445.037,"size":57671},{"id":"edbfbfd553ed6c92aaebc2a1a6d950e6898d34f7cabe446133b44fdbe543b4398c85bf77ee5737f3e972de10605ac9add26aeec1d6f458ccb93871706fbea56e","href":"https://static.observableusercontent.com/files/edbfbfd553ed6c92aaebc2a1a6d950e6898d34f7cabe446133b44fdbe543b4398c85bf77ee5737f3e972de10605ac9add26aeec1d6f458ccb93871706fbea56e","name":"got-me@23.json","type":"application/json","lastModified":1675443144085.88,"size":31574},{"id":"468e2dcac492574245d1b80270d4c5c72e42b8e8590967fca750ae06e6e8e01fe8bb6407b2a91396755dfff93913a0cf1a21f0e45d7fb7c26b97e797fb143f00","href":"https://static.observableusercontent.com/files/468e2dcac492574245d1b80270d4c5c72e42b8e8590967fca750ae06e6e8e01fe8bb6407b2a91396755dfff93913a0cf1a21f0e45d7fb7c26b97e797fb143f00","name":"got-me -change.json","type":"application/json","lastModified":1675495227114.898,"size":41156}] 44:{"id":"435f8c73c91d9d85","slug":"game-of-thrones-relationship-graph","title":"Game of Thrones Relationship Graph","thumbnail":"a37bc1c7c05093d61980efbc464ed0d4247f77db3dd23fed35dc751f42f27565","access_level":"public","create_time":"$D2023-02-03T07:53:56.445Z","update_time":"$D2023-02-04T07:59:18.361Z","view_time":null,"first_public_time":"$D2023-02-03T07:53:56.445Z","has_unpublished_edits":null,"fork":{"id":"745256edeeea3b9f","slug":"game-of-thrones-relationship-graph","title":"Game of Thrones Relationship Graph","owner":{"id":"3a2ad0d315beab7f","login":"vk2425","name":"Vivek Kumar"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d7fd1ccf1e02aa2d","login":"2007040204","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1ff2e1db17c06e885758320482222e6944be6afa41a455dddb8a4a0ef4eecc92","tier":"starter_2024","bio":"","following":false},"version":267,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8d242af798bcbe01","login":"2007040204","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1ff2e1db17c06e885758320482222e6944be6afa41a455dddb8a4a0ef4eecc92","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8d242af798bcbe01","login":"2007040204","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1ff2e1db17c06e885758320482222e6944be6afa41a455dddb8a4a0ef4eecc92","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Game of Thrones Relationship Graph","cells":[{"id":0,"value":"md `# Game of Thrones Relationship Graph\n\n#### Vivek Kumar\n#### Jr Martinez\n#### James Wong\n#### Arya Zhao\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof order = {\n const options = [\n {name: \"All\", value: \"normal\"},\n {name: \"Killed\", value: \"killed\"},\n {name: \"Allies\", value: \"allies\"},\n {name: \"Married/Engaged\", value: \"marriedEngaged\"},\n {name: \"Siblings\", value: \"sibling\"},\n {name: \"Parents\", value: \"parents\"},\n {name: \"Serves\", value: \"serves\"}\n ];\n const form = html`

Filter Relationships: Greyjoy\n Stark\n Other\n Lannister\n Baratheon\n Targaryen\n Snow
\n \n

`;\n\n return checkHouse\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Visualization Height\nheight = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"mycolor = i => {\n let cc ;\n cc = color(i)\n if(i==7){\n cc=\"black\"\n }\n return cc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Assign colors to groups \n// Each group is assigned during preprocessing\ncolor = {\n var allGroups = data.nodes.map(function(d){return d.group})\n allGroups = [...new Set(allGroups)]\n const scale = d3.scaleOrdinal().domain(allGroups).range(d3.schemeSet2);\n return scale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Drag Events\ndrag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = FileAttachment(\"got-me -change.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"gotR = FileAttachment(\"got-r.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md `\n# Resources\nMarkers: https://medium.com/@raghothams/markers-with-d3-7b01b8be9efe\nBasic Force Diagram Inspiration: https://observablehq.com/@d3/force-directed-graph\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"