{
const labels = [];
const evaluateLabel = (selection) => {
// console.log(selection)
// console.log(selection.datum)
// selection.each((a,b,c) => {
// a.forEach((dataPoint, index) => {
// // console.log(dataPoint)
// });
// })
};
console.log(bubbles.node().childNodes)
bubbles.node().childNodes.forEach(node => {
console.log(node);
// console.log(node.node().datum);
})
const dataPoints = bubbles.node().childNodes
// console.log(dataPoints)
dataPoints.forEach(node => {
// console.log(node)
// evaluateLabel(node);
});
// console.log(bubbles.node().childNodes)
// data.forEach((dataPoint, index) => {
// });
// data.forEach((dataPoint, index) => {
// const x = index * 100; // Adjust for your chart
// const y = 50; // Adjust for your chart
// const newLabel = createLabel(dataPoint, x, y);
// // Check for overlap with previously created labels
// const doesOverlap = labels.some((existingLabel) => {
// return (
// newLabel.x < existingLabel.x + existingLabel.width &&
// newLabel.x + newLabel.width > existingLabel.x &&
// newLabel.y < existingLabel.y + existingLabel.height &&
// newLabel.y + newLabel.height > existingLabel.y
// );
// });
// if (!doesOverlap) {
// labels.push(newLabel);
// } else {
// // Remove the label if it overlaps with others
// newLabel.label.remove();
// }
// }
};
createLabel = (parent, position, string) => {
const label = parent.append("text")
.attr("x", position.x)
.attr("y", position.y)
.text(string)
.attr('font-size', `${24}px`)
.attr('font-weight', 'bold')
.attr('font-family', `Roboto`)
.attr("alignment-baseline", "middle");
const textBox = label.node().getBBox();
return {
string,
box: {
x: position.x,
y: position.y,
width: textBox.width + labelPadding * 2,
height: textBox.height + labelPadding * 2
},
};
}
function getX(d) { return d.murders * 100; };
function getY(d) { return -d.burglaries / 2; };
function getR(d) { return Math.sqrt(d.population) / 100; };
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.
