3f:null 40:["$","title",null,{"children":"Game of Thrones Relationship Graph | Vivek Kumar | Observable"}] 46:T2df1,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); }) .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", "140px") .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(); }); // 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('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 grayjoy = document.getElementById('4').checked; var targaryen = document.getElementById('1').checked; var stark = document.getElementById('2').checked; var lannister = document.getElementById('3').checked; var baratheon = document.getElementById('5').checked; var snow = document.getElementById('6').checked; var other = document.getElementById('7').checked; var houses = [targaryen,stark,lannister,baratheon,grayjoy,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); }) .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", "140px") .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('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:T490,md ` #### Describe what you learned in user testing and how you might improve your visualization if you had another week. The usage of the filters was a massive source of confusion. People had trouble understanding what the relationship dropdown meant - sometimes the edge highlighting is less visible. The checkboxes are initially confusing, and there’s a use case where if you select and then deselect everything the visualization goes away (even causing some users to completely refresh the page to get back to the initial graph). The arrows were small and hard to read - and sometimes the direction is unclear (the tiny edges are indistinguishable). We can perhaps fix these issues by providing better labeling for the filters. We would have built them into the chart itself if we had more time, fixed edge case behavior as described above, and tried to improve how stuff is emphasized in the graph when you actually select something. Moreover, the arrows should be at the ends of edges and larger. We found that even Game of Thrones fans were in for some surprises (Jon Snow “kills” Lyanna Stark (his mother), since she dies shortly after childbirth). `48:T724,md ` ### User 1: Notice first: - Big graph diagram Usage: - Notices the legend color matched house name - Clicked on check boxes - Selected a couple of relationship filters - Hover mode to display node and links Confusing: - Check box use confusing - Drag functionality not clear - Arrow direction meaning unclear at first ### User 2: Notice First: - Lots of circles with lines connecting them Usage: - Spent the most time playing with the physics dragging the circles - Did use the colors to check whether the people in the houses made sense - Did hover over each point to see who has what relationship - Played with the checkbox filtering Confusing: - Did not realize you could change the relationship highlights using the dropdown - Thought that the legend would change with the checkbox - Thought that the arrows were difficult to individually follow to the next point as They wouldn’t highlight the whole time ### User 3: Notice First: - The legend and the circles Usage: - Hovered over the diagram to see labels - Click and dragged around the circles - Changed the relationship highlights using the dropdown Confusing: - Had trouble finding specific characters (for instance couldn’t find the hound) - Did not understand the relationship highlighting until explained ### User 4: Notice First: - Filters (house and relationship filters) Usage: - Hovered over graph, moved graph around - Tried changing house, clicked on combos of checkboxes - Tried changing filter - Tried various combinations of checkboxes and filter, intermittent dragging Confusing: - Didn’t understand what relationship filter did (couldn’t see color difference in lines) - Checkboxes made parts of diagram disappear, refreshed entire page to get back to original diagram - Had trouble following arrows - Missing characters `49:[{"id":"ccb43404821830e1411f7adc376ece19db6fffe7c024978f846e051e82c260e21fd3dc3a32117d33c55c29252a22b7b78e0624413b43aff263e27378819b22eb","href":"https://static.observableusercontent.com/files/ccb43404821830e1411f7adc376ece19db6fffe7c024978f846e051e82c260e21fd3dc3a32117d33c55c29252a22b7b78e0624413b43aff263e27378819b22eb","name":"got-r.json","type":"application/json","lastModified":1585449197813.27,"size":57671},{"id":"636e4c28c6692ef3b092e169ba268c3189dccb755743162707a6a39f8ff1b0a4a70fb507b62665f0f0478c7df3058ed43c62dd7034e6975343b12ec8d45ae266","href":"https://static.observableusercontent.com/files/636e4c28c6692ef3b092e169ba268c3189dccb755743162707a6a39f8ff1b0a4a70fb507b62665f0f0478c7df3058ed43c62dd7034e6975343b12ec8d45ae266","name":"91119609_514872195854983_2870221795175170048_n.png","type":"image/png","lastModified":1585533099447.206,"size":427926}] 44:{"id":"745256edeeea3b9f","slug":"game-of-thrones-relationship-graph","title":"Game of Thrones Relationship Graph","thumbnail":"ee41b217c7b0c7c3b8c27903a069081bc099b5dfddbe664744bc32fd489ba62c","access_level":"public","create_time":"$D2020-03-29T02:29:35.630Z","update_time":"$D2020-03-30T19:59:27.619Z","view_time":null,"first_public_time":"$D2020-03-29T03:21:18.562Z","has_unpublished_edits":null,"fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"3a2ad0d315beab7f","login":"vk2425","name":"Vivek Kumar","avatar_url":"https://avatars-next.observableusercontent.com/75bb8650b7e2ba833b59dd4175cf3e2c505d342847dc7ec508ae20e0eb9d1b54","tier":"starter_2024","bio":"","following":false},"version":167,"publish_version":167,"role":null,"authored":false,"authors":[{"type":"individual","id":"975e0c8d1db31ecf","login":"vk2425","name":"Vivek Kumar","avatar_url":"https://avatars-next.observableusercontent.com/75bb8650b7e2ba833b59dd4175cf3e2c505d342847dc7ec508ae20e0eb9d1b54","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"975e0c8d1db31ecf","login":"vk2425","name":"Vivek Kumar","avatar_url":"https://avatars-next.observableusercontent.com/75bb8650b7e2ba833b59dd4175cf3e2c505d342847dc7ec508ae20e0eb9d1b54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":32,"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":false,"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":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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"data = FileAttachment(\"got-r.json\").json()","pinned":false,"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":115,"value":"md `# Writeup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md `\n#### Describe any abandoned alternative designs and describe how work was split amongst team members.\n\nWe originally started with an arc diagram design, but decided that the view was too limited, leading to much of the arc being out of screen. It was hard to move the cursor precisely to highlight a specific person, and there was a lack of interactivity. Eventually, we adopted a force diagram, because it was easier to introduce interactivity and graphs are more intrinsic when representing relationships.\n\nInitially, we split the work with two working on the arc diagram and two working on the force diagram. After we abandoned the arc diagram, we each evenly did parts of the force diagram.\n\nArc Diagram:\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md `\n#### Include specific technical or design challenges you encountered.\n\nOur first challenge was preprocessing a large amount of data for D3, which required the use of dynamic programming. The data included extraneous relationships and characters needed to be cut. Furthermore, new keys (such as group number for house) needed to be added.\n\nAnother design challenge centered around how to incorporate more interactivity. The graph was already interactive since the user could drag the nodes around, but we felt this wasn’t contributing as much. We decided to add hover functionality: the selected node and its neighboring nodes and links are emphasized. In order to use more of the dataset, we also tried to incorporate relationship data, which turned our graph into a directed graph and involved edge coloring, and added filters for relationship and node.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md `# Usability Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$48","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":"$W49","stdlib":"1"}} 45:"$44:body"