Public
Edited
Jan 18, 2023
1 star
// Sets the specified named attribution on the given selection to the given values,
// after applying the dodge heuristic to those values to ensure separation. Note
// that this assumes the selection is not nested (only a single group).
function dodgeAttr(selection, name, value, separation) {
console.log(selection.data(), "selection", name, value);
const V = dodge(selection.data().map(value), separation);
selection.attr(name, (_, i) => V[i]);
// Given an array of positions V, offsets positions to ensure the given separation.
function dodge(V, separation, maxiter = 10, maxerror = 1e-1) {
console.log(V);
const n = V.length;
if (!V.every(isFinite)) throw new Error("invalid position");
if (!(n > 1)) return V;
let I = d3.range(V.length);
for (let iter = 0; iter < maxiter; ++iter) {
I.sort((i, j) => d3.ascending(V[i], V[j]));
let error = 0;
for (let i = 1; i < n; ++i) {
let delta = V[I[i]] - V[I[i - 1]];
if (delta < separation) {
delta = (separation - delta) / 2;
error = Math.max(error, delta);
V[I[i - 1]] -= delta;
V[I[i]] += delta;
}
}
if (error < maxerror) break;
}
return V;
}
}
data = [
{
year: 1970,
country: "Sweden",
receipts: 46.9
},
{
year: 1970,
country: "Netherlands",
receipts: 44
},
{
year: 1970,
country: "Norway",
receipts: 43.5
},
{
year: 1970,
country: "Britain",
receipts: 40.7
},
{
year: 1970,
country: "France",
receipts: 39
},
{
year: 1970,
country: "Germany",
receipts: 37.5
},
{
year: 1970,
country: "Belgium",
receipts: 35.2
},
{
year: 1970,
country: "Canada",
receipts: 35.2
},
{
year: 1970,
country: "Finland",
receipts: 34.9
},
{
year: 1970,
country: "Italy",
receipts: 30.4
},
{
year: 1970,
country: "United States",
receipts: 30.3
},
{
year: 1970,
country: "Greece",
receipts: 26.8
},
{
year: 1970,
country: "Switzerland",
receipts: 26.5
},
{
year: 1970,
country: "Spain",
receipts: 22.5
},
{
year: 1970,
country: "Japan",
receipts: 20.7
},
{
year: 1979,
country: "Sweden",
receipts: 57.4
},
{
year: 1979,
country: "Netherlands",
receipts: 55.8
},
{
year: 1979,
country: "Norway",
receipts: 52.2
},
{
year: 1979,
country: "Britain",
receipts: 39
},
{
year: 1979,
country: "France",
receipts: 43.4
},
{
year: 1979,
country: "Germany",
receipts: 42.9
},
{
year: 1979,
country: "Belgium",
receipts: 43.2
},
{
year: 1979,
country: "Canada",
receipts: 35.8
},
{
year: 1979,
country: "Finland",
receipts: 38.2
},
{
year: 1979,
country: "Italy",
receipts: 35.7
},
{
year: 1979,
country: "United States",
receipts: 32.5
},
{
year: 1979,
country: "Greece",
receipts: 30.6
},
{
year: 1979,
country: "Switzerland",
receipts: 33.2
},
{
year: 1979,
country: "Spain",
receipts: 27.1
},
{
year: 1979,
country: "Japan",
receipts: 26.6
}
]
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.
