Public
Edited
Nov 28, 2024
1 fork
viewof populationThreshold = Inputs.range([10000, 40000000], {value: 11311000, step: 1000, label: "Population Thres."})
{
const textLabel = fc.layoutTextLabel()
.padding(labelPadding)
.value((d) => d.state);
const strategy = fc.layoutRemoveOverlaps(); // layoutRemoveOverlaps, layoutAnnealing, layoutGreedy
const fontSettings = (selection) => {
selection
.attr('font-size', `${24}px`)
.attr('font-weight', 'bold')
.attr('font-family', `Roboto`);
};
// Create the layout that positions the labels
const labels = fc.layoutLabel(strategy)
.size((d, i, g) => {
// Measure the label and add the required padding
const selection = d3.select(g[i]);
const textSize = selection
.select('text')
.call(fontSettings)
.node()
.getBBox();
return [
textSize.width + labelPadding * 2,
textSize.height + labelPadding * 2
];
})
.position((d, i, g) => {
// Measure the label and add the required padding
const selection = d3.select(g[i]);
selection
.select('text')
.call(fontSettings)
.node()
.getBBox();
return [
getX(d),
getY(d)
];
})
.component(textLabel);
// Filter the data based on the population threshold
const filteredData = data.filter((d) => d.population > populationThreshold);
// Render the labels for filtered data
bubbles.datum(filteredData).call(labels);
// bubbles.datum(data).call(allLabels);
// If you want to hide or remove labels that didn't meet the criteria, you can do so in a separate step.
d3.selectAll('g.label rect').attr('fill', 'rgba(0,0,0,0.2)');
return "Data Labels with filter strategy";
}
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.
