Published
Edited
Sep 24, 2022
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function pieData(group, tooltip) {
tooltip.on('mousemove', mouseMove)
function mouseMove(d, i) {
let mousePos = d3.mouse(group.node())
let tooltipWidth = tooltip.selectAll('text').node().getBBox().width
let leftRight = totalWidth/2 < mousePos[0] ?
-(tooltipWidth) : 10 + padding
tooltip.attr('transform', 'translate('+((mousePos[0])+leftRight)+','+
(mousePos[1]-padding+pieHeight)+')')
}
/*
===== OUTGOING DAMAGE =====
*/
function mouseoverOutDamage(d, i) {
let mouseText = `
${topOutDamage[i].Ability} -
${Math.round(topOutDamage[i].Damage/_.sum(topOutDamage.map(x => x.Damage))*100)}%
`
if (topOutDamage[i].Ability != 'Other') {
mouseText += ` | Hits: ${topOutDamage[i].Hits} | Crit Rate: ${topOutDamage[i].Crits} | Biggest: ${topOutDamage[i].Max} `
}
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5).attr('height', text.getBBox().height+5)

d3.select("text#outDama"+cleanID(topOutDamage[i].Ability)).attr('font-weight', 'bold')
d3.select("path#outDama"+cleanID(topOutDamage[i].Ability)).attr('stroke', 'black')
d3.select('rect#outDama'+cleanID(topOutDamage[i].Ability)).attr('stroke', 'black')
}

function mouseoverOutType(d, i) {
let mouseText = `${topOutType[i].Type}: ${topOutType[i].Damage > 9999 ?
Math.round(topOutType[i].Damage/100)/10+'k' : topOutType[i].Damage} -
${Math.round(topOutType[i].Damage/_.sum(topOutType.map(x => x.Damage))*100)}%`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5)
}

// Outgoing damage pie
let cumWidth = 0
let outDamGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+', 0)')

outDamGroup.selectAll('empty').data(outDamaPie).join('path')
.attr('id', (d, i) => 'outDama'+cleanID(topOutDamage[i].Ability))
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', innerArc)
.attr('fill', (d, i) => i > 4 ? d3.hcl(231, 10, 80) : d3.hcl(231, 40, damageAbilityLightness[i]))
.attr('stroke', 'white')
.attr('stroke-width', 2)
.on('mouseover', mouseoverOutDamage)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#outDama"+cleanID(topOutDamage[i].Ability)).attr('font-weight', 'normal')
d3.select("path#outDama"+cleanID(topOutDamage[i].Ability)).attr('stroke', 'white')
d3.select('rect#outDama'+cleanID(topOutDamage[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

outDamGroup.selectAll('empty').data(outTypePie).join('path')
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', outerArc)
.attr('fill', (d, i) => damageColors[topOutType[i].Type])
.attr('stroke', 'black')
.on('mouseover', mouseoverOutType)
.on('mouseout', d => {tooltip.attr('visibility', 'hidden')})
.on('mousemove', mouseMove)
// Outgoing damage top
let outDamTopGroup = group.append('g')
.attr('transform', 'translate(0, '+(colSize+padding)+')')

outDamTopGroup.append('text')
.text(topOutDamage.length > 0 ? 'Top Abilities' : 'No Data')
.attr('font-size', fontSize)
.attr('text-anchor', 'middle')
.attr('dx', colSize/2)
.attr('dy', topOutDamage.length > 0 ? fontSize : -colSize/2)

outDamTopGroup.selectAll('empty').data(topOutDamage).join('text')
.attr('id', d => 'outDama'+cleanID(d.Ability))
.text(d => {
let text = `
${d.Ability}:
${d.Damage > 9999 ? Math.round(d.Damage/100)/10+'k' : d.Damage} dmg
${d.Ability == 'Other' ? '' : '('+d.DPS+' dps)'}
`
return text
})
.attr('font-size', smallFontSize)
.attr('dx', fontPadding)
.attr('dy', (d, i) => fontSize + (smallFontSize+fontPadding)*(i+1) + fontPadding)

outDamTopGroup.selectAll('empty').data(topOutDamage).join('rect')
.attr('transform', (d, i) => 'translate(0,'+(smallFontSize+(smallFontSize+fontPadding)*(i+1) + fontPadding)+')')
.attr('width', colSize)
.attr('height', smallFontSize)
.attr('opacity', 0)
.on('mouseover', mouseoverOutDamage)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#outDama"+cleanID(topOutDamage[i].Ability)).attr('font-weight', 'normal')
d3.select("path#outDama"+cleanID(topOutDamage[i].Ability)).attr('stroke', 'white')
d3.select('rect#outDama'+cleanID(topOutDamage[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)
/*
===== OUTGOING HEALING =====
*/
function mouseoverOutHeal(d, i) {
let mouseText = `
${topOutHeal[i].Ability} -
${Math.round(topOutHeal[i].Heal/_.sum(topOutHeal.map(x => x.Heal))*100)}%
`
if (topOutHeal[i].Ability != 'Other') {
mouseText += ` | Hits: ${topOutHeal[i].Hits} | Crit Rate: ${topOutHeal[i].Crits} | Biggest: ${topOutHeal[i].Max} `
}
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5).attr('height', text.getBBox().height+5)

d3.select("text#outHeal"+cleanID(topOutHeal[i].Ability)).attr('font-weight', 'bold')
d3.select("path#outHeal"+cleanID(topOutHeal[i].Ability)).attr('stroke', 'black')
d3.select('rect#outHeal'+cleanID(topOutHeal[i].Ability)).attr('stroke', 'black')
}

function mouseoverOutHealTarget(d, i) {
let mouseText = `${topOutHealPlayers[i].Player}: ${topOutHealPlayers[i].Value > 9999 ?
Math.round(topOutHealPlayers[i].Value/100)/10+'k' : topOutHealPlayers[i].Value} -
${Math.round(topOutHealPlayers[i].Value/_.sum(topOutHealPlayers.map(x => x.Value))*100)}%`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5)
}
cumWidth += colSize + padding
let outHealGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+', 0)')

outHealGroup.selectAll('empty').data(outHealPie).join('path')
.attr('id', (d, i) => 'outHeal'+cleanID(topOutHeal[i].Ability))
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', innerArc)
.attr('fill', (d, i) => i > 4 ? d3.hcl(130, 10, 80) : d3.hcl(130, 55, healAbilityLightness[i]))
.attr('stroke', 'white')
.attr('stroke-width', 2)
.on('mouseover', mouseoverOutHeal)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#outHeal"+cleanID(topOutHeal[i].Ability)).attr('font-weight', 'normal')
d3.select("path#outHeal"+cleanID(topOutHeal[i].Ability)).attr('stroke', 'white')
d3.select('rect#outHeal'+cleanID(topOutHeal[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

outHealGroup.selectAll('empty').data(outHealTargetPie).join('path')
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', outerArc)
.attr('fill', d => d.data.Player == 'Absorbed' ? d3.hcl(0, 0, 0) : d3.hcl(0, 0, 60))
.attr('stroke', 'black')
.on('mouseover', mouseoverOutHealTarget)
.on('mouseout', d => {tooltip.attr('visibility', 'hidden')})
.on('mousemove', mouseMove)
// Outgoing heal top
let outHealTopGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+','+(colSize+padding)+')')

outHealTopGroup.append('text')
.text(topOutHeal.length > 0 ? 'Top Abilities' : 'No Data')
.attr('font-size', fontSize)
.attr('text-anchor', 'middle')
.attr('dx', colSize/2)
.attr('dy', topOutHeal.length > 0 ? fontSize : -colSize/2)

outHealTopGroup.selectAll('empty').data(topOutHeal).join('text')
.attr('id', d => 'outHeal'+cleanID(d.Ability))
.text(d => {
let text = `
${d.Ability}:
${d.Heal > 9999 ? Math.round(d.Heal/100)/10+'k' : d.Heal} HP
${d.Ability == 'Other' ? '' : '('+d.HPS+' hps)'}
`
return text
})
.attr('font-size', smallFontSize)
.attr('dx', fontPadding)
.attr('dy', (d, i) => fontSize + (smallFontSize+fontPadding)*(i+1) + fontPadding)

outHealTopGroup.selectAll('empty').data(topOutHeal).join('rect')
.attr('transform', (d, i) => 'translate(0,'+(smallFontSize+(smallFontSize+fontPadding)*(i+1) + fontPadding)+')')
.attr('width', colSize)
.attr('height', smallFontSize)
.attr('opacity', 0)
.on('mouseover', mouseoverOutHeal)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#outHeal"+cleanID(topOutHeal[i].Ability)).attr('font-weight', 'normal')
d3.select("path#outHeal"+cleanID(topOutHeal[i].Ability)).attr('stroke', 'white')
d3.select('rect#outHeal'+cleanID(topOutHeal[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)
/*
===== INCOMING DAMAGE =====
*/
function mouseoverIncType(d, i) {
let mouseText = `
${incDamageType[i].Type}: ${incDamageType[i].Damage > 9999 ?
Math.round(incDamageType[i].Damage/100)/10+'k' : incDamageType[i].Damage} -
${Math.round(incDamageType[i].Damage/_.sum(incDamageType.map(x => x.Damage))*100)}%
`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5).attr('height', text.getBBox().height+5)
}

function mouseoverIncAbility(d, i) {
let mouseText = `${topIncDama[i].Ability}: ${topIncDama[i].Damage > 9999 ?
Math.round(topIncDama[i].Damage/100)/10+'k' : topIncDama[i].Damage} dmg -
${Math.round(topIncDama[i].Damage/_.sum(topIncDama.map(x => x.Damage))*100)}%`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5)

d3.select("text#incDama"+cleanID(topIncDama[i].Ability)).attr('font-weight', 'bold')
d3.select("path#incDama"+cleanID(topIncDama[i].Ability)).attr('stroke', 'black')
d3.select('rect#incDama'+cleanID(topIncDama[i].Ability)).attr('stroke', 'black')
}
cumWidth += colSize + padding
let incDamaGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+', 0)')

incDamaGroup.selectAll('empty').data(topIncDamaPie).join('path')
.attr('id', (d, i) => 'incDama'+cleanID(topIncDama[i].Ability))
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', innerArc)
.attr('fill', (d, i) => i > 4 ? d3.hcl(5, 10, 80) : d3.hcl(5, 70, damageAbilityLightness[i]))
.attr('stroke', 'white')
.attr('stroke-width', 2)
.on('mouseover', mouseoverIncAbility)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#incDama"+cleanID(topIncDama[i].Ability)).attr('font-weight', 'normal')
d3.select("path#incDama"+cleanID(topIncDama[i].Ability)).attr('stroke', 'white')
d3.select('rect#incDama'+cleanID(topIncDama[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

incDamaGroup.selectAll('empty').data(incDamaTypePie).join('path')
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', outerArc)
.attr('fill', (d, i) => damageColors[incDamageType[i].Type])
.attr('stroke', 'black')
.on('mouseover', mouseoverIncType)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#incType"+cleanID(incDamageType[i].Type)).attr('font-weight', 'normal')
d3.select("path#incType"+cleanID(incDamageType[i].Type)).attr('stroke', 'white')
d3.select('rect#incDama'+cleanID(incDamageType[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

// Incoming damage top
let incDamTopGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+', '+(colSize+padding)+')')

incDamTopGroup.append('text')
.text(topIncDama.length > 0 ? 'Top Abilities' : 'No Data')
.attr('font-size', fontSize)
.attr('text-anchor', 'middle')
.attr('dx', colSize/2)
.attr('dy', topIncDama.length > 0 ? fontSize : -colSize/2)

incDamTopGroup.selectAll('empty').data(topIncDama).join('text')
.attr('id', d => 'incDama'+cleanID(d.Ability))
.text(d => {
let text = `
${d.Ability}:
${d.Damage > 9999 ? Math.round(d.Damage/100)/10+'k' : d.Damage} dmg
`
return text
})
.attr('font-size', smallFontSize)
.attr('dx', fontPadding)
.attr('dy', (d, i) => fontSize + (smallFontSize+fontPadding)*(i+1) + fontPadding)

incDamTopGroup.selectAll('empty').data(topIncDama).join('rect')
.attr('transform', (d, i) => 'translate(0,'+(smallFontSize+(smallFontSize+fontPadding)*(i+1) + fontPadding)+')')
.attr('width', colSize)
.attr('height', smallFontSize)
.attr('opacity', 0)
.on('mouseover', mouseoverIncAbility)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#incDama"+cleanID(topIncDama[i].Ability)).attr('font-weight', 'normal')
d3.select("path#incDama"+cleanID(topIncDama[i].Ability)).attr('stroke', 'white')
d3.select('rect#incDama'+cleanID(topIncDama[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

/*
===== INCOMING HEALING =====
*/
function mouseoverIncHeal(d, i) {
let mouseText = `
${topIncHeal[i].Ability} -
${Math.round(topIncHeal[i].Heal/_.sum(topIncHeal.map(x => x.Heal))*100)}%
`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5).attr('height', text.getBBox().height+5)

d3.select("text#incHeal"+cleanID(topIncHeal[i].Ability)).attr('font-weight', 'bold')
d3.select("path#incHeal"+cleanID(topIncHeal[i].Ability)).attr('stroke', 'black')
d3.select('rect#incHeal'+cleanID(topIncHeal[i].Ability)).attr('stroke', 'black')
}

function mouseoverIncHealPlayer(d, i) {
let mouseText = `${topIncHealPlayer[i].Player}: ${topIncHealPlayer[i].Value > 9999 ?
Math.round(topIncHealPlayer[i].Value/100)/10+'k' : topIncHealPlayer[i].Value} -
${Math.round(topIncHealPlayer[i].Value/_.sum(topIncHealPlayer.map(x => x.Value))*100)}%`
let text = tooltip.attr('visibility', 'visible')
.selectAll('text').text(mouseText).node()
tooltip.selectAll('rect').attr('width', text.getBBox().width+5)
}
cumWidth += colSize + padding
let incHealGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+', 0)')

incHealGroup.selectAll('empty').data(topIncHealPie).join('path')
.attr('id', (d, i) => 'incHeal'+cleanID(topIncHeal[i].Ability))
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', innerArc)
.attr('fill', (d, i) => i > 4 ? d3.hcl(45, 10, 80) : d3.hcl(45, 80, healAbilityLightness[i]))
.attr('stroke', 'white')
.attr('stroke-width', 2)
.on('mouseover', mouseoverIncHeal)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#incHeal"+cleanID(topIncHeal[i].Ability)).attr('font-weight', 'normal')
d3.select("path#incHeal"+cleanID(topIncHeal[i].Ability)).attr('stroke', 'white')
d3.select('rect#incHeal'+cleanID(topIncHeal[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)

incHealGroup.selectAll('empty').data(topIncHealPlayerPie).join('path')
.attr('transform', 'translate('+(colSize/2)+','+(colSize/2)+')')
.attr('d', outerArc)
.attr('fill', d3.hcl(0, 0, 60))
.attr('stroke', 'black')
.on('mouseover', mouseoverIncHealPlayer)
.on('mouseout', d => {tooltip.attr('visibility', 'hidden')})
.on('mousemove', mouseMove)

// Incoming heal top
let incHealTopGroup = group.append('g')
.attr('transform', 'translate('+cumWidth+','+(colSize+padding)+')')

incHealTopGroup.append('text')
.text(topIncHeal.length > 0 ? 'Top Abilities' : 'No Data')
.attr('font-size', fontSize)
.attr('text-anchor', 'middle')
.attr('dx', colSize/2)
.attr('dy', topIncHeal.length > 0 ? fontSize : -colSize/2)

incHealTopGroup.selectAll('empty').data(topIncHeal).join('text')
.attr('id', d => 'incHeal'+cleanID(d.Ability))
.text(d => {
let text = `
${d.Ability}:
${d.Heal > 9999 ? Math.round(d.Heal/100)/10+'k' : d.Heal} HP
`
return text
})
.attr('font-size', smallFontSize)
.attr('dx', fontPadding)
.attr('dy', (d, i) => fontSize + (smallFontSize+fontPadding)*(i+1) + fontPadding)

incHealTopGroup.selectAll('empty').data(topIncHeal).join('rect')
.attr('transform', (d, i) => 'translate(0,'+(smallFontSize+(smallFontSize+fontPadding)*(i+1) + fontPadding)+')')
.attr('width', colSize)
.attr('height', smallFontSize)
.attr('opacity', 0)
.on('mouseover', mouseoverIncHeal)
.on('mouseout', (d, i) => {
tooltip.attr('visibility', 'hidden')
d3.select("text#incHeal"+cleanID(topIncHeal[i].Ability)).attr('font-weight', 'normal')
d3.select("path#incHeal"+cleanID(topIncHeal[i].Ability)).attr('stroke', 'white')
d3.select('rect#incHeal'+cleanID(topIncHeal[i].Ability)).attr('stroke', 'none')
})
.on('mousemove', mouseMove)
d3.select(tooltip.node()).raise()
return group
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more