25:["$","title",null,{"children":"Guild Wars 2 Dye Data | Feniula Pyra | Observable"}] 49:T444,Plot.plot({ width: 800, height: 600, x: { grid: true }, y: { grid: true }, r: { range: [3, 10] }, marks: [ Plot.dot(mappedData, { x: (d) => d[materialSelect][selectXAxis[0]], //d[materialSelect][selectXAxis[0]], y: (d) => d[materialSelect][selectYAxis[0]], r: (d) => d[materialSelect][selectR[0]], fill: (d) => getRGB(d, materialSelect), stroke: (d) => d.colorCat, strokeWidth: 1, href: (d) => "https://wiki.guildwars2.com/wiki/" + d.name.replace(" ", "_") + "_Dye" }), Plot.tip( mappedData, Plot.pointer({ x: (d) => d[materialSelect][selectXAxis[0]], y: (d) => d[materialSelect][selectYAxis[0]], title: (d) => d.name + "\n\n" + selectXAxis[0] + ": " + d[materialSelect][selectXAxis[0]] + "\n" + selectYAxis[0] + ": " + d[materialSelect][selectYAxis[0]] + "\n" + selectR[0] + ": " + d[materialSelect][selectR[0]] }) ) ] })4a:T48c,Lets look at the final value of the dyes: lightness. Hopefully we can finally shed some light on how Guild Wars 2 Dyes are categorized and why. Unfortuantely, lightness appears to have even less correlation to dye categories than saturation. ## Conclusion Because this data is 3-dimensional, looking at 2d and 1d graphs is probably not the most optimal way to investigate the data. From what I _can_ see here, I will conclude that there is no hard-set rule for why certain dyes are in certain categories, but there are still some vague guidelines. Each non-neutral color category has a hue range of between 60 and 100, and grays can be any hue value, but have a saturation less than 5%. Cooler temperature dyes (i.e. blue, purple, and green) - i.e. dyes with a higher hue value - tend to have lower saturation, and warmer dyes tend to be higher than cooler dyes. While brown dyes have a hue value closer to yellow and orange, their saturation tends to be lower than the average yellow or orange dye's. The simplest way to describe the sorting "algorithm" for Guild Wars 2 dyes would probably be, "If it kinda looks like that color, just put it in that category."4b:T14de,--- # README Writeup ### Data Source The original dataset I am using comes from the Guild Wars 2 wiki api: https://api.guildwars2.com/v1/colors.json However I have to get it through this proxy I made, because the GW2 API does not let data be shared *directly* with other websites. (They do not allow CORS.) https://people.rit.edu/lep2738/kav-gw2-dyes/proxy.php?action=all ### Data Modifications I had to make the following modifications to the dataset: The "Quartz" dye is sorted into the "Yellow" category, when it should be blue, and the "Guiding Star" Dye is sorted into the "Blue" category when it should be yellow. This is a bug both in-game and in the api. I have submitted a bug report but for now I am manually swapping these so they are correct. The "Hydra" and "Pastel Lavender" Dyes do not include a "fur" version, so I have opted not to include fur versions of dyes in the dataset. Overall, the different materials of each dye didn't have a huge effect on the data. The data that comes from the GW2 API includes 6 different values to generate a dye. I created a function to map the values into their correct hsl/rgb color to show in the graphs. Thank you once again to Kulinda on Github and Cliff Spradlin on the Guild Wars 2 Forums for their research and the algorithm on how to do this. I'm not sure this is technically a "modification" as it's all the same information, but just used correctly, but I'm leaving it in here because it's information on how I consumed the data. ### Process The first thing I did for this project was graph the dyes's hues. I figured that that was probably the easiest way to differentiate colors into their typical category - "Red" dyes should have a hue somewhere between 0-30 and 330-360, oranges should be between 30 and 60, yellows between 60 and 90, greens between 90 and 120, and so on. Because the dye colors were 3-dimensional (HSL or RGB), I let the user swap between different graphs comparing the values to each other. However, I discovered that just looking at the hues on a graph didn't really help me, so I decided to have a way to filter by each color category. This looked nice and made it look like the "lines" between each category were pretty clear and didn't overlap, but I realized I needed a way to see the data of each category compared to its neighbors. I decided the simplest way to do this was to add an outline to each circle corresponding to the web's "default" for that category. (I ended up doing this for the box-and-whisker plots too later on.) This helped a lot and I realized that the categories had a lot of overlap. This was frustrating, so I decided it might help to graph the distributions of _each_ channel of the dyes in each category. I went with box-and-whiskers plots for this because I would be able to compare the different categories side-by-side and it would give clear a clear minimum and maximum - which I hoped would give a better visualization on where GW2 draws the line for colors categorization. It was mostly smooth sailing, but I struggled a little bit with the Red an Purple categories' hues, as their hues were around both 0 and 360, but not between. My solution was to make two separate plots for each side of them. This isn't perfectly accurate to the dataset, but it still gave a pretty good idea of where the dyes stood. As is evident from the graphs above, the box-and-whisker plots did not end up showing how GW2 sorts dyes. At this point, I realized the only way to get a definitive equation for how Guild Wars 2 categorizes dyes would be to graph the dyes in a 3d space. I briefly researched d3 3d options, and while I found something that might work, it didn't look like it was part of Observable. I also realized that there might not even be an algorithm or equation for sorting dyes. I figured that it was getting increasingly likely that I would end up making a bunch more graphs and I would have to do a bunch of calculus to most likely just end up with the same conclusion - that dyes were graphed pretty much sorted arbitrarily and by hand. This is further supported by what I stated above about Quartz being labelled as Yellow but Guiding Star being labelled as Blue. ~~One thing I really wanted to do but didn't end up having time to was having some way for the user to view specific dyes, or add tooltips to the dots on the scatter plot. I fiddled around with some possibilities but ultimately ended up scrapping it as I didn't think it would really add that much to the experience as I was more looking at the data as a whole.~~ ~~If you _would_ really like to see what each dye on the scatterplot is, you can do what I did for debugging which is opening the browser console, going to elements, clicking the little mouse button in the veeerry top left of the console, and then hovering over each dot. They should all have ID's with their name in them. (This is 100% a "behind-the-scenes" sort of suggestion - I'm not proposing this as a solution, just as a hack if someone's really desperately curious about certain dyes.)~~ I ended up switching the plot to use Plot.js instead of regular d3, and now a tooltip will show up with the name of the color and the values of the color that were selected for the graph. The user may also click on a color to be redirected to the wiki page for that color.4c:T12d7,makeBoxPlot = (dataset, channel) => { let keys = Object.keys(dataset); let vals = Object.values(dataset); const w = 800; const h = 300; const padding = 50; const svg = d3.create('svg') .attr('width', w) .attr('height', h); let type = "cloth"; //let channel = "lightness"; //get the HSL vallue of all the data for the given type //get the median, the Q1, Q3, Max, and Min of the collection of each color //plot the data for each color collection function getHSLs(color) { return dataset[color].map(d=> getHSL(d, type)); } let hslified = {}; for(let d in dataset) { hslified[d] = getHSLs(d); } if(channel === "hue") { hslified["Red A"] = hslified["Red"].filter(d=>d[channel] < 180); hslified["Red B"] = hslified["Red"].filter(d=>d[channel] > 180); hslified["Purple A"] = hslified["Purple"].filter(d=>d[channel] < 180); hslified["Purple B"] = hslified["Purple"].filter(d=>d[channel] > 180); } //should only be the collection of one color function getBoxVals(data, channel, color) { console.log(data); let q1 = d3.quantile(data, .25, d=>d[channel]); let median = d3.median(data, d=>d[channel]); let q3 = d3.quantile(data, .75, d=>d[channel]); let iqr = q3-q1; //let min = q1 - 1.5 * iqr; let min = d3.min(data, d=>d[channel]); //let max = q3 + 1.5 * iqr; let max = d3.max(data, d=>d[channel]); let mean = d3.mean(data, d=>d[channel]); let meanHue = d3.mean(data, d=>d["hue"]); if(color == 'Red') { meanHue = d3.mean(data, d=>{ let h = d["hue"]; if(h > 180) h -= 360; return h; }); if(meanHue < 0) meanHue += 360; } console.log("MEAN HUE: " + color + " " + meanHue); let meanSat = d3.mean(data, d=>d["saturation"]); let meanLig = d3.mean(data, d=>d["lightness"]); let fill = `hsl(${meanHue}, ${meanSat * 100}%, ${meanLig * 100}%)`; return {min, q1, median, q3, max, mean, fill}; } let boxified = {}; for(let d in hslified) { if((d === "Red" || d==="Purple") && channel === 'hue') { boxified[d] = {min:0,max:0,q1:0,q3:0,median:0}; continue; } boxified[d] = getBoxVals(hslified[d], channel, d); } let xScale = d3.scaleLinear() .domain([ d3.min(Object.values(boxified), (d) => d.min), d3.max(Object.values(boxified), (d) => d.max) ])//hue .rangeRound([padding, w - padding]); let yScale = d3.scaleBand() .domain(Object.keys(boxified).filter(d=>!d.includes(" "))) .rangeRound([padding, h - padding]); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); let xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h - padding + 10})`) .call(xAxis); let yAxisGroup = svg.append('g') .attr('class', 'axis-left1') .attr('transform', `translate(${padding - 10},13)`) .call(yAxis); function updateChartType(){ //create boxplot boxes svg.selectAll(".rect") .data(Object.keys(boxified)) .enter() .append("g") .classed("rect", true); svg.selectAll(".rect .box") .data(Object.keys(boxified)) .enter() .append("rect") .classed("box", true) .attr("x", d=>xScale(boxified[d].q1)) .attr("y", (d, i) => yScale(d.split(" ")[0]) + padding/2 - 7.5) .attr("width", d=>xScale(boxified[d].q3) - xScale(boxified[d].q1)) .attr("height", 15) .style("stroke", d=>(d.split(" ")[0])) .attr("fill", "none") .attr("fill", (d)=>boxified[d].fill) ; svg.selectAll(".rect .line") .data(Object.keys(boxified)) .enter() .append("rect") .classed("line", true) .attr("x", d=>xScale(boxified[d].min)) .attr("y", (d, i) => yScale(d.split(" ")[0]) + padding/2) .attr("width", d=>xScale(boxified[d].max) - xScale(boxified[d].min)) .attr("height", 1) .style("stroke",d=>(d.split(" ")[0])) ; svg.selectAll(".rect .med") .data(Object.keys(boxified)) .enter() .append("rect") .classed("med", true) .attr("x", d=>xScale(boxified[d].median)) .attr("y", (d, i) => yScale(d.split(" ")[0]) + padding/2 - 7) .attr("width", 1)//d=>xScale(boxified[d].max)) .attr("height", 15) .style("stroke",d=>(d.split(" ")[0])) ; } updateChartType(); const typeSelector = html` ` d3.select(typeSelector).on('change', () => { type = typeSelector.value; updateChartType(); }); return html`

${svg.node()}

`; }4d:T15de,makeChart = (dataset) => { const w = 800; const h = 600; const padding = 50; const svg = d3.create('svg') .attr('width', w) .attr('height', h); //dataset = dataset.filter(d=>(d['fur'])); //Note for future self: Hydra is missing a value for "fur" let x = 'hue'; let y = 'saturation'; let z = 'lightness'; let type = 'cloth'; let color = 'all'; //set scales let xScale = d3.scaleLinear() .domain([ d3.min(dataset, (d) => getColorData(d, 'cloth', 'hue')), d3.max(dataset, (d) => getColorData(d, 'cloth', 'hue')) ])//hue .rangeRound([padding, w - padding]); let yScale = d3.scaleLinear() //sat .domain([ d3.max(dataset, (d) => getColorData(d, 'cloth', 'saturation')), d3.min(dataset, (d) => getColorData(d, 'cloth', 'saturation')) ]) .rangeRound([padding, h - padding]); let rScale = d3.scaleSqrt() .domain([ d3.min(dataset, (d) => getColorData(d, 'cloth', 'lightness')), d3.max(dataset, (d) => getColorData(d, 'cloth', 'lightness')) ]) .range([3, 10]); let xAxis = d3.axisBottom(xScale); let yAxis = d3.axisLeft(yScale); let xAxisGroup = svg.append('g') .attr('class', 'axis') .attr('transform', `translate(0, ${h - padding + 10})`) .call(xAxis); let yAxisGroup = svg.append('g') .attr('class', 'axis-left1') .attr('transform', `translate(${padding - 10},0)`) .call(yAxis); function updateChartType(){ svg.selectAll('circle') .data(color != 'all' ? data.filter(d=>d['categories'].includes(color)) : data, d=>d['name']) .join( enter => enter.append('circle') .transition() .attr('cx', d=>xScale(getColorData(d, type, x))) .attr('cy', d=>yScale(getColorData(d, type, y))) .attr('r', d=>rScale(getColorData(d, type, z))) .attr('data-name', d=>d.name) .attr('fill', d=> getRGB(d, type)) .attr('stroke', d=>d['categories'][0]) , update => { //sets scales xScale.domain([ d3.min(dataset, d=>getColorData(d, type, x)), d3.max(dataset, d=>getColorData(d, type, x)) ]); yScale.domain([ d3.max(dataset, d=>getColorData(d, type, y)), d3.min(dataset, d=>getColorData(d, type, y)) ]); rScale.domain([ d3.min(dataset, d=>getColorData(d, type, z)), d3.max(dataset, d=>getColorData(d, type, z)) ]); //updates axis let newXAxis = d3.axisBottom(xScale); xAxisGroup.transition().delay(35).call(newXAxis); let newYAxis = d3.axisLeft(yScale); yAxisGroup.transition().delay(35).call(newYAxis); return update .transition() .delay(35) .attr('cx', d=>xScale(getColorData(d, type, x))) .attr('cy', d=>yScale(getColorData(d, type, y))) .attr('r', d=>rScale(getColorData(d, type, z))) .attr('fill', d => { return getRGB(d, type);}) .attr('data-hue', d=>getHSL(d,type)['hue']) .attr('data-sat', d=>getHSL(d,type)['saturation']) .attr('data-lig', d=>getHSL(d,type)['lightness']) .attr('data-name', d=>d['name']) ; } ) .exit((exit)=> { return exit .transition() .delay(35) .attr('cx', 0) .attr('cy', 0) .attr('r', 0) .attr('data-name', d=>d['name']) ; }).remove(); } const typeSelector = html` ` const colorSelector = html` `; const colorFilter = html` `; const hideUnselectedColor = html` d.colorCat); //return Array.from(mappedBinnedData); for (let kvp of mappedBinnedData) { let color = kvp[0]; if (color == undefined) continue; let chunk = kvp[1]; info[color] = {}; //let chunk = sortedData[color]; for (let key of ["cloth", "leather", "metal", "fur"]) { info[color][key] = { q1: { r: d3.quantile(chunk, 0.25, (d) => d[key].r), g: d3.quantile(chunk, 0.25, (d) => d[key].g), b: d3.quantile(chunk, 0.25, (d) => d[key].b), h: d3.quantile(chunk, 0.25, (d) => d[key].h), s: d3.quantile(chunk, 0.25, (d) => d[key].s), l: d3.quantile(chunk, 0.25, (d) => d[key].l) }, mean: { r: d3.quantile(chunk, 0.5, (d) => d[key].r), g: d3.quantile(chunk, 0.5, (d) => d[key].g), b: d3.quantile(chunk, 0.5, (d) => d[key].b), h: d3.quantile(chunk, 0.5, (d) => d[key].h), s: d3.quantile(chunk, 0.5, (d) => d[key].s), l: d3.quantile(chunk, 0.5, (d) => d[key].l) }, q3: { r: d3.quantile(chunk, 0.75, (d) => d[key].r), g: d3.quantile(chunk, 0.75, (d) => d[key].g), b: d3.quantile(chunk, 0.75, (d) => d[key].b), h: d3.quantile(chunk, 0.75, (d) => d[key].h), s: d3.quantile(chunk, 0.75, (d) => d[key].s), l: d3.quantile(chunk, 0.75, (d) => d[key].l) }, q3: { r: d3.quantile(chunk, 0.75, (d) => d[key].r), g: d3.quantile(chunk, 0.75, (d) => d[key].g), b: d3.quantile(chunk, 0.75, (d) => d[key].b), h: d3.quantile(chunk, 0.75, (d) => d[key].h), s: d3.quantile(chunk, 0.75, (d) => d[key].s), l: d3.quantile(chunk, 0.75, (d) => d[key].l) }, mode: { r: d3.mode(chunk, (d) => d[key].r), g: d3.mode(chunk, (d) => d[key].g), b: d3.mode(chunk, (d) => d[key].b), h: d3.mode(chunk, (d) => d[key].h), s: d3.mode(chunk, (d) => d[key].s), l: d3.mode(chunk, (d) => d[key].l) }, range: { r: d3.range(chunk, (d) => d[key].r), g: d3.range(chunk, (d) => d[key].g), b: d3.range(chunk, (d) => d[key].b), h: d3.range(chunk, (d) => d[key].h), s: d3.range(chunk, (d) => d[key].s), l: d3.range(chunk, (d) => d[key].l) } }; } } return info; })()50:T677,## Coloriest Colors: - Red (255, 0, 0) - Scorched - Yellow (255, 255, 0) - Incandescent - Green (0, 255, 0) - Green Lion - Cyan (0, 255, 255) - sand shark - Blue (0, 0, 255) - Blue Lion - Magenta (255, 0, 255) - Crystal - White (255, 255, 255) - Permafrost - Black (0, 0, 0) - All the Abyssal dyes, and Shadow Abyss | Color | Color RGB | Dye | Dye RGB | Distance | | ------- | -------------- | ------------------------------- | --------------- | -------- | | Red | (255, 0, 0) | Scorched | (238, 37, 0) | 40.72 | | Yellow | (255, 255, 0) | Incandescent | (255, 236, 76) | 78.34 | | Green | (0, 255, 0) | Green Lion | (19, 212, 19) | 50.71 | | Cyan | (0, 255, 255) | Sand Shark | (65, 177, 237) | 103.12 | | Blue | (0, 0, 255) | Blue Lion | (35, 35, 203) | 71.79 | | Magenta | (255, 0, 255) | Crystal | (210, 23, 210) | 67.67 | | White | (255, 255, 255)| Permafrost | (255, 255, 255) | 0 | | Black | (0, 0, 0) | Some Shadow Dyes, Abyssal Dyes | (0, 0, 0) | 0 | *I can't do pink or other colors like that because I don't know the pinkest or orangest or purplest (etc) rgb values. The coloriest of colors are Permafrost, some of the Shadow Dyes, and all of the Abyss Dyes. The second most coloriest of their colors is Scorched dye. The graph merely checks the distance between dyes and the given rgb values. Lower values are closer, ie. more similar to the given rgb values.51:[{"id":"80f95cbe9f7cd7dbfdefa9b9cdc5e4efc1acb30f552a0d83692d9ca100c083327a9e130cfd663691d3f7940f851a4141733e2f1ae7fb4fb80ad0faef3914fdc7","href":"https://static.observableusercontent.com/files/80f95cbe9f7cd7dbfdefa9b9cdc5e4efc1acb30f552a0d83692d9ca100c083327a9e130cfd663691d3f7940f851a4141733e2f1ae7fb4fb80ad0faef3914fdc7","name":"image.png","type":"image/png","lastModified":1667173090171.191,"size":56610},{"id":"b5bf7140e60b9515ea764dbd6a57fa62dd44d97bb5c84adabbc8a414eba946568a2afd70eec3f316aebc9f0db692434ece62d1449f456bf3650bbe119d8dc580","href":"https://static.observableusercontent.com/files/b5bf7140e60b9515ea764dbd6a57fa62dd44d97bb5c84adabbc8a414eba946568a2afd70eec3f316aebc9f0db692434ece62d1449f456bf3650bbe119d8dc580","name":"image@1.png","type":"image/png","lastModified":1667173214502.847,"size":55625}] 29:{"id":"2cdb051c18baa5ba","slug":null,"title":"Guild Wars 2 Dye Data","thumbnail":"a72a2f9b81f42b710db3bb1e6d386b48acab95b962960dd1d1d05e96f9a89c51","access_level":"public","create_time":"$D2022-10-02T18:23:20.791Z","update_time":"$D2026-08-02T00:25:39.910Z","view_time":null,"first_public_time":"$D2022-10-03T00:43:33.093Z","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":1925,"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 Dye Data","cells":[{"id":0,"value":"# Guild Wars 2 Dye Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1571,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"## Introduction\n\nOne of the things I've noticed in Guild Wars 2 is that when you sort your dyes by color, Guild Wars 2 sorts the dyes into categories you wouldn't necessarily expect it to. For instance when you filter your dyes by \"green,\" dyes that look yellow or blue will show up in the dataset. I want to know how Guild Wars 2 classifies dyes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"## A Quick Note\n\nThank you to [Kulinda on Github](https://kulinda.github.io/dyes/) and [Cliff Spradlin on the GW2 forums](https://forum-en.gw2archive.eu/forum/community/api/How-To-Colors-API) for their research on how to get the HSL/RGB values from Guild Wars 2's API's dye values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1584,"value":"viewof selectXAxis = Inputs.select(\n [\"hue\", \"saturation\", \"lightness\", \"red\", \"green\", \"blue\"],\n {\n label: \"X Axis\",\n value: \"hue\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"viewof selectYAxis = Inputs.select(\n [\"hue\", \"saturation\", \"lightness\", \"red\", \"green\", \"blue\"],\n { label: \"Y Axis\", value: \"saturation\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"viewof selectR = Inputs.select(\n [\"hue\", \"saturation\", \"lightness\", \"red\", \"green\", \"blue\"],\n { label: \"Radius\", value: \"lightness\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"viewof materialSelect = Inputs.select([\"cloth\", \"leather\", \"metal\"], {\n label: \"Material\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"## Guild Wars 2 Color Sorting\nInitially, one might think that obviously the dyes must be sorted by hue. If you look at one of the hue charts (either hue-saturation-lightness or hue-lightness-saturation) it seems pretty clear that that is the case. However if you start filtering each color you will notice that there is a lot of overlap, especially around the edges of the categories of different colors. The brown dyes especially do not seem to be very different from the dark orange or dark yellow colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"## Hue Spread\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"makeBoxPlot(sortedData, \"hue\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"As we can see in the box plot above, the brown dyes' hues span from the highest yellow hue to the lowest orange hue. Most of the categories have significant overlap with its neighboring color categories, and even with its non-neighboring colors - look at how the minimum hue for green is lower than the highest red, orange, AND yellow hues.\n\nWhat sets them apart must be the saturation and lightness, right? Lets look at the spread of those values of the color categories.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"## Saturation Spread","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1059,"value":"makeBoxPlot(sortedData, \"saturation\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"From this graph we can see that most of the brown dyes have a lower saturation than red, orange, and yellow dyes. However, we also see that all of the saturation of every dye categories, except for gray, range from almost 0% to 100%. It doesn't look like saturation plays a definitive role in how dyes are categorized in Guild Wars 2.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1098,"value":"## Lightness Spread","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1061,"value":"makeBoxPlot(sortedData, \"lightness\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1183,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1206,"value":"### Info: Guiding Star and Quartz Dye\nThese were screenshotted from the [Guild Wars 2 Wiki](https://wiki.guildwars2.com/). As you can see, the dyes are sorted into the (probably) wrong dye category.\n\n![image.png](${await FileAttachment(\"image.png\").url()})![image@1.png](${await FileAttachment(\"image@1.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1268,"value":"Notice about Guild Wars 2 API use: \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":31,"value":"/*html``*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"sortedData = function a(){\n let organizedData = {\n Red:[],\n Orange:[],\n Yellow:[],\n Green:[],\n Blue:[],\n Purple:[],\n Brown:[],\n Gray:[]\n \n };\n for(let d of data) {\n if(d[\"categories\"][0]) {\n if(d.name === \"Quartz\") d.categories[0] = \"Blue\";\n if(d.name === \"Guiding Star\") d.categories[0] = \"Yellow\";\n organizedData[d.categories[0]].push(d);\n }\n }\n return organizedData;\n}();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"data = fetch(\"https://api.guildwars2.com/v2/colors\") //https://people.rit.edu/lep2738/kav-gw2-dyes/proxy.php?action=all\")\n .then((response) => response.json())\n .then((json) => Object.values(json.colors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"data1 = data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data1","database":"$undefined"},{"id":1292,"value":"data.filter((a) => {\n return a.name == \"Aureus\";\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"//https://forum-en.gw2archive.eu/forum/community/api/How-To-Colors-API\n//https://gist.github.com/codemasher/741f30e68c6e9c7921c7\nfunction getHSL(d, type) {\n let base, c, b, hue, sat, lig;\n try {\n base = d[\"base_rgb\"];\n c = d[type][\"contrast\"];\n b = d[type][\"brightness\"];\n hue = d[type][\"hue\"];\n sat = d[type][\"saturation\"];\n lig = d[type][\"lightness\"];\n } catch (e) {\n console.log(\"error!!!!!!!!!!!!!!!!!!!!!\");\n console.log(e);\n console.log(d);\n console.log(d[type]);\n console.log(\"!!!!!!!!!!!!!!!!!!!!!end error!!!!!!!!!!!!!!!!!!!!!\");\n }\n for (let i = 0; i < 3; i++) {\n base[i] = (base[i] + b - 128) * c + 128;\n }\n let hsl = toHSL(d[type][\"rgb\"]);\n //return hsl;\n\n hsl[\"hue\"] = hsl[\"hue\"] * 1 + hue; //2;//360;\n hsl[\"saturation\"] = hsl[\"saturation\"] * sat;\n hsl[\"lightness\"] = hsl[\"lightness\"] * lig;\n return hsl; //hue: hue, saturation: sat, lightness: lig};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":739,"value":" function toHSL(rgb/*data, type*/) {\n //https://www.rapidtables.com/convert/color/rgb-to-hsl.html\n //https://gist.github.com/codemasher/741f30e68c6e9c7921c7\n\n //let color = data[type]['rgb'];\n let r = rgb[0]/255;\n let g = rgb[1]/255;\n let b = rgb[2]/255;\n \n let M = d3.max([r,g,b]);\n let m = d3.min([r,g,b]);\n let d = (M - m);\n\n let h;\n if(d == 0) {\n h = 0;\n }\n else if(r == M) {\n h = ((g - b)/d);\n if(g < b)\n h+=6;\n h/=6\n }\n else if(g == M) {\n h = (((b - r)/d) + 2)/6;\n }\n else if(b == M) {\n h = (((r - g)/d) + 4)/6;\n }\n \n let l = (M + m)/2;\n \n let s;\n if(d <= 0)\n s = 0;\n else if(l > .5)\n s = d/(2-M-m);\n else \n s = d/(M+m)\n \n let hsl = {hue: h, saturation: s, lightness: l};\n \n return hsl;\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1633,"value":"function getRGB(d, type) {\n let rgb = d[type][\"rgb\"];\n if (rgb == null) {\n rgb = [d[type].r, d[type].g, d[type].b];\n }\n let str = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"function getColorData(d, type, value) {\n console.log(d);\n console.log(type);\n console.log(value);\n console.log(\"result\");\n console.log(getHSL(d, type)[value]);\n if (value === \"hue\" || value === \"saturation\" || value === \"lightness\") {\n return getHSL(d, type)[value];\n } else {\n let rgb = d[type][\"rgb\"];\n if (rgb == null) {\n rgb = [d[type].r, d[type].g, d[type].b];\n }\n return rgb[value];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"plotJsData = mappedData.map((a) => {\n return {\n name: a.name,\n cloth_r: a.cloth.r,\n cloth_g: a.cloth.g,\n cloth_b: a.cloth.r,\n cloth_h: a.cloth.h,\n cloth_s: a.cloth.s,\n cloth_l: a.cloth.l,\n\n leather_r: a.leather.r,\n leather_g: a.leather.g,\n leather_b: a.leather.r,\n leather_h: a.leather.h,\n leather_s: a.leather.s,\n leather_l: a.leather.l,\n\n metal_r: a.metal.r,\n metal_g: a.metal.g,\n metal_b: a.metal.r,\n metal_h: a.metal.h,\n metal_s: a.metal.s,\n metal_l: a.metal.l,\n\n fur_r: a.fur.r,\n fur_g: a.fur.g,\n fur_b: a.fur.r,\n fur_h: a.fur.h,\n fur_s: a.fur.s,\n fur_l: a.fur.l,\n\n colorCat: a.colorCat\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1775,"value":"sortedPlotJsData = (function () {\n let organizedData = {\n Red: [],\n Orange: [],\n Yellow: [],\n Green: [],\n Blue: [],\n Purple: [],\n Brown: [],\n Gray: []\n };\n for (let d of plotJsData) {\n if (d.colorCat) {\n if (d.name === \"Quartz\") d.colorCat = \"Blue\";\n if (d.name === \"Guiding Star\") d.colorCat = \"Yellow\";\n organizedData[d.colorCat].push(d);\n }\n }\n return organizedData;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1790,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1788,"value":"Plot.plot({\n color: { legend: true },\n x: {\n grid: true,\n inset: 6,\n label: \"Saturation\"\n },\n y: {\n domain: [\n \"Brown\",\n \"Red\",\n \"Orange\",\n \"Yellow\",\n \"Green\",\n \"Blue\",\n \"Purple\",\n \"Gray\"\n ],\n label: \"\"\n },\n marks: [\n Plot.boxX(plotJsData, {\n y: \"colorCat\",\n x: (d) => d[selectMaterial + \"_s\"],\n fill: \"colorCat\" //(d) => d[selectMaterial + \"_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":1316,"value":"viewof selectMaterial = Inputs.select([\"cloth\", \"leather\", \"metal\", \"fur\"], {\n label: \"Material\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"viewof selectColor = Inputs.select([\"rgb\", \"hsl\"], { label: \"Color Scheme\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"filteredMappedData = mappedData.map((a) => {\n let newA = { name: a.name, colorCat: a.colorCat };\n for (var l of selectColor) {\n newA[l] = a[selectMaterial][l];\n console.log(newA);\n }\n return newA;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"## Old Chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"makeChart(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1521,"value":"viewof red = Inputs.range([0, 255], { label: \"Red\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"viewof green = Inputs.range([0, 255], { label: \"Green\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"viewof blue = Inputs.range([0, 255], { label: \"Blue\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"mostRed = filteredMappedData\n .map((a) => {\n return {\n name: a.name,\n ranking: colorRanking({ r: a.r, g: a.g, b: a.b }, red, green, blue),\n r: a.r,\n g: a.g,\n b: a.b,\n colorCat: a.colorCat\n };\n })\n .sort((a, b) => a.ranking - b.ranking)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"Plot.plot({\n x: { domain: [0, 450] },\n marks: [\n Plot.dot(mostRed, {\n x: \"ranking\",\n y: \"name\",\n tip: true,\n sort: { y: \"x\", reverse: false },\n fill: (d) => `rgb(${d.r}, ${d.g}, ${d.b})`,\n stroke: (d) => d.colorCat\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1461,"value":"colorRanking = (color, red, green, blue) => {\n //https://stackoverflow.com/questions/43453390/determine-red-and-orange-colors-in-an-array-java\n let rank = Math.sqrt(\n Math.pow(red - color.r, 2) +\n Math.pow(green - color.g, 2) +\n Math.pow(blue - color.b, 2)\n );\n return rank;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null