NYT reporter
Published
Edited
May 26, 2021
1 fork
Importers
23 stars
dedupeLabelsDemo = (allDedupeLabels) => {
// allDedupeLabels should contain all the objects you want to consider for de-duping
// ex. dedupeLabels(d3.selectAll('.dedupe')
// Use class "dedupe" when generating each object. Then add "dedupe-always-show" to things you want to show regardless (like important labels)
// A function to check whether two bounding boxes overlap
const getOverlapFromTwoExtents = (l, r) => {
var overlapPadding = 0
l.left = l.x - overlapPadding
l.right = l.x + l.width + overlapPadding
l.top = l.y - overlapPadding
l.bottom = l.y + l.height + overlapPadding
r.left = r.x - overlapPadding
r.right = r.x + r.width + overlapPadding
r.top = r.y - overlapPadding
r.bottom = r.y + r.height + overlapPadding
var a = l
var b = r
if (a.left >= b.right || a.top >= b.bottom ||
a.right <= b.left || a.bottom <= b.top ){
return false
} else {
return true
}
}
// Cycle through dedupables and dedupe them
allDedupeLabels.each(function(d, i) {
// Get bounding box
var thisBBox = this.getBBox()
// Iterate through each box to see if it overlaps with any following
// If they do, hide them
// And only get labels later in the order than this one
allDedupeLabels.filter((k, j) => j > i).each(function(d){
var underBBox = this.getBBox()
// If not overlapping with a subsequent item, and isn't meant to be shown always, hide it
if(getOverlapFromTwoExtents(thisBBox, underBBox) && d3.select(this).attr('class').match('dedupe-always-show') == null){
d3.select(this)
// TODO: This animation is just for the Observable demo
.style('opacity', 1)
.transition().delay(500).duration(1000)
.style('opacity', 0)
}
})
})
}
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.
