25:["$","title",null,{"children":"Guild Wars 2 Mount Dye Slots and Types | Feniula Pyra | Observable"}] 49:T563,Here we can see that overall, the most common dye material used is leather. This makes sense considering what we saw in the previous graph about the number of mounts that also commonly use leather dye. Of the themes and sets that don't tend to use leather we can see that some are fairly predictible. Almost all of the dye slots for the Alloyed set are 100% metal, and all of the Plush skins' slots are either leather cloth or fur, and the Cozy skins are mostly cloth or fur as well. There are some surprises, however. Synergetics and Awakened skins don't tend to have as many metal slots, and they are more metalic-looking skins. The Star theme has more metal slots. Something else interesting to note is that it seems leather is the "default" dye material. It seems to be used any time a material is not specifically cloth, fur, or metal. For instance, the Darkmist and Aurene skins are very much not leather, but most of their dye slots are labeled as leather. We can also see that certain mounts are completely different from other mounts in the same theme/set. Luminous Hunter and Luminous Ray both have all leather slots, but Luminous Roller has all metal slots. The two Kintsugi skins have a similar pattern. From this information we can conclude that while there is _some_ correlation between dye slot materials and theme, it isn't a perfect match, and not predictable. 4a:T7b0,## Documentation ### Data (1+5) The data I got was from the [GW2 API](https://api.guildwars2.com/v2/mounts/skins?ids=all) (again). I ended up choosing the mount skin dye materials because it interested me and I thought it would be an interesting followup to project 1. I will say that the data set from project 1 would have been much better suited to this project. If I could go back and swap I would. That being said, the data in its natural form was buried in an array of objects of arrays of objects, and it didn't include the theme or set anywhere directly in the data. Some skins had their theme in their name (Stargazed, Stardust, Branded Skyscale, Branded Warclaw, etc) but a good number more didn't (for instance Fulgurite Ridgeback is in the "Storm" theme, and Trailblazer is in the "Fire" theme). I went on [the wiki](https://wiki.guildwars2.com/wiki/Gallery_of_mount_theme_skins) and manually copied the ids of any skins that didn't have their theme in their name and stored them in an array to filter later. Then I created a function that checked if a skin was in one of those lists and assigned their theme accordingly or assigned their theme/set based on their name. Luckily skins in sets always had their set in their name, and followed a pattern of "[Set] [mount]" (e.g. "Exo-suit Jackal"). I was comparing the number of a type of dye per slot, so I then created several functions to count this number. I definitely should have created just one function that accepted a set of mounts and then have a separate function for filtering mounts by mount type and then theme to feed into it, but, no, I created three different functions for getting the slots by mount, theme, or all, and then three more functions for each for counting the amount of each material in those slots. ### Analysis and Visualization (2+3) I ended up choosing pie charts because I could arrange them in a way to mimic the arrangement of the in-game Guild Wars 2 Mount Dye panel: 4b:Tae4,This is most visible in the first visualization. One downside is that the pies are very small, though, as I tried to make the size accurate to the in-game menu as well as the layout. It was troublesome trying to figure out how to have multiple charts in one svg. I first looked into facets in the Plot thing that Observable has, but I couldn't see a way to do it with pie charts - it looked like it worked with every other type of graph except pies. I solved the problem differently in both visualizations. In the first I ended up looping through and just repeatedly adding pies to the svg, which worked. However when I got to the second visualization this did not work as well. (I can't remember why, but I think it may have been because this visualization was interactive and would change, and that caused some weird motion to happen.) I ended up having four different svgs in a grid pattern. The legends for both were also not as easy as I thought it would be. I once again looked into Observable's Plot because I knew there was a way to show a legend on a graph, but unfortunately you could only do this if you were also using Plot to make the graph. I ended up making a nice legend function that let you put in a domain and color range and whether or not you wanted it to be vertical. For the first graph I had the legend be vertical and the second horizontal. ### Interactions Technically I think there was a way to display this data without interaction, but because this project required interaction I opted for the more interactive visualization. I let the user filter by theme/set (there's no overlap between sets and themes thankfully) and also let them hover over a slot slice to see which mount skins have that material in that slot. This makes it easier to see which skins break any patterns within a theme/set. The slot hovering feature took me forever to figure out because I couldn't figure out a simple way to dynamically update the data a javascript table displays. I ended up having to simply remove and rebuild every row in table every time I want to update it. Unfortunately this breaks the sorting feature when you click on the table headers. I tried just removing the click event from the table headers but unfortunately that did not work. ### Dev Process + Project Experience While I enjoyed project 1 because the dataset more information and variables to play around with and answered a question that I was more invested in, I enjoyed that this project's data set and question forced me to make graphs and features that I would otherwise avoid doing or just be less likely to encounter. I ran into a lot of issues and while the solutions may have felt a little bit hacky and inconsistent, I learned a lot about different ways to do things with d3/Observable.4c:Tac3,makePies = (data) => { const width = 200; const height = 400; const margin = {top: 20, right: 30, bottom: 30, left: 120}; //console.log("START MAKEPIES ====================================="); const outerRadius = 10;//width/2; const innerRadius = 0; const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) ; let pie = d3.pie().sort(null); let color = d3.scaleOrdinal() .domain(["metal", "leather", "cloth", "fur"]) .range(["silver","#876442","#FFFBDE","#CD9575"]); let svg = d3.create("svg") .attr("width", width) .attr("height", height); //will be the placement of the mount overall let bigYScale = d3.scaleBand() .domain(Object.keys(byMount)) .range([0, height]); svg.append("g") .attr("class", "axis") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(bigYScale)); //https://stackoverflow.com/questions/24763498/d3-js-using-images-with-filenames-specified-in-data-as-tick-values-on-axis //.attr("x", -120) //.attr("y", -50); svg.selectAll(".tick").selectAll("text").attr("x", -50); svg.selectAll(".tick") .data(Object.keys(byMount)) .append("image") .attr("href", d=>byMount[d][0].icon) .attr("x", -outerRadius * 4 - 2) .attr("y", -outerRadius*2 - 2) .attr("width", outerRadius*4) .attr("height", outerRadius*4) ; //for each mount for(let mountType in data) { /*svg.append("rect") .attr("width", outerRadius * 4) .attr("height", outerRadius * 4) .attr("x", margin.left) .attr("y", bigYScale(mountType)) .attr("fill", "none") .attr("stroke", "black") .attr("opacity", "50%"); ;*/ //do each slot... for(let slot in data[mountType]) { let slotData = (data[mountType][slot]); //x and y offset for mount dye slot group let x = outerRadius * (slot%2) * 2; let y = bigYScale(mountType) + (Math.floor(slot/2)) * outerRadius * 2; //make group + data var arcs = svg.selectAll("g.arc" + "." + mountType + ".\\" + slot) .data(pie(Object.values(slotData))) .enter() .append("g") .attr("class","arc " + mountType + " " + slot) .attr("transform", "translate(" + (x + outerRadius + margin.left) + ", " + (y + outerRadius) + ")") ; //make path arcs.append("path") .attr("fill", (d,i) => color(i)) .attr("d", arc); } } let legend = makeLegend(true, ["metal", "leather", "cloth", "fur"], ["silver","#876442","#FFFBDE","#CD9575"]); //console.log("END MAKEPIES ============================="); return html` ${svg.node()} ${legend} `; }4d:T1d0b,themePies = (inData) => { const width = 300; const height = 300; const margin = { top: 20, right: 30, bottom: 30, left: 100 }; //console.log("START THEME PIES ====================================="); const outerRadius = width / 4; const innerRadius = 0; const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); let pie = d3.pie().sort(null); let color = d3 .scaleOrdinal() .domain(["metal", "leather", "cloth", "fur"]) .range(["silver", "#876442", "#FFFBDE", "#CD9575"]); let svg = d3.create("svg").attr("width", width).attr("height", height); let slots = [ d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\0"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\1"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\2"), d3 .create("svg") .attr("width", width / 2) .attr("height", height / 2) .attr("class", ".\\3") ]; let hoverTable = Inputs.table([{ Name: "", Mount: "", Set: "", Theme: "" }]); //remove click functionality from row headers d3.select(hoverTable) .select("thead") .select("tr") .selectAll("th") .on("click", null); update("All"); //for each mount function update(mountType) { let data = themeSlotsSums(mountType); for (let slot in slots) { let slotData = data[slot]; //x and y offset for mount dye slot group let x = outerRadius * (slot % 2) * 2; let y = Math.floor(slot / 2) * outerRadius * 2; //make slices var arcs = slots[slot] .selectAll("path") .data(pie(Object.values(slotData))) .join( (enter) => { return enter .append("path") .attr("class", "" + slot) .attr( "transform", "translate(" + outerRadius + ", " + outerRadius + ")" ) .attr("fill", (d, i) => color(i)) .transition() .duration(500) .attrTween("d", arcTween); //.attr("d", arc) }, (update) => { return update .attr("fill", (d, i) => color(i)) .transition() .duration(500) .ease(d3.easeCubic) .attrTween("d", arcTween); //.attr("d", arc) } ) .exit() .remove(); //end arcs //https://d3-graph-gallery.com/graph/pie_annotation.html //labels slots[slot] .selectAll("text") .data(pie(Object.values(slotData))) .join( (enter) => enter .append("text") .text((d) => (d.data == 0 ? "" : d.data)) .attr("font-family", "sans-serif") .attr("font-weight", (d) => d.data == d3.max(Object.values(slotData)) ? "bold" : "" ) .attr( "transform", (d) => "translate(" + arc.centroid(d).map((a) => a + outerRadius) + ")" ) .style("text-anchor", "middle"), (update) => update .transition() .duration(500) .ease(d3.easeCubic) .text((d) => (d.data == 0 ? "" : d.data)) .attr( "transform", (d) => "translate(" + arc.centroid(d).map((a) => a + outerRadius) + ")" ) .attr("font-weight", (d) => d.data == d3.max(Object.values(slotData)) ? "bold" : "" ) .style("text-anchor", "middle") ); //end text join //hover table //let hoverTable = Inputs.table(data); slots[slot].selectAll("path").on("mouseover", (d, i) => { let mountListItems = mountsOfThemeWithSlot( themeFilter.value, slot, ["metal", "leather", "cloth", "fur"][i.index] ); //delete old rows d3.select(hoverTable).selectAll("tbody tr").remove(); //adds new rows let trs = d3 .select(hoverTable) .select("tbody") .selectAll("tr") .data(mountListItems) .enter() .append("tr"); trs.append("td").append("input").attr("type", "checkbox"); trs.append("td").html((d) => d.name); trs.append("td").html((d) => d.mount); trs.append("td").html((d) => d.set); trs.append("td").html((d) => d.theme); /*for(let row of mountListItems) { d3.select(hoverTable).select("tbody").append("tr") .append("td").append("input").attr("type", "checkbox") .append("td").html("abanana") .append("td").html("theme"); }*/ update(themeFilter.value); }); } //end for loop //https://bl.ocks.org/mbostock/1346410 // comment from site: "Store the displayed angles in _current. // Then, interpolate from _current to the new angles. // During the transition, _current is updated in-place by d3.interpolate." function arcTween(a) { var i = d3.interpolate(this._current, a); this._current = i(0); return function (t) { return arc(i(t)); }; } } //end update function const legend = makeLegend( false, ["metal", "leather", "cloth", "fur"], ["silver", "#876442", "#FFFBDE", "#CD9575"] ); const themeFilter = html` `; const themeCount = html`Skins in ${ THEMES().includes(themeFilter.value) ? "Theme" : "Set" }: ${getMountsOfTheme(themeFilter.value).length} `; const hiddenSlotSelector = html``; const hiddenSlotMaterialSelector = html``; d3.select(themeFilter).on("change", () => { let theme = themeFilter.value; let mounts = getMountsOfTheme(theme); update(theme); d3.select(themeCount).html( `Skins in ${THEMES().includes(theme) ? "Theme" : "Set"}: ` + mounts.length ); d3.select(sampleImg).attr( "src", mounts[Math.floor(Math.random() * mounts.length)].icon ); d3.select(sampleImg).attr("style", "width:50px"); }); //d3.select(selectTheme).on("change", ()=>update(selectTheme.value)); const sampleImg = html`

`; const mountList = html`

`; //console.log("END THEME PIES ============================="); return html`

Select Theme/Set: ${themeFilter} Mount Sample: ${sampleImg}
${themeCount}
${legend}
${slots[0].node()} ${slots[1].node()}
${slots[2].node()} ${slots[3].node()} ${hiddenSlotSelector} ${hiddenSlotMaterialSelector} ${hoverTable}

`; }4e:T41d,makeLegend = (vertical, domain, colors) => { //makes an ordinal color scale legend //not sure how robust this is but it works for this let width = (vertical ? 100 : 100 * (domain.length)) ; let height = (vertical? 40 * (domain.length - 1) : 40); let margin = {left: 20, right: 20, top: 20, bottom: 20}; let colorScale = d3.scaleOrdinal(colors); let domainScale = d3.scaleBand() .domain(domain) .range([0, (vertical ? 40 : 100)*domain.length - margin.top]); let svg = d3.create("svg").attr("width", width).attr("height", height); svg.selectAll("rect") .data(domain) .enter() .append("rect") .attr("width", 10) .attr("height", 10) .attr("x", d=>(vertical ? 0 : domainScale(d))) .attr("y", d=>(vertical ? domainScale(d) + 5 : 10)) .attr("fill", d=>colorScale(d)); svg.selectAll("text") .data(domain) .enter() .append("text") .text(d=>d) .attr("x", d=>(vertical ? 0 : domainScale(d)) + 15) .attr("y", d=>(vertical ? domainScale(d) + 5 : 10) + 10); return svg.node(); } 4f:[{"id":"77e0ab728e87fe5bc85cd2e210f637b8b91ff67237a27864546762a9ae58319140a351800adaa489f795eaca93d31f136cc247bd4b6e57e12355467c2acfad78","href":"https://static.observableusercontent.com/files/77e0ab728e87fe5bc85cd2e210f637b8b91ff67237a27864546762a9ae58319140a351800adaa489f795eaca93d31f136cc247bd4b6e57e12355467c2acfad78","name":"gw036.jpg","type":"image/jpeg","lastModified":1669664020789.141,"size":138753}] 29:{"id":"8d6a98814913e226","slug":null,"title":"Guild Wars 2 Mount Dye Slots and Types","thumbnail":"e95e66b56d87cae68fa7ce2d80eb638569c3fecb8ce63b890e75ecb3251c87d3","access_level":"public","create_time":"$D2022-11-11T16:13:49.445Z","update_time":"$D2023-09-10T21:15:26.611Z","view_time":null,"first_public_time":"$D2023-01-24T19:01:18.357Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a7fae28eb09b9107","login":"feniulapyra","name":"Feniula Pyra","avatar_url":"https://avatars-next.observableusercontent.com/4dc0711396f886d3399b2b320b69e2272560e24f98cbe6ee36279d703e73662f","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1859,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"35a8881a55da93e1","login":"feniulapyra","name":"Feniula Pyra","avatar_url":"https://avatars-next.observableusercontent.com/4dc0711396f886d3399b2b320b69e2272560e24f98cbe6ee36279d703e73662f","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"35a8881a55da93e1","login":"feniulapyra","name":"Feniula Pyra","avatar_url":"https://avatars-next.observableusercontent.com/4dc0711396f886d3399b2b320b69e2272560e24f98cbe6ee36279d703e73662f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Guild Wars 2 Mount Dye Slots and Types","cells":[{"id":0,"value":"# Guild Wars 2 Mount Dye Slots and Types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1855,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1040,"value":"I looked through the GW2 api again, and I ran across something interesting that I had been suspicious of for a while. Not only do different pieces of gear dye slots have different types of dye materials, _mount_ dye slots do as well. I had been suspicious of this because I had two mount skins of the same theme but dyes showed up differently on each one. When I dyed my Vital Geode Warclaw skin, the dyes blended very well and it looked shiny and sparkly and awesome, but when I dyed my Vital Geode _Raptor_ skin, the dyes were very blocky and didn't blend well. I wanted to know if this was usual for themed skins or if the Vital Geode theme was an anomaly. I also wanted to see if there was more of a correllation across the mounts themselves.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"## Slot Dye Material by Mount","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":556,"value":"makePies(allMountSlotsSums());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"Above we can see each basic mount type next to their slots with a pie chart of how often a dye material shows up. Interestingly, it does appear that some mounts tend to be more likely to have a certain dye material. Raptor and Skimmer are more likely to have leather slots, whereas Springer and Griffon appear to be slightly more likely to have fur dye slots. I will note that at the bottom the turtle only has one slot and it is 100% leather. This is due to the fact that the GW2 API is not completely up-to-date, so there is currently only one turtle skin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":760,"value":"## Slot Dye Material by Theme/Set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"themePies(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1455,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Notice about Guild Wars 2 API use:\n\t\n© ArenaNet LLC. All rights reserved. NCSOFT, ArenaNet, Guild Wars, Guild Wars 2: Heart of Thorns, Guild Wars 2: Path of Fire, and Guild Wars 2: End of Dragons and all associated logos, designs, and composite marks are trademarks or registered trademarks of NCSOFT Corporation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1458,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1490,"value":"gw036 = FileAttachment(\"gw036.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1494,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":936,"value":"# BACKEND STUFF","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1833,"value":"## Chart Generation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"makePie = (data)=> {\n const width = 300;\n const height = 300; \n const margin = {top: 20, right: 30, bottom: 30, left: 40};\n \n console.log(data);\n \n const outerRadius = width/2;\n const innerRadius = 0;\n const arc = d3.arc()\n .innerRadius(innerRadius)\n .outerRadius(outerRadius)\n ;\n let pie = d3.pie();\n let color = d3.scaleOrdinal()\n .domain([\"metal\", \"leather\", \"cloth\", \"fur\"])\n .range([\"gray\",\"tan\",\"skyblue\",\"brown\"]);\n\n let svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n \n var arcs = svg.selectAll(\"g.arc\")\n .data(pie(Object.values(data)))\n .enter()\n .append(\"g\")\n .attr(\"class\",\"arc\")\n .attr(\"transform\", \"translate(\" + outerRadius + \", \" + outerRadius + \")\")\n ;\n\n arcs.append(\"path\")\n .attr(\"fill\", (d,i) => color(i))\n .attr(\"d\", arc); \n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":" function mountsOfThemeWithSlot(theme, slotNumber, slotMaterial) {\n let themed;\n if(theme == \"All\")\n themed = data.filter(()=>true); //makes a copy\n else if(theme == \"None\")\n themed = data.filter(d=>d.set == undefined && d.theme == undefined);\n else\n themed = data.filter(d=>d.theme == theme || d.set == theme);\n let correctSlot = themed.filter(d=>slotNumber < d.dye_slots.length && d.dye_slots[slotNumber].material == slotMaterial);\n return correctSlot;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"## Debug","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1234,"value":"makeLegend(false, [\"metal\", \"leather\", \"cloth\", \"fur\"], [\"silver\",\"#876442\",\"#FFFBDE\",\"#CD9575\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"makeLegend(true, [\"metal\", \"leather\", \"cloth\", \"fur\"], [\"silver\",\"#876442\",\"#FFFBDE\",\"#CD9575\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"viewof mountSelect = Inputs.select(\n [\n \"raptor\",\n \"springer\",\n \"skimmer\",\n \"jackal\",\n \"roller_beetle\",\n \"warclaw\",\n \"griffon\",\n \"skyscale\",\n \"turtle\"\n ],\n { label: \"Select mount\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof slot = Inputs.radio([\"0\", \"1\", \"2\", \"3\"], {label: \"Select slot\", value: \"1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"makePie(mountSlotsSums(mountSelect)[slot]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"viewof selectTheme = Inputs.select([\"All\", \"None\", ...SETS(), ...THEMES()], {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof table = Inputs.table(data.filter(d=> { \n if(selectTheme == \"None\") {\n return !THEMES().includes(d.theme) && !SETS().includes(d.set);\n }\n else\n return (selectTheme == \"All\" || d.theme == selectTheme || d.set == selectTheme)\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1802,"value":"## Data Organization/Manipulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1804,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"raw = fetch(\"https://api.guildwars2.com/v2/mounts/skins?ids=all\").then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"data = (()=>{\n AssignSets(raw);\n AssignThemes(raw);\n return raw;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"byMount = groupByMount(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"### Supplementary Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"function SETS() {\n return [\n \"Awakened\",\n \"Branded\",\n \"Cozy\",\n \"Exo-Suit\",\n \"Mad King\",\n \"Mad Realm\",\n \"Shiverpeaks\",\n \"Spooky\"\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function THEMES() {\n return [\n \"Alloyed\",\n \"Aurene\",\n \"Bioluminescent\", //Alt: Lucent, Exceptions: Phosphor Coast Osprey, Dajkah Lantern\n \"Canthan\",\n \"Darkmist\",\n \"Exalted\",\n \"Fire\", //Alt: Flame, Blazing, Exceptions: just check the wiki T.T\n \"Geode\",\n \"Ice\", //Alt: Arctic, Glacial Excpetions: Frostsoul\n \"Kintsugi\",\n \"Lithosol\",\n \"Luminous\",\n \"Oceanic\",\n \"Plush\",\n \"Primeval\",\n \"Sand\",\n \"Spotted\",\n \"Star\",\n \"Storm\", //Exceptions: check wiki T.T\n \"Sun\",\n \"Synergetics\"\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function StormMounts() {\n return [\n 24, //storm ridge\n 79, //sargol thunderer\n 142, //southsun torpedo\n 203, //fulgurite ridgeback\n 241, //stormclaw\n 109, //storm chaser\n 366 //stormskale\n ]; //note: missing heavenly thun\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function FireMounts() {\n return [\n 48, //flamelander\n 268, //volcanic ray\n 30, //pyroclast\n 365, //lavashell\n 166, //embermane\n 211, //incarnate flame\n 41, //primal hare\n 23, //fire pinion\n 166 //trailblazer\n ]; //also missing a bunch (canthans and the new molten griffon)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"### Data manipulation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"function AssignSets(data) {\n for(let d of data) {\n d.set = getMountSet(d.name);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function getMountSet(name) {\n let sets = SETS();\n for(let s of sets) {\n if(name.includes(s)) {\n return s;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function AssignThemes(data) {\n for(let d of data) {\n d.theme = getMountTheme(d);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function getMountTheme(mount) {\n let name = mount.name;\n let id = mount.id;\n //check for weird themes\n if(StormMounts().includes(id)) return \"Storm\";\n if(FireMounts().includes(id)) return \"Fire\";\n //check for consistent themes\n let themes = THEMES();\n for(let t of themes) {\n \n //do weird themes first\n switch(t) {\n case \"Bioluminescent\":\n if(name.includes(\"Lucent\") || name===\"Phosphor Coast Osprey\" || name===\"Dajkah Lantern\") \n return \"Bioluminescent\"; \n break;\n case \"Ice\":\n if(name.includes(\"Arctic\") || name.includes(\"Glacial\") || name.includes(\"Frostsoul\"))\n return \"Ice\";\n break;\n case \"Storm\": continue; break;\n case \"Fire\": continue; break;\n }\n \n if(name.includes(t)) \n return t;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"### Data filtering and Grouping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"function groupByMount(data) {\n let sorted = {\n \"raptor\": [],\n \"springer\": [],\n \"skimmer\": [],\n \"jackal\": [],\n \"roller_beetle\": [],\n \"warclaw\": [],\n \"griffon\": [],\n \"skyscale\": [],\n \"turtle\": []\n }\n for(let d of data) {\n sorted[d.mount].push(d);\n }\n return sorted;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"getMountsOfTheme = (theme) => {\n let mounts = [];\n if(theme == \"None\")\n mounts = data.filter(d=>d.theme == undefined && d.set == undefined);\n else if(theme == \"All\")\n mounts = data;\n else\n mounts = data.filter(d=>d.theme == theme || d.set == theme);\n return mounts;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"## Slot Counting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"mountSlots = (mountType)=>{\n let mounts = byMount[mountType];\n let slots = [[],[],[],[]];\n for(let m of mounts) {\n for(let d in m.dye_slots){\n slots[d].push(m.dye_slots[d].material);\n }\n }\n return slots\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"mountSlotsSums= (mountType) => {\n let slots = mountSlots(mountType);\n let sums = [\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0}\n ];\n for(let i in slots) {\n let currentSlot = slots[i];\n for(let s of slots[i]) {\n sums[i][s]++;\n }\n }\n return sums;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"allMountSlots = ()=> {\n let mountsSlots = {};\n for(let mount in byMount) {\n mountsSlots[mount] = mountSlots(mount);\n }\n return mountsSlots;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"allMountSlotsSums = () => {\n let mountsSlots = {};\n for(let mount in byMount) {\n mountsSlots[mount] = mountSlotsSums(mount);\n }\n //console.log(mountsSlots);\n return mountsSlots;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"themeSlots = (theme) => { //honestly themes and sets are p much the same so I'm doing both thru this function.\n let mountsWithTheme = getMountsOfTheme(theme);\n let slots = [[],[],[],[]];\n for(let m of mountsWithTheme) {\n for(let d in m.dye_slots){\n slots[d].push(m.dye_slots[d].material);\n }\n }\n return slots;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"themeSlotsSums = (theme) => {\n \n let slots = themeSlots(theme);\n let sums = [\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0},\n {metal: 0, leather: 0, cloth: 0, fur: 0}\n ];\n for(let i in slots) {\n let currentSlot = slots[i];\n for(let s of slots[i]) {\n sums[i][s]++;\n }\n }\n return sums;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"function CountSlots(data, slotType) {\n let num = 0;\n for(let d of data) {\n for(let slot of d.dye_slots) {\n if(slot.material === slotType) num++;\n }\n }\n return num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null