25:["$","title",null,{"children":"Assignment 4: Interactive Visualization | Tejasri Vijayakumar | Observable"}] 49:Tb2e,update_demo = { var dataset = attackData; var attackers = ["Joffrey", "Robb", "Euron", "Stannis"]; var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width]) .padding(0.05); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, height]); const svg = d3.select(DOM.svg(width, height+20)); svg.selectAll("rect") .data(dataset) .enter().append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", "steelblue"); svg.selectAll("text") .data(dataset) .enter().append("text") .attr("fill", "white") .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => d); svg.selectAll("text.attacker") .data(attackers) .enter().append("text") .attr("class", "attacker") .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", height+15) .attr("text-anchor", "middle") .text(d => d); svg.node().update = () => { svg.selectAll("rect") .data(winData.map(win => win)) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("y", d => height - yScale(d)) .attr("height", d => yScale(d)) .attr("fill", "darkgreen"); svg.selectAll("text") .data(winData.map(win => win)) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .text(d => d); }; svg.node().update2 = () => { svg.selectAll("rect") .data(lostData.map(lost => lost)) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("y", d => height - yScale(d)) .attr("height", d => yScale(d)) .attr("fill", "darkred"); svg.selectAll("text") .data(lostData.map(lost => lost)) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .text(d => d); }; svg.node().reset = () => { svg.selectAll("rect") .data(dataset) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("y", d => height - yScale(d)) .attr("height", d => yScale(d)) .attr("fill", "steelblue"); svg.selectAll("text") .data(dataset) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .text(d => d); }; return svg.node(); }4a:Tafe,Our team decided to create an interactive visualization based on a Game of Thrones dataset that listed different battles that occurred throughout the show. The dataset also included fields such as which king initiated the battle, which king was the defender, and the win and loss outcome. Through our discussions, we decided to create an interactive visualization that represented each named king and the number of battles where each king acted as an attacker. Additionally, we implemented interactivity by designing toggle buttons that, when clicked, would display how many battles each king has won or lost as the attacker. Initially, we wanted to create an interactive map that would display the geographic hotspots where each king was most likely to act as the attacker, thereby displaying any trends for certain kings and their preference for certain regions. However, we ultimately did not explore this design because we realized that with this concept, most of our work would be spent focusing on trying to visualize data on a custom map, and would likely override the time we wanted to dedicate to focusing on designing an interactive component. Our team divided the work into two parts. Two members created static bar charts that initially analyzed the number of battles each king waged, as well as the number of battles each attacker king won. The remaining team members embellished the interactivity by implementing the toggle buttons that would switch between total number of battles and battles won or lost. In terms of technical challenges, we sometimes found it difficult to format the data that was displayed with each bar (eg. the king’s name and the number associated with each bar that would grow or shrink based on the interaction). In the notebook, we included design iterations where we were unable to properly format our visualization as snapshots of our progress. Through user tests, we learned that the intention of our interaction was clear, but only after we provided users with more context about our data. From the user feedback we learned that users would prefer two different toggles: one for battles that were won and another for battles lost, which would activate color coded graphs (green for the win and red for the loss). We also discovered that the texts summarizing the battles that were won was not very readable. We updated our graph according to the user feedback. With more time to work and to digest our user feedback, our team would’ve considered creating additional interactivity that would allow the win and loss graphs to be displayed together, perhaps in the format of a stacked bar chart. We would have also tried to design more clear labels and information to give insight—perhaps as a hover or tooltip—to which specific battles each king won or lost.4b:T460,{ let final = [0,0,0,0]; let jtb = kings_battles_v1.map(x => {if (x.attacker_king == "Joffrey/Tommen Baratheon" && x.attacker_outcome == "win"){ return 1; } else { return 0; } }); let sum = 0; for (let i = 0; i < jtb.length; i++) { sum += jtb[i]; } final[0] = sum; let rs = kings_battles_v1.map(x => {if (x.attacker_king == "Robb Stark" && x.attacker_outcome == "win"){ return 1; } else { return 0; } }); sum = 0; for (let i = 0; i < rs.length; i++) { sum += rs[i]; } final[1] = sum; let beg = kings_battles_v1.map(x => {if (x.attacker_king == "Balon/Euron Greyjoy" && x.attacker_outcome == "win"){ return 1; } else { return 0; } }); sum = 0; for (let i = 0; i < beg.length; i++) { sum += beg[i]; } final[2] = sum; let sb = kings_battles_v1.map(x => {if (x.attacker_king == "Stannis Baratheon" && x.attacker_outcome == "win"){ return 1; } else { return 0; } }); sum = 0; for (let i = 0; i < sb.length; i++) { sum += sb[i]; } final[3] = sum; return final; }4c:T55a,update_demo2 = { var dataset = attackData; var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, width]) .padding(0.05); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, height]); const svg = d3.select(DOM.svg(width, height)); svg.selectAll("rect") .data(dataset) .enter().append("rect") .attr("x", (d, i) => xScale(i)) .attr("y", d => height - yScale(d)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(d)) .attr("fill", "steelblue"); svg.selectAll("text") .data(dataset) .enter().append("text") .attr("fill", "white") .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2) .attr("y", d => height - yScale(d) + 15) .attr("dy", "0.35em") .attr("text-anchor", "middle") .text(d => d); svg.node().update = () => { svg.selectAll("rect") .data(winData.map(win => win)) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("y", d => height - yScale(d)) .attr("height", d => yScale(d)); }; svg.node().reset = () => { svg.selectAll("rect") .data(dataset) .transition() // animation .duration(800) .ease(d3.easeLinear) .attr("y", d => height - yScale(d)) .attr("height", d => yScale(d)); }; return svg.node(); }4d:[{"id":"fec6b142013fdc48e38b96c3b928b24647a47c342562b0b1b32b9ac47da212e7c3f3361c98ae9a5e3ca0f7111a6c1ad6bab384737c271a8367d3c77ff28e232c","href":"https://static.observableusercontent.com/files/fec6b142013fdc48e38b96c3b928b24647a47c342562b0b1b32b9ac47da212e7c3f3361c98ae9a5e3ca0f7111a6c1ad6bab384737c271a8367d3c77ff28e232c","name":"5kings_battles_v1.csv","type":"text/csv","lastModified":1679355930475.381,"size":8550}] 29:{"id":"076d276380847acd","slug":null,"title":"Assignment 4: Interactive Visualization","thumbnail":"b3dc54b8c7a431ef3deda916137edd2d0a3ce06a4e79a4453ad4ca2dedabf3dc","access_level":"public","create_time":"$D2023-03-20T23:44:48.088Z","update_time":"$D2023-03-23T20:09:33.319Z","view_time":null,"first_public_time":"$D2023-03-20T23:44:48.088Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e1f3c0e0b5da7edb","login":"tv2265","name":"Tejasri Vijayakumar","avatar_url":"https://avatars-next.observableusercontent.com/67d815dc983ac327e4117c3db9e30f7605bc39c72a4e643a9b89fe2f0a2b441a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"93d9209d91e97130","login":"tv2265","name":"Tejasri Vijayakumar","avatar_url":"https://avatars-next.observableusercontent.com/67d815dc983ac327e4117c3db9e30f7605bc39c72a4e643a9b89fe2f0a2b441a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7b54b0c3f6814aa7","login":"add2155","name":"Aylin Dilan Demiralp","avatar_url":"https://avatars-next.observableusercontent.com/4f33cab3bae6a9178182fba732a4a1183c36a432957ad1d9f14f087c525b97e8","tier":null,"role":"editor"},{"type":"individual","id":"c6a29ec61285687e","login":"cs4016","name":"Christina Su","avatar_url":"https://avatars-next.observableusercontent.com/c610c175874b0ececa734ecb9aff064068239db0014bb19afeb429fb42b9e71b","tier":null,"role":"editor"},{"type":"individual","id":"93d9209d91e97130","login":"tv2265","name":"Tejasri Vijayakumar","avatar_url":"https://avatars-next.observableusercontent.com/67d815dc983ac327e4117c3db9e30f7605bc39c72a4e643a9b89fe2f0a2b441a","tier":null,"role":"editor"},{"type":"individual","id":"68a482cadb54a710","login":"wrj2106","name":"Reid Jesselson","avatar_url":"https://avatars-next.observableusercontent.com/f98768d2d9893e9fd3b6ac11e45b1ccc567c939564aadbfb67717aec1456737b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 4: Interactive Visualization","cells":[{"id":256,"value":"# Assignment 4: Interactive Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"Analyzing battle data from Game of Thrones' War of the Five Kings era.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"## Our Final Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"viewof battles_won = Inputs.toggle({label: \"Battles Won\", value: false});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof battles_lost = Inputs.toggle({label: \"Battles Lost\", value: false});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"{\n if (battles_won) \n update_demo.update();\n else \n update_demo.reset();\n return battles_won;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"{\n if (battles_lost) \n update_demo.update2();\n else \n update_demo.reset();\n return battles_lost;\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"## Project Writeup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"## Initial Explorations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"kings_battles_v1 = FileAttachment(\"5kings_battles_v1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof search = Inputs.search(kings_battles_v1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Inputs.table(search, {\n\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"winData = [13, 8, 7, 2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"lostData = [2, 2, 0, 3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"{\n let final = [0,0,0,0];\n let jtb = kings_battles_v1.map(x => {if (x.attacker_king == \"Joffrey/Tommen Baratheon\"){\n return 1;\n } else {\n return 0;\n }\n });\n \n let sum = 0;\n for (let i = 0; i < jtb.length; i++) {\n sum += jtb[i];\n }\n final[0] = sum;\n\n\n let rs = kings_battles_v1.map(x => {if (x.attacker_king == \"Robb Stark\"){\n return 1;\n } else {\n return 0;\n }\n });\n \n sum = 0;\n for (let i = 0; i < rs.length; i++) {\n sum += rs[i];\n }\n final[1] = sum;\n\n\n let beg = kings_battles_v1.map(x => {if (x.attacker_king == \"Balon/Euron Greyjoy\"){\n return 1;\n } else {\n return 0;\n }\n });\n \n sum = 0;\n for (let i = 0; i < beg.length; i++) {\n sum += beg[i];\n }\n final[2] = sum;\n\n\n let sb = kings_battles_v1.map(x => {if (x.attacker_king == \"Stannis Baratheon\"){\n return 1;\n } else {\n return 0;\n }\n });\n \n sum = 0;\n for (let i = 0; i < sb.length; i++) {\n sum += sb[i];\n }\n final[3] = sum;\n \n return final;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"attackData = [14, 10, 7, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"//attacks by king bar chart\nwidth = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"height = 50 * attackData.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(attackData)])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"y = d3.scaleBand()\n .domain(d3.range(attackData.length))\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"xMargin = x.copy().range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"yMargin = y.copy().range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof update_btn = Inputs.button(\"update data values\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"attackBar = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", yMargin.range()[1]+10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\")\n .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n const bar = svg.selectAll(\"g\")\n .data(attackData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${yMargin(i)})`);\n\n bar.append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"x\", 0)\n .attr(\"width\", xMargin)\n .attr(\"height\", yMargin.bandwidth() - 1);\n\n bar.append(\"text\")\n .attr(\"fill\", \"white\")\n .attr(\"x\", xMargin) // <----- modify this line\n .attr(\"y\", yMargin.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"winData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"winBar = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", yMargin.range()[1]+10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"10\")\n .attr(\"text-anchor\", \"end\")\n .style('border', '1px dotted #999'); // to help see the edges of our canvas\n\n const bar = svg.selectAll(\"g\")\n .data(winData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0,${yMargin(i)})`);\n\n bar.append(\"rect\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"x\", 0)\n .attr(\"width\", xMargin)\n .attr(\"height\", yMargin.bandwidth() - 1);\n\n bar.append(\"text\")\n .attr(\"fill\", \"white\")\n .attr(\"x\", xMargin) // <----- modify this line\n .attr(\"y\", yMargin.bandwidth() / 2)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"## OUR SECOND INTERACTIVE GRAPH \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"viewof battles_won2 = Inputs.toggle({label: \"Battles Won\", value: false});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"{\n if (battles_won2) \n update_demo2.update();\n else \n update_demo2.reset();\n return battles_won2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null