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
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.