3f:null 40:["$","title",null,{"children":"Rie, Jade, and Lydia Final Project | CS 314: Data Vis | Observable"}] 46:T187f,md` **About Talk of the Town: ** "Talk of the Town is a simulation framework that procedurally generates narratively rich storyworlds that are meant for use in downstream media experiences. These storyworlds can be thought of as databases that store data about characters and locales in the storyworld, along with data describing the complex interrelations between them. In order to use a storyworld in a downstream media experience (such as Prof. Ryan's "Bad News" project), a human or secondary computer program must work to sift out the interesting narrative material from this database. This can be quite challenging, due to the overwhelming size of the database and the variety of possible interrelations between storyworld entities." - James Ryan **Our Goals:** StoryWorld Explorer is a research project that aims to help users facilitate and visualize important information of a given storyworld generated by Talk of the Town. This visualization is a part Storyworld Explorer and specifically focuses on character relationships. For a given character in our town, what are the relationships that character has with different people in the town? What relationships do those characters have with each other? Which relationships are not mutual? (for example, one character might see the relationship one way, while the other character has different feelings). *Ultimately, we want to create a visualization that allows the user to sort, filter, and dive into information about the characters and relationship in a town * ** Data: ** The dataset \`town\` is a json dataset that shows all the generated information for a town simulated from Talk of the Town. To focus in on character relationships, we filter this data to get the dataset \`characters\`. \`characters\` is an array that stores a character object. Each object has an id, and arrays such as \`friends\`, \`neighbors\`, and \`enemies\` that store the id of characters that fall into the described category. First, we want to create an array \`nodes\` that will store all the people that have a relationship with a given \`mainCharacter\` - created using the functions \`getNodes\` . To allow users to set \`numNodes\` -the number of characters shown -, the function \`nodesFunction\` sorts and filters the characters by how important they are to the \`mainCharacter\` (measured by \`salience\`). To create the links for the matrix, \`getLinks\` creates the dataset \`links\`, which stores the two characters, relatoptionship type, and the category(s) that relationship falls into. **Description: ** The visualization is a matrix and displays the relationships between characters who are in the world of the character who is selected as the main character. The rows and columns show the characters’ names as labels and the squares show the relationships (spouse, best friend, family, friends, etc.) using the color channel. The squares are nested to demonstrate because two people could have more than one relationship. The number of characters in the matrix is set to 20 by default, but the user can change the number of characters. The order of the characters on the axis is by default sorted by salience - most to least important to the main characters lives. The users can also sort the characters by alphabetical order, degrees of the node, and birth years. Hovering and clicking (checkbox implementation courtesy of [unkleho](https://observablehq.com/@unkleho/checkbox-with-color-key)) also change the focus of the data shown and gives the user more flexibility to focus on characters and relationships that seem interesting. If the users hover over the name of the character, the other characters’ squares are dimmed to highlight the hovered character. Similarly, if they hover over one of the squares, the hovered relationship is emphasized. Every relationship is drawn in the perspective of the person in the row. Thus, two squares are shown because each relationship is represented twice: from the perspective of the first character, and from the perspective of the second character. Text displays by the hovered square to indicate the relationship the character in the column has with the character in the row. Finally, clicking the character name updates the matrix to show the world of the clicked character. *Changing the matrix to focus on different main characters allows the user to get a better understanding of the many people in the town from different perspectives, rather than just one main character. **Takeaways from the Data: ** First, the matrix gives the user the ability to visualize and discover multiple relationships in the town. Before our visualization, there was no way to visualize Talk of the Town. The data was read as lines of code, requiring intensive time and energy to filter through the text to find interesting material. This matrix gives a birds eye view. Then, the sorting, legend filtering, hovering, and clicking tools allow the user to dive in deeper to different relationships and characters. Our interactive matrix sheds light to important ideas about the generated town that could be missed or missunderstood. For example, the matrix is asymmetrical, indicating that many of the relationships are not mutual and different characters have different feelings about the same realtionship. Finding these asymetries help discover interesting relationship dynamics. By giving the user the options to click on the checkboxes representing different relationships, for example by checking the 'friend' box of a certain main character, it would be immediately apparent to the user who are part of a person's friend group. At the same time, by hovering over the other characters that were indiciated as a friend of the main character, we could quickly see if the others and the main character have overlap in the people they are friends with. The sort tools and number of character flexibility allows for further exploration. The visualization starts with a main character early in the town's history. As the user explors characters later in the town through exploring birth year, the number of relationships and connections grows. In these way, our matrix provides a much more efficient way for the viewers to identify social groups within the town. `47:T33e3,{ // set the size let width = 1100, height = 1100, margin = {top: 100, left: 100, right: 10, bottom: 10}; const div = d3.select(DOM.element('div')) .style('overflow-x', 'auto'); // create svg let svg = div.append('svg') .style("width", width) .style("height", height); // d3.create('svg').attr('width', width).attr('height', height); function matrix(){ d3.selectAll('rect').remove(); d3.selectAll('text').remove(); svg.append('text') .attr('id', 'nameText'); var checkboxHighlight = function(d){ d3.selectAll('rect').attr('opacity','0.1'); console.log('check box selected: '+d); var checkedArray = d; for (var i = 0;i b.name ){ return 1; } return 0; } // by salience: higher to lower function sortbySalience( a, b ) { if ( a.salience > b.salience ){ return -1; } if ( a.salience < b.salience ){ return 1; } return 0; } // by birth year: smaller to larger function sortbyBirthYear( a, b ) { if ( a.birthYear < b.birthYear ){ return -1; } if ( a.birthYear > b.birthYear ){ return 1; } return 0; } // by the number of categories: larger to smaller function sortbyNumOfCategories( a, b ) { var aLink = links.filter(d => { return (d.target === characters[a.id].fullName) }) var bLink = links.filter(d => { return (d.target === characters[b.id].fullName) }) if ( aLink[0].category.length < bLink[0].category.length ){ return -1; } if ( aLink[0].category.length > bLink[0].category.length ){ return 1; } return 0; } // by the node degree: larger to smaller function sortbyDegree( a, b ) { if ( a.nodeDegree > b.nodeDegree ){ return -1; } if ( a.nodeDegree < b.nodeDegree ){ return 1; } return 0; } // sort nodes depending on the dropdown if (sortBy === "name") { var sortedNodes = nodes.sort( sortbyName ); } else if (sortBy === "salience") { var sortedNodes = nodes.sort( sortbySalience ); } else if (sortBy === "birthYear") { var sortedNodes = nodes.sort( sortbyBirthYear ); } else if (sortBy === "numOfCategories") { var sortedNodes = nodes.sort( sortbyNumOfCategories); } else if (sortBy === "degree") { var sortedNodes = nodesWithDegree.sort(sortbyDegree); } // assign index number to each node var nodesIndex = [] for (var i = 0; i < sortedNodes.length; i++) { nodesIndex.push(sortedNodes[i].name) } // for (var i = 0; i < numNodes.length; i++) { // for (var j = 0; j < numNodes.length; j++) { // svg.append('rect') // .attr('id', 'whitesquare') // .attr('x', i*sidelength + 300) // .attr('y', j*sidelength + 220) // .attr('width',sidelength) // .attr('height',sidelength) // .attr('fill','white') // .attr('stroke','black'); // } // } // // add white background for (var i = 0; i < numNodes; i++) { for (var j = 0; j < numNodes; j++) { svg.append('rect') .attr('x', i * sidelength + 300) .attr('y', j * sidelength + 300) .attr('width',sidelength) .attr('height',sidelength) .attr('fill','transparent') .attr('stroke','black') .on('mouseover', function(event,d) { return highlight(d) }) .on('mouseout', function(event, d) { d3.select('#highlightRect1').attr('stroke','none'); d3.select('#highlightRect2').attr('stroke','none'); }); } } var nodesIndexCopy = nodesIndex.map((x)=>x); // add squares to the metrics for (var i = 0; i < links.length; i++) { var cat = links[i].category; var numCat = cat.length; var personName1 = links[i].target.replace(/ /g,"_"); var personName2 = links[i].source.replace(/ /g,"_"); makeNestedSquares2(numCat,numCat, sidelength, sidelength*nodesIndex.indexOf(links[i].target) + 300, sidelength*nodesIndex.indexOf(links[i].source) + 300, cat,nodesIndex,sortedNodes,nodesIndexCopy,personName1,personName2, links[i]); } // add row labels to the metrics svg.selectAll('.rowLabel') .data(sortedNodes.slice(0, numNodes)) .enter() .append('text') .attr('class',(d)=>d.name.replace(/ /g,"_")+'_col') .text((d)=> d.name) .classed('rotation', true) .attr('fill', 'black') .attr("cursor", "pointer") .attr('font-weight', (d,i)=>{ if (d.name ==characters[mutable mainCharacterID].fullName){ return "bold"; } else { return "normal" };}) .on('click', (event, d) => {return changeChar(d)}) .attr('transform', (d,i)=>{ var posX = (i * sidelength) + 305 + (sidelength/2) return 'translate( ' + posX + ' , ' + 290 + '),'+ 'rotate(-90)';}) .attr('x', 0) .attr('y', 0) .style("text-anchor", "start") .attr("height", sidelength) .style("font-size", "1rem") .on('mouseover', function(d) { return highlightCol(this) }) .on('mouseout', function(d) { d3.selectAll('rect').attr('opacity','1'); d3.selectAll('text').attr('opacity','1'); }); // add column labels to the metrics svg.selectAll('.colLabel') .data(sortedNodes.slice(0, numNodes)) .join("text") .attr('class',(d)=>d.name.replace(/ /g,"_")+'_row') .attr("y", (d, i) => ((i * sidelength)+sidelength/2) + 300) .attr("anchor", "center") .attr("height", 2) .attr("x", 0) .attr("cursor", "pointer") .text(d => d.name) .style("font-size", "1rem") .attr('font-weight', (d,i)=>{ if (d.name ==characters[mutable mainCharacterID].fullName){ return "bold"; } else { return "normal" };}) .on('click', (event, d) => {return changeChar(d)}) .on('mouseover', function(d) { return highlightRow(this) }) .on('mouseout', function(d) { d3.selectAll('rect').attr('opacity','1'); d3.selectAll('text').attr('opacity','1'); }); // adding highlight boxes svg.append('rect') .attr('id', 'highlightRect1') .attr('x', 10) .attr('y', 20) .attr('width',50) .attr('height',50) .attr('fill','none') .attr('stroke','none'); svg.append('rect') .attr('id', 'highlightRect2') .attr('x', 10) .attr('y', 20) .attr('width',50) .attr('height',50) .attr('fill','none') .attr('stroke','none') } function changeChar(clickedName) { mutable mainCharacterID = clickedName.id; return matrix() } svg.append('text') .attr('id', 'nameText') matrix() return div.node(); }48:T521,function checkbox(config = {}) { let { value: formValue, title, description, submit, options } = Array.isArray( config ) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }49:Tbce,function getLinks(d){ var links =[]; var filtered = []; var arr = []; //best friend if (d.bestFriend != null){ var relationshipType = d.mostSalientRelationship[d.bestFriend]; links.push([d.bestFriend,relationshipType, 1]) } //spouse if (d.spouse != null){ var relationshipType = d.mostSalientRelationship[d.spouse]; links.push([d.spouse,relationshipType, 2]) } //familiy : if time, hover feature says the relationship. for ( var i=0; i< d.extended_family.length; i++ ){ var relationshipType = d.mostSalientRelationship[d.extended_family[i]]; links.push([d.extended_family[i],relationshipType, 3]) } //lover for ( var j=0; j< d.sexualPartners.length; j++ ){ var relationshipType = d.mostSalientRelationship[d.sexualPartners[j]]; links.push([d.sexualPartners[j],relationshipType, 4]) } //friends for ( var k=0; k< d.friends.length; k++ ){ var relationshipType = d.mostSalientRelationship[d.friends[k]]; links.push([d.friends[k],relationshipType, 5]); } //enemies for ( var l=0; l< d.enemies.length; l++ ){ var relationshipType = d.mostSalientRelationship[d.enemies[l]]; links.push([d.enemies[l],relationshipType, 6]) } //neighbors for ( var m=0; m< d.formerNeighbors.length; m++ ){ var relationshipType = d.mostSalientRelationship[d.formerNeighbors[m]]; links.push([d.formerNeighbors[m],relationshipType, 7]) } for ( var n=0; n< d.neighbors.length; n++ ){ var relationshipType = d.mostSalientRelationship[d.neighbors[n]]; links.push([d.neighbors[n],relationshipType, 7]) } //coworkers for ( var o=0; o< d.formerCoworkers.length; o++ ){ var relationshipType = d.mostSalientRelationship[d.formerCoworkers[o]]; links.push([d.formerCoworkers[o],relationshipType, 8]) } for ( var p=0; p< d.coworkers.length; p++ ){ var relationshipType = d.mostSalientRelationship[d.coworkers[p]]; links.push([d.coworkers[p],relationshipType, 8]) } //acquaintances for ( var q=0; q< d.acquaintances.length; q++ ){ var relationshipType = d.mostSalientRelationship[d.acquaintances[q]]; links.push([d.acquaintances[q],relationshipType, 9]) } // dealing with the duplicates and add only to the category for (var a = 0; a < links.length; a++) { if (arr.includes(links[a][0]) === false) { filtered.push({"source":d.fullName, "target": characters[links[a][0]].fullName, "relationshipType":links[a][1] , "category":[links[a][2]]}); arr.push(links[a][0]); } else { var samePeople = filtered.filter(d => { return (d.target === characters[links[a][0]].fullName) }) var index = filtered.indexOf(samePeople[0]); if (filtered[index].category.includes(links[a][2]) === false){ (filtered[index].category).push(links[a][2]) } } } return filtered; }4a:T1454,function getNodesWithDegree(d, otherLinks){ var nodes =[]; var arr = [] //add the main character nodes.push({"name":d.fullName, "id": d.id , "salience" :999, "birthYear":d.birthYear, "nodeDegree":getNumOfLinks(d.fullName, otherLinks)}); //best friend if (d.bestFriend != null){ if ( arr.includes(d.bestFriend)===false){ arr.push(d.bestFriend); nodes.push({"name": characters[d.bestFriend].fullName, "id": d.bestFriend, "salience": characters[d.id].saliences[d.bestFriend], "birthYear":characters[d.bestFriend].birthYear, "nodeDegree":getNumOfLinks(characters[d.bestFriend].fullName, otherLinks)}); } } //spouse if (d.spouse != null){ if ( arr.includes(d.spouse)===false){ arr.push(d.spouse); nodes.push({"name": characters[d.spouse].fullName, "id": d.spouse, "salience": characters[d.id].saliences[d.spouse], "birthYear":characters[d.spouse].birthYear, "nodeDegree":getNumOfLinks(characters[d.spouse].fullName, otherLinks)}); } } //familiy : if time, hover feature says the relationship. for ( var i=0; i< d.extended_family.length; i++ ){ if ( arr.includes(d.extended_family[i])===false){ arr.push(d.extended_family[i]); nodes.push({"name": characters[d.extended_family[i]].fullName, "id":d.extended_family[i], "salience": characters[d.id].saliences[d.extended_family[i]], "birthYear":characters[d.extended_family[i]].birthYear, "nodeDegree":getNumOfLinks(characters[d.extended_family[i]].fullName, otherLinks)}); } } //lover for ( var j=0; j< d.sexualPartners.length; j++ ){ if ( arr.includes(d.sexualPartners[j])===false){ arr.push(d.sexualPartners[j]); nodes.push({"name": characters[d.sexualPartners[j]].fullName, "id":d.sexualPartners[j], "salience": characters[d.id].saliences[d.sexualPartners[j]], "birthYear":characters[d.sexualPartners[j]].birthYear, "nodeDegree":getNumOfLinks(characters[d.sexualPartners[j]].fullName, otherLinks)} ); } } //friends for ( var k=0; k< d.friends.length; k++ ){ if ( arr.includes(d.friends[k])===false){ arr.push(d.friends[k]); nodes.push({"name": characters[d.friends[k]].fullName, "id":d.friends[k], "salience": characters[d.id].saliences[d.friends[k]], "birthYear":characters[d.friends[k]].birthYear, "nodeDegree":getNumOfLinks(characters[d.friends[k]].fullName, otherLinks) }); } } //enemies for ( var l=0; l< d.enemies.length; l++ ){ if ( arr.includes(d.enemies[l])===false){ arr.push(d.enemies[l]); nodes.push({"name": characters[d.enemies[l]].fullName, "id":d.enemies[l], "salience": characters[d.id].saliences[d.enemies[l]], "birthYear":characters[d.enemies[l]].birthYear, "nodeDegree":getNumOfLinks(characters[d.enemies[l]].fullName, otherLinks)}); } } //neighbors for ( var m=0; m< d.formerNeighbors.length; m++ ){ if ( arr.includes(d.formerNeighbors[m])===false){ arr.push(d.formerNeighbors[m]); nodes.push({"name": characters[d.formerNeighbors[m]].fullName, "id":d.formerNeighbors[m],"salience": characters[d.id].saliences[d.formerNeighbors[m]], "birthYear":characters[d.formerNeighbors[m]].birthYear, "nodeDegree":getNumOfLinks(characters[d.formerNeighbors[m]].fullName, otherLinks) }); } } for ( var n=0; n< d.neighbors.length; n++ ){ if ( arr.includes(d.neighbors[n])===false){ arr.push(d.neighbors[n]); nodes.push({"name": characters[d.neighbors[n]].fullName, "id":d.neighbors[n],"salience": characters[d.id].saliences[d.neighbors[n]], "birthYear":characters[d.neighbors[n]].birthYear, "nodeDegree":getNumOfLinks(characters[d.neighbors[n]].fullName, otherLinks)}); } } //coworkers for ( var o=0; o< d.formerCoworkers.length; o++ ){ if ( arr.includes(d.formerCoworkers[o])===false){ arr.push(d.formerNeighbors[o]); nodes.push({"name": characters[d.formerCoworkers[o]].fullName, "id":d.formerNeighbors[o], "salience": characters[d.id].saliences[d.formerNeighbors[o]], "birthYear":characters[d.formerCoworkers[o]].birthYear, "nodeDegree":getNumOfLinks(characters[d.formerCoworkers[o]].fullName, otherLinks) }); } } for ( var p=0; p< d.coworkers.length; p++ ){ if ( arr.includes(d.coworkers[p])===false){ arr.push(d.coworkers[p]); nodes.push({"name": characters[d.coworkers[p]].fullName, "id":d.coworkers[p], "salience": characters[d.id].saliences[d.coworkers[p]], "birthYear":characters[d.coworkers[p]].birthYear, "nodeDegree":getNumOfLinks(characters[d.coworkers[p]].fullName, otherLinks) }); } } //acquaintances for ( var q=0; q< d.acquaintances.length; q++ ){ if ( arr.includes(d.acquaintances[q])===false){ arr.push(d.acquaintances[q]); nodes.push({"name": characters[d.acquaintances[q]].fullName, "id":d.acquaintances[q],"salience": characters[d.id].saliences[d.acquaintances[q]], "birthYear":characters[d.acquaintances[q]].birthYear, "nodeDegree":getNumOfLinks(characters[d.acquaintances[q]].fullName, otherLinks) }); } } return nodes; }4b:T120b,function getNodes(d){ var nodes =[]; var arr = [] //add the main character nodes.push({"name":d.fullName, "id": d.id , "salience" :999, "birthYear":d.birthYear}); //best friend if (d.bestFriend != null){ if ( arr.includes(d.bestFriend)===false && d.bestFriend != undefined){ arr.push(d.bestFriend); nodes.push({"name": characters[d.bestFriend].fullName, "id": d.bestFriend, "salience": characters[d.id].saliences[d.bestFriend], "birthYear":characters[d.bestFriend].birthYear}); } } //spouse if (d.spouse != null){ if ( arr.includes(d.spouse)===false && d.spouse != undefined){ arr.push(d.spouse); nodes.push({"name": characters[d.spouse].fullName, "id": d.spouse, "salience": characters[d.id].saliences[d.spouse], "birthYear":characters[d.spouse].birthYear}); } } //familiy : if time, hover feature says the relationship. for ( var i=0; i< d.extended_family.length; i++ ){ if ( arr.includes(d.extended_family[i])===false && d.extended_family[i] != undefined){ arr.push(d.extended_family[i]); nodes.push({"name": characters[d.extended_family[i]].fullName, "id":d.extended_family[i], "salience": characters[d.id].saliences[d.extended_family[i]], "birthYear":characters[d.extended_family[i]].birthYear}); } } //lover for ( var j=0; j< d.sexualPartners.length; j++ ){ if ( arr.includes(d.sexualPartners[j])===false && d.sexualPartners[j] != undefined){ arr.push(d.sexualPartners[j]); nodes.push({"name": characters[d.sexualPartners[j]].fullName, "id":d.sexualPartners[j], "salience": characters[d.id].saliences[d.sexualPartners[j]], "birthYear":characters[d.sexualPartners[j]].birthYear} ); } } //friends for ( var k=0; k< d.friends.length; k++ ){ if ( arr.includes(d.friends[k])===false && d.friends[k] != undefined){ arr.push(d.friends[k]); nodes.push({"name": characters[d.friends[k]].fullName, "id":d.friends[k], "salience": characters[d.id].saliences[d.friends[k]], "birthYear":characters[d.friends[k]].birthYear }); } } //enemies for ( var l=0; l< d.enemies.length; l++ ){ if ( arr.includes(d.enemies[l])===false && d.enemies[l] != undefined){ arr.push(d.enemies[l]); nodes.push({"name": characters[d.enemies[l]].fullName, "id":d.enemies[l], "salience": characters[d.id].saliences[d.enemies[l]], "birthYear":characters[d.enemies[l]].birthYear}); } } //neighbors for ( var m=0; m< d.formerNeighbors.length; m++ ){ if ( arr.includes(d.formerNeighbors[m])===false && d.formerNeighbors[m] != undefined){ arr.push(d.formerNeighbors[m]); nodes.push({"name": characters[d.formerNeighbors[m]].fullName, "id":d.formerNeighbors[m],"salience": characters[d.id].saliences[d.formerNeighbors[m]], "birthYear":characters[d.formerNeighbors[m]].birthYear }); } } for ( var n=0; n< d.neighbors.length; n++ ){ if ( arr.includes(d.neighbors[n])===false && d.neighbors[n] != undefined){ arr.push(d.neighbors[n]); nodes.push({"name": characters[d.neighbors[n]].fullName, "id":d.neighbors[n],"salience": characters[d.id].saliences[d.neighbors[n]], "birthYear":characters[d.neighbors[n]].birthYear}); } } //coworkers for ( var o=0; o< d.formerCoworkers.length; o++ ){ if ( arr.includes(d.formerCoworkers[o])===false && d.formerCoworkers[o] != undefined){ arr.push(d.formerCoworkers[o]); nodes.push({"name": characters[d.formerCoworkers[o]].fullName, "id":d.formerCoworkers[o], "salience": characters[d.id].saliences[d.formerNeighbors[o]], "birthYear":characters[d.formerCoworkers[o]].birthYear }); } } for ( var p=0; p< d.coworkers.length; p++ ){ if ( arr.includes(d.coworkers[p])===false && d.coworkers[p] != undefined){ arr.push(d.coworkers[p]); nodes.push({"name": characters[d.coworkers[p]].fullName, "id":d.coworkers[p], "salience": characters[d.id].saliences[d.coworkers[p]], "birthYear":characters[d.coworkers[p]].birthYear }); } } //acquaintances for ( var q=0; q< d.acquaintances.length; q++ ){ if ( arr.includes(d.acquaintances[q])===false && d.acquaintances[q] != undefined){ arr.push(d.acquaintances[q]); nodes.push({"name": characters[d.acquaintances[q]].fullName, "id":d.acquaintances[q],"salience": characters[d.id].saliences[d.acquaintances[q]], "birthYear":characters[d.acquaintances[q]].birthYear }); } } return nodes; }4c:[{"id":"2847cfa46d006434d8bef97943ab2f262b82fd0928572406c7cf086f1aec33a43de4bf7cddd6974be04185adcbfbf78668b41ede3438e6ca17449c713262deb0","href":"https://static.observableusercontent.com/files/2847cfa46d006434d8bef97943ab2f262b82fd0928572406c7cf086f1aec33a43de4bf7cddd6974be04185adcbfbf78668b41ede3438e6ca17449c713262deb0","name":"town-1615313528.json","type":"application/json","lastModified":1615425705119.348,"size":12032070},{"id":"c3d127bfb3e26d63e3715f1972c50142e29d370713bc67bc3a2d162f16954909815b6c8d87d4e6f9a5127faf348629d29ee089c1062c556e566827041b0cf552","href":"https://static.observableusercontent.com/files/c3d127bfb3e26d63e3715f1972c50142e29d370713bc67bc3a2d162f16954909815b6c8d87d4e6f9a5127faf348629d29ee089c1062c556e566827041b0cf552","name":"town-1614761740@1.json","type":"application/json","lastModified":1615426008680.91,"size":7574625}] 44:{"id":"b43ee14eff23518f","slug":"rie-jade-and-lydia-final-project","title":"Rie, Jade, and Lydia Final Project","thumbnail":"372ce1cfebff3033a48b397b21a3d6e3980f9933b8cf037e7e9a203f1b353260","access_level":"public","create_time":"$D2021-02-28T00:33:25.226Z","update_time":"$D2021-04-11T17:55:42.015Z","view_time":null,"first_public_time":"$D2021-03-16T22:27:18.140Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"ab154f77959a46fc","login":"cs314w21","name":"CS 314: Data Vis","avatar_url":"https://avatars-next.observableusercontent.com/510ecacdf21e010247132dd3b2b503edb8433ae82ca12538976c14233bcf9d61","tier":"education_2026","bio":"An Observable team for the Data Visualization class at Carleton College.","following":false},"version":2177,"publish_version":2177,"role":null,"authored":false,"authors":[{"type":"individual","id":"63d093ffc8a7b4c7","login":"kandelj2","name":"Jade Kandel","avatar_url":"https://avatars-next.observableusercontent.com/062b29ddf946139bdc510333c2063949003c0f2d2a207f255ecd5ee35f8b08e3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"497516f04c6c8e9f","login":"bilibuluelf","name":"Lydia Chau","avatar_url":"https://avatars-next.observableusercontent.com/2b3d98979b80b81f659bf005acd37daccda0e0eaac2f196a0da25ad0e8393c54","tier":null,"role":"editor"},{"type":"individual","id":"78bdd9d86e520c7f","login":"ealexander","name":"Eric Alexander","avatar_url":"https://avatars-next.observableusercontent.com/bfb4fca6017e70ace6dcc909a3343f136de2169fa60773cd22e9c900153cfe6a","tier":null,"role":"editor"},{"type":"individual","id":"63d093ffc8a7b4c7","login":"kandelj2","name":"Jade Kandel","avatar_url":"https://avatars-next.observableusercontent.com/062b29ddf946139bdc510333c2063949003c0f2d2a207f255ecd5ee35f8b08e3","tier":null,"role":"editor"},{"type":"individual","id":"07098fc23ad8475f","login":"riekurita98","name":"Rie Kurita","avatar_url":"https://avatars-next.observableusercontent.com/72a33b5acc5a290e99cb9a0145ce84b8b46ed20b75edc07d2a8d943d65f50721","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rie, Jade, and Lydia Final Project","cells":[{"id":0,"value":"md`# Rie, Jade, and Lydia Final Project\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"town = await FileAttachment('town-1615313528.json').json({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"town2 = await FileAttachment('town-1614761740@1.json').json({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"characters = town['characters']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"characters2 = town2['characters']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"function getColor(category,charge){\n var c1='#FFFFFF';\n var hue;\n\n\n if (category === 1){ //best friend\n hue= '#a890d6';\n }else if (category === 5 ){ //friends\n hue= '#374c80';\n } else if (category === 2){ //spouse\n hue= '#ebb3ff';\n }else if (category === 3){ //family\n hue= '#6a6daa';\n } else if (category === 4){\n hue= '#7a5195';\n } else if (category === 6){\n hue= '#bc5090';\n } else if (category === 7){\n hue= '#ef5675';\n } else if (category === 8){\n hue= '#ff764a';\n } else if (category === 9){\n hue= '#ffa600';\n }\n if (charge >= 100){\n charge=100;\n }\n if (charge <= -100){\n charge = -100;\n }\n if (charge <0){\n charge = charge * -1;\n }\n var lightScale = d3.scaleLinear()\n .domain([0, 100])\n .range([0.4, 1]);\n \n var lightness;\n if (charge === undefined){\n lightness = 0.4;\n }else{\n lightness = lightScale(charge)\n }\n \n //return hue;\n return d3.interpolateRgb(c1,hue)(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"mutable mainCharacterID = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"viewof sortBy = Select(new Map([['Salience [High to Low]', 'salience'],['Name [A to Z]', 'name'], ['Birth Year [Youngest to Oldest]', 'birthYear'], ['Node Degree [Smaller to Larger]', 'degree']]), {value: null, label: \"Sort by: \"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"viewof numNodes = Text({label: \"Number of Characters\", placeholder: \"Enter a number\", value: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"viewof ch = checkbox({\n title: \"Relationships\",\n description: \"Click to see specific squares of selected relationships\",\n options: [\n { value: \"2\", label: \"Spouse\", color: \"#ebb3ff\" },\n { value: \"1\", label: \"Best Friend\", color: \"#a890d6\" },\n { value: \"3\", label: \"Family\", color: \"#6a6daa\" },\n { value: \"5\", label: \"Friends\", color: \"#374c80\" },\n { value: \"4\", label: \"Sexual Partners\", color: \"#7a5195\" },\n { value: \"6\", label: \"Enemies\", color: \"#bc5090\" },\n { value: \"7\", label: \"Neighbors\", color: \"#ef5675\" },\n { value: \"8\", label: \"Coworkers\", color: \"#ff764a\" },\n { value: \"9\", label: \"Acquaintance\", color: \"#ffa600\" }\n ],\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1889,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"function getNumOfLinks(character, links){\n var numOfLinks = links.filter(d => {\n return (d.source === character || d.target === character)\n })\n return numOfLinks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"function nodesFunction(mainCharacter){\n var nodes = [];\n \n var allNodes = bubbleSort(getNodes(mainCharacter)); \n var maxNodes = getNodes(mainCharacter).length;\n var num=numNodes;\n if (num>maxNodes){\n num=maxNodes;\n }\n for (var i=0; i=0; i--){\n for(var j = 1; j<=i; j++){\n if(arr[j-1].salience < arr[j].salience){\n var temp = arr[j-1];\n arr[j-1] = arr[j];\n arr[j] = temp;\n }\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"nodesMax = getNodes(characters[0]).length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"function compare( a, b ) {\n if ( a.name < b.name ){\n return -1;\n }\n if ( a.name > b.name ){\n return 1;\n }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"d3 = require('d3@v6');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"import {Table, Select, Search, Range, Checkbox, Text} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1893,"value":"import {slider, color, radio,input} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 45:"$44:body"