Basketball and data visualization enthusiast. Former engineer at @observablehq
Public
Edited
Nov 9, 2023
function distributePositions(data, width) {
// Sort the data based on the index field
data.sort((a, b) => a.index - b.index);
// Create a D3 scale for the x-axis
const xScale = d3
.scaleLinear()
.domain([0, data.length - 1]) // Assumes index values start from 0
.range([0, width]);
// Calculate the width of each item based on the number of items and available width
const itemWidth = width / data.length;
// Iterate through the sorted data and update x-coordinates
data.forEach((d, i) => {
const xPos = xScale(d.index); // Calculate the position using the scale
// Adjust the x-coordinate to prevent overlap
d.x = xPos + itemWidth / 2 - 20 / 2;
});
return data;
}
pointers = [
{
label: "left",
index: 0
},
{
label: "right",
index: 0
},
// {
// label: "right",
// index: 0
// }
]
groupOverlappingIndexes(pointers)
function groupOverlappingIndexes(data) {
const positionIndexMap = new Map();
const indexesAtGroup = d3.group(data, (d) => d.index);
// Use .map() to create a new array with position indexes added
return data.map((item) => {
const { index } = item;
// Initialize the position index for the current index if it doesn't exist
if (!positionIndexMap.has(index)) {
positionIndexMap.set(index, 1);
}
// Get the current position index for the index
const positionIndex = positionIndexMap.get(index);
// Increment the position index for the index
positionIndexMap.set(index, positionIndex + 1);
const total = indexesAtGroup.get(index).length;
const overlappingIndex = (1 / total) * positionIndex;
return {
...item,
index: index + overlappingIndex
};
});
}
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.
