Published
Edited
Feb 19, 2020
DataBWL2= await FileAttachment("BWLLoot.json").json()
ListSortedByMainWeapon=Data.sort((a,b)=>compareGear1(a.MainHand,b.MainHand))
function compareRaidItem(){
var selection = d3.select('#MenuSelect').attr('compare').split("_");
svg.selectAll("#Content").remove();
var cont=svg.append('g')
.attr('id','Content')
.attr('transform','translate(10,50)');
//Mask for displaying 2 Items
var mask = cont
.append('defs')
.append('mask')
.attr("id",'2Items')
.attr('maskUnits','userSpaceOnUse');
mask.append('rect')
.attr("width",800)
.attr("height",56)
.attr("y",70)
.attr("fill","#000000");
for (var i=0; i<Data.length;i++){
mask.append('path')
.attr('d','M 56 0 L 0 56 L 56 56 L 56 0')
.attr("transform",'translate('+(i*80+12)+',70)')
.attr("fill","#ffffff");
}
var item= cont.selectAll("Content").data(Data).enter()
.append('g')
.attr('id',(d,i)=>'item_'+i)
.attr('transform',(d,i)=>'translate('+(i*80 + 40)+',35)');
var C1 = DataBWL.find(d=>d.Boss==selection[0])[selection[1]];
var slotID= C1.meta.slot;
//console.log(slotID);
switch (slotID){
case 1:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Head});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 2:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Neck});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 3:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Shoulder});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 16:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Back});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 5:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Chest});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 9:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Bracers});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 10:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Hands});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 6:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Waist});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 7:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Legs});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 8:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Feet});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
case 11:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.Ring1, d.Ring2]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[C1,""]}], ...data_cont];
break;
case 12:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.Trinket1, d.Trinket2]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[C1,""]}], ...data_cont];
break;
case 13:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.MainHand, d.OffHand]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[C1,undefined]}], ...data_cont];
break;
case 21:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.MainHand, d.OffHand]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[C1,undefined]}], ...data_cont];
slotID=13;
break;
case 14:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.MainHand, d.OffHand]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[{"trueVal":{'armor':0, 'atk':0, 'hit':0, 'crit':0, 'dodge':0, 'block':0, 'def':0, 'sta':0, 'frores':0, 'shares':0, 'natres':0, 'arcres':0, 'firres':0, 'parry':0, 'dps':0, 'dmgmin':0, 'dmgmax':0, 'speed':0}},C1]}], ...data_cont];
slotID=13;
break;
case 17:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.MainHand, d.OffHand]});
return obj;
});
data_cont = [[{"c":"Loot", "item":[C1,undefined]}], ...data_cont];
slotID=13;
break;
case 15:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.RangeWpn});
return obj;
});
data_cont = [[{"c":"Loot", "item":C1}], ...data_cont];
break;
}
if(d3.select('#Role_select').attr('role')=="0"){
var display_R=display_DD;
}else{
var display_R=display_Tank;
}
//Add content
var item= cont.selectAll("Content").data(data_cont).enter()
.append('g')
.attr('id',(d,i)=>'item_'+d[0].c)
.attr('transform',(d,i)=>'translate('+(i*80 + 40)+',35)');
item.append('text')
.text((d,i)=>d[0].c)
.attr('x', 40)
.attr('y',35)
.attr("text-anchor","middle")
.attr("fill", "black")
.style("font-size", function(d) { return Math.min(20, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
//Display 2 Items at once as a single item (e.g. Rings & Trinkets)
if (slotID==11||slotID==12){
item.append('text')
.text((d,i)=>d[0].item[0].meta.name)
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item[0].meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('text')
.text(function(d,i){if(d[0].item[1]!=""){return d[0].item[1].meta.name}else{return ""}})
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
.attr("fill", function(d,i){if(d[0].item[1]!=""){return myColor(d[0].item[1].meta.quality)}else{return "none"} })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[0].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
);
});
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[1].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask","url(#2Items)")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[1].meta.id,
'_blank' // <- This is what makes it open in a new window.
)});
for(var z in display_R){
item.append("text")
.text(function(d,i){
if(d[0].item[1]!=""){return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val]
+d[0].item[1].trueVal[display_R[z].val])*100)/100
+display_R[z].post
}else{
return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val])*100)/100
+display_R[z].post
}} )
.attr('x',40)
.attr('y',150+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
//SHOW ME WHAT YOU GOT!!!
}else if(slotID==13){
//Weapons
item.append('text')
.text(function(d){try{if(d[0].item[0]!=undefined){return d[0].item[0].meta.name
}else{return ""}}catch(e){return ""}})
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){try{if(d[0].item[0]!=undefined){return myColor(d[0].item[0].meta.quality)
}}catch(e){return "black"} })
.style("font-size", function(d) { return Math.min(2 * 28, (2* 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('text')
.text(function(d){try{if(d[0].item[1]!=undefined){return d[0].item[1].meta.name}}catch(e){return ""}})
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
.attr("fill", function(d,i){try{if(d[0].item[1]!=undefined){return myColor(d[0].item[1].meta.quality)
}}catch(e){return "black"} })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href",function(d){try{
var str= 'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[0].icon+'.jpg';
return str;}catch(e){try{
var str= 'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[1].icon+'.jpg';
return str;}catch(e){return ""}}})
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d){try{
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
)}catch(e){try{
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[1].meta.id,
'_blank' // <- This is what makes it open in a new window.
)}catch(e){return ""}}});
item.append('image')
.attr("xlink:href",function(d){try{
var str= 'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[1].icon+'.jpg';
return str;}catch(e){return ""}})
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask","url(#2Items)")
.on("click",function(d) {try{
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[1].meta.id,
'_blank' // <- This is what makes it open in a new window.
)}catch(e){window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
)}});
//WPN DPS MainHand
item.append("text")
.text(function(d){try{return ''+ d[0].item[0].trueVal.dmgmin + ' - ' + d[0].item[0].trueVal.dmgmax + ' Dmg'
}catch(e){return ""}})
.attr('x',40)
.attr('y',150)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(function(d){try{return '('+ d[0].item[0].trueVal.dps +' dps)'}catch(e){return ""}} )
.attr('x',12)
.attr('y',160)
.attr("text-anchor","start")
.style("font-size", function(d) { return Math.min(28, ( 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(function(d){try{return ''+ d[0].item[0].trueVal.speed +' s'}catch(e){return ""}} )
.attr('x',12+56)
.attr('y',160)
.attr("text-anchor","end")
.style("font-size", '9px');
//WPN DPS OffHand
item.append("text")
.attr('x',40)
.attr('y',180)
.attr("text-anchor","middle")
.text(function(d){ try{if(d[0].item[1].trueVal.dps==0){
var str=''+ d[0].item[1].trueVal.armor + ' Armor';
return str;
}else{
var str=''+ d[0].item[1].trueVal.dmgmin + ' - ' + d[0].item[1].trueVal.dmgmax + ' Dmg';
return str;}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; })
item.append("text")
.attr('x',12)
.attr('y',190)
.attr("text-anchor","start")
.text(function(d){try{if(d[0].item[1].trueVal.dps==0){
return "";
}else{
var str='('+ d[0].item[1].trueVal.dps +' dps)';
return str;}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(28, ( 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.attr('x',12)
.attr('y',190)
.attr("text-anchor","start")
.text(function(d){try{if(d[0].item[1].trueVal.dps==0){
var str=''+ (d[0].item[1].trueVal.block ) +'% Block';
return str;
}else{
return "";}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(42, ( 42 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(function(d){try{
if(d[0].item[1].trueVal.dps==0){return ""}else{return''+ d[0].item[1].trueVal.speed +' s'}
}catch(e){/*2h*/}} )
.attr('x',12+56)
.attr('y',190)
.attr("text-anchor","end")
.style("font-size", '9px');
//Other stuff that is not dps
for(var z in display_R){
item.append("text")
.text(function(d){ if(d[0].item[1]!=undefined){
return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val]
+d[0].item[1].trueVal[display_R[z].val])*100)/100
+display_R[z].post;
}else{
return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val])*100)/100
+display_R[z].post; }})
.attr('x',40)
.attr('y',250+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
//Show the mighty warrior as a whole
}else if(slotID==0){
item.append('text')
.text((d,i)=>d[0].r)
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
//.attr("fill", function(d,i){return myColor(d[0].item[0].meta.quality) })
.style("font-size", function(d) { return (Math.min(20, (2 * 24 - 8)
/ this.getComputedTextLength() * 24)) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask",function(d,i){//create a nice little mask for the corresponding role
//console.log(d[0].role)
var mask = item
.append('defs')
.append('mask')
.attr("id",'RoleMask_'+d[0].c)
.attr('maskUnits','userSpaceOnUse');
if(d[0].role=="DD"){
mask.append('path')
.attr("d","M 0 0 L 0 20 L 8 28 L 0 36" +
"L 0 56 L 56 56"+
" L 56 36 L 48 28 L 56 20 "
+"L 56 0 L 36 0 L 28 8 L 20 0 L 0 0")
.attr("transform",'translate(12,70)')
.attr("fill","#ffffff");
}else{
mask.append('path')
.attr("d","M 0 0 L 0 40 C 0 60 56 60 56 40 L 56 0 L 0 0")
.attr("transform",'translate(12,70)')
.attr("fill","#ffffff");
}
return "url(#RoleMask_"+d[0].c+")"
})
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item.meta.id,
'_blank' // <- This is what makes it open in a new window.
)});
//Estimated DPS
item.append('text')
.text(d=>'('+d[0].item[0]['dps']+' dps)')
.attr('x',40)
.attr('y',150)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
for(var z in display_R){
item.append("text")
.text(function(d){
var c= display_R[z].pre +d[0].item[0][display_R[z].val] +display_R[z].post;
return c;
})
.attr('x',40)
.attr('y',200+z*20)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
}else{
//Other Items
item.append('text')
.text((d,i)=>d[0].item.meta.name)
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item.meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item.icon+'.jpg')
.attr("x", 12)
.attr("y", "60")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item.meta.id,
'_blank' // <- This is what makes it open in a new window.
)});
//
//-----------Displayed information-------------
//
for(var z in display_R){
item.append("text")
.text(function(d,i){
if(d[0].c=="Loot"){return display_R[z].pre
+Math.round((+d[0].item.trueVal[display_R[z].val])*100)/100
+display_R[z].post
}else{
//console.log(data_cont)
return "\u0394 "+ display_R[z].pre
+Math.round((+data_cont[0][0].item.trueVal[display_R[z].val]-d[0].item.trueVal[display_R[z].val])*100)/100
+display_R[z].post
}})
.attr("fill",function(d,i){
if(d[0].c=="Loot"){return "black"
}else{
if((+data_cont[0][0].item.trueVal[display_R[z].val]-d[0].item.trueVal[display_R[z].val])>0){
return "green"
}else if((+data_cont[0][0].item.trueVal[display_R[z].val]-d[0].item.trueVal[display_R[z].val])<0){
return "red"
}else{
return "black"
}}})
.attr('x',40)
.attr('y',150+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
}
}
function selectItem(slotID){
//console.log('new content selected')
if(slotID<0){
selectRaid(slotID);
return;
}
svg.selectAll("#Content").remove();
var cont=svg.append('g')
.attr('id','Content')
.attr('transform','translate(10,50)');
//Mask for displaying 2 Items
var mask = cont
.append('defs')
.append('mask')
.attr("id",'2Items')
.attr('maskUnits','userSpaceOnUse');
mask.append('rect')
.attr("width",800)
.attr("height",56)
.attr("y",70)
.attr("fill","#000000");
for (var i=0; i<Data.length;i++){
mask.append('path')
.attr('d','M 56 0 L 0 56 L 56 56 L 56 0')
.attr("transform",'translate('+(i*80+12)+',70)')
.attr("fill","#ffffff");
}
//get the right data for display
switch (slotID){
case 0:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character,
"r":d.Race,
"icon":d.DisplayIcn,
"item":[d.Sum],
"role":d.Role
});
return obj;
});
break;
case 1:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Head});
return obj;
});
break;
case 2:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Neck});
return obj;
});
break;
case 3:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Shoulder});
return obj;
});
break;
case 16:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Back});
return obj;
});
break;
case 5:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Chest});
return obj;
});
break;
case 9:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Bracers});
return obj;
});
break;
case 10:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Hands});
return obj;
});
break;
case 6:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Waist});
return obj;
});
break;
case 7:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Legs});
return obj;
});
break;
case 8:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.Feet});
return obj;
});
break;
case 11:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.Ring1, d.Ring2]});
return obj;
});
break;
case 12:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.Trinket1, d.Trinket2]});
return obj;
});
break;
case 13:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":[d.MainHand, d.OffHand]});
return obj;
});
break;
case 15:
var data_cont= Data.map((d)=>{ var obj=[];
obj.push({"c": d.Character, "item":d.RangeWpn});
return obj;
});
break;
}
//Add Content specified by selected Role
if(d3.select('#Role_select').attr('role')=="0"){
var display_R=display_DD;
}else{
var display_R=display_Tank;
}
//Add content
var item= cont.selectAll("Content").data(data_cont).enter()
.append('g')
.attr('id',(d,i)=>'item_'+d[0].c)
.attr('transform',(d,i)=>'translate('+(i*80 + 40)+',35)');
item.append('text')
.text((d,i)=>d[0].c)
.attr('x', 40)
.attr('y',35)
.attr("text-anchor","middle")
.attr("fill", "black")
.style("font-size", function(d) { return Math.min(20, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
//Display 2 Items at once as a single item (e.g. Rings & Trinkets)
if (slotID==11||slotID==12){
item.append('text')
.text((d,i)=>d[0].item[0].meta.name)
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item[0].meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('text')
.text((d,i)=>d[0].item[1].meta.name)
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item[1].meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[0].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
);
});
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[1].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask","url(#2Items)")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[1].meta.id,
'_blank' // <- This is what makes it open in a new window.
);
});
for(var z in display_R){
item.append("text")
.text((d,i)=>display_R[z].pre +Math.round((+d[0].item[0].trueVal[display_R[z].val]
+d[0].item[1].trueVal[display_R[z].val])*100)/100 +display_R[z].post )
.attr('x',40)
.attr('y',150+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
//SHOW ME WHAT YOU GOT!!!
}else if(slotID==13){
//Weapons
item.append('text')
.text((d,i)=>d[0].item[0].meta.name)
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item[0].meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2* 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('text')
.text(function(d){try{if(d[0].item[1]!=undefined){return d[0].item[1].meta.name}}catch(e){return ""}})
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
.attr("fill", function(d,i){try{if(d[0].item[1]!=undefined){return myColor(d[0].item[1].meta.quality)
}}catch(e){return "black"} })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[0].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
);
});
item.append('image')
.attr("xlink:href",function(d){try{
var str= 'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item[1].icon+'.jpg';
return str;}catch(e){return ""}})
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask","url(#2Items)")
.on("click",function(d) {try{
window.open(
'https://de.classic.wowhead.com/item='+d[0].item[1].meta.id,
'_blank' // <- This is what makes it open in a new window.
);}catch(e){window.open(
'https://de.classic.wowhead.com/item='+d[0].item[0].meta.id,
'_blank' // <- This is what makes it open in a new window.
);}
});
//WPN DPS MainHand
item.append("text")
.text(d=>''+ d[0].item[0].trueVal.dmgmin + ' - ' + d[0].item[0].trueVal.dmgmax + ' Dmg')
.attr('x',40)
.attr('y',150)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(d=>'('+ d[0].item[0].trueVal.dps +' dps)' )
.attr('x',12)
.attr('y',160)
.attr("text-anchor","start")
.style("font-size", function(d) { return Math.min(28, ( 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(d=>''+ d[0].item[0].trueVal.speed +' s' )
.attr('x',12+56)
.attr('y',160)
.attr("text-anchor","end")
.style("font-size", '9px');
//WPN DPS OffHand
item.append("text")
.attr('x',40)
.attr('y',180)
.attr("text-anchor","middle")
.text(function(d){ try{if(d[0].item[1].trueVal.dps==0){
var str=''+ d[0].item[1].trueVal.armor + ' Armor';
return str;
}else{
var str=''+ d[0].item[1].trueVal.dmgmin + ' - ' + d[0].item[1].trueVal.dmgmax + ' Dmg';
return str;}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; })
item.append("text")
.attr('x',12)
.attr('y',190)
.attr("text-anchor","start")
.text(function(d){try{if(d[0].item[1].trueVal.dps==0){
return "";
}else{
var str='('+ d[0].item[1].trueVal.dps +' dps)';
return str;}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(28, ( 28 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.attr('x',12)
.attr('y',190)
.attr("text-anchor","start")
.text(function(d){try{if(d[0].item[1].trueVal.dps==0){
var str=''+ (d[0].item[1].trueVal.block ) +'% Block';
return str;
}else{
return "";}}catch(e){/*2h*/}})
.style("font-size", function(d) { return Math.min(42, ( 42 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append("text")
.text(function(d){try{
if(d[0].item[1].trueVal.dps==0){return ""}else{return''+ d[0].item[1].trueVal.speed +' s'}
}catch(e){/*2h*/}} )
.attr('x',12+56)
.attr('y',190)
.attr("text-anchor","end")
.style("font-size", '9px');
//Other stuff that is not dps
for(var z in display_R){
item.append("text")
.text(function(d){ if(d[0].item[1]!=undefined){
return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val]
+d[0].item[1].trueVal[display_R[z].val])*100)/100
+display_R[z].post;
}else{
return display_R[z].pre
+Math.round((+d[0].item[0].trueVal[display_R[z].val])*100)/100
+display_R[z].post; }})
.attr('x',40)
.attr('y',250+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
//Show the mighty warrior as a whole
}else if(slotID==0){
item.append('text')
.text((d,i)=>d[0].r)
.attr('x',40)
.attr('y',60)
.attr("text-anchor","middle")
//.attr("fill", function(d,i){return myColor(d[0].item[0].meta.quality) })
.style("font-size", function(d) { return (Math.min(20, (2 * 24 - 8)
/ this.getComputedTextLength() * 24)) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].icon+'.jpg')
.attr("x", 12)
.attr("y", "70")
.attr("width", "56")
.attr("height", "56")
.attr("mask",function(d,i){//create a nice little mask for the corresponding role
//console.log(d[0].role)
var mask = item
.append('defs')
.append('mask')
.attr("id",'RoleMask_'+d[0].c)
.attr('maskUnits','userSpaceOnUse');
if(d[0].role=="DD"){
mask.append('path')
.attr("d","M 0 0 L 0 20 L 8 28 L 0 36" +
"L 0 56 L 56 56"+
" L 56 36 L 48 28 L 56 20 "
+"L 56 0 L 36 0 L 28 8 L 20 0 L 0 0")
.attr("transform",'translate(12,70)')
.attr("fill","#ffffff");
}else{
mask.append('path')
.attr("d","M 0 0 L 0 40 C 0 60 56 60 56 40 L 56 0 L 0 0")
.attr("transform",'translate(12,70)')
.attr("fill","#ffffff");
}
return "url(#RoleMask_"+d[0].c+")"
});
//Estimated DPS
item.append('text')
.text(d=>'('+d[0].item[0]['dps']+' dps)')
.attr('x',40)
.attr('y',150)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
for(var z in display_R){
item.append("text")
.text(function(d){
var c= display_R[z].pre +d[0].item[0][display_R[z].val] +display_R[z].post;
return c;
})
.attr('x',40)
.attr('y',200+z*20)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
}else{
//Other Items
item.append('text')
.text((d,i)=>d[0].item.meta.name)
.attr('x',40)
.attr('y',50)
.attr("text-anchor","middle")
.attr("fill", function(d,i){return myColor(d[0].item.meta.quality) })
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
item.append('image')
.attr("xlink:href", d=>'https://wow.zamimg.com/images/wow/icons/large/'+d[0].item.icon+'.jpg')
.attr("x", 12)
.attr("y", "60")
.attr("width", "56")
.attr("height", "56")
.on("click",function(d) {
window.open(
'https://de.classic.wowhead.com/item='+d[0].item.meta.id,
'_blank' // <- This is what makes it open in a new window.
);
});
//
//-----------Displayed information-------------
//
for(var z in display_R){
item.append("text")
.text((d,i)=>display_R[z].pre +Math.round((+d[0].item.trueVal[display_R[z].val])*100)/100
+display_R[z].post )
.attr('x',40)
.attr('y',150+20*z)
.attr("text-anchor","middle")
.style("font-size", function(d) { return Math.min(2 * 28, (2 * 24 - 8)
/ this.getComputedTextLength() * 24) + "px"; });
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
