Visualizing a changing planet for The Washington Post
Public
Edited
Jul 22, 2024
Importers
5 stars
myLabels = {
const labels = [{
"name": "Ann",
"value": 16
}, {
"name": "Betty",
"value": 70
}, {
"name": "Caroline",
"value": 78
}, {
"name": "Dave",
"value": 86
}, {
"name": "Ed",
"value": 150
}, {
"name": "Frank",
"value": 158
}, {
"name": "Georgia",
"value": 166
}];
const dodged = dodge(labels.map(label => label.value), separation);
labels.forEach((label, index) => {
label.position = dodged[index];
return label;
});
return labels;
};
// Takes an array of numbers representing the y-coordinate
// See https://observablehq.com/@d3/slope-chart/3
function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {
let n = positions.length;
if (!positions.every(isFinite)) throw new Error("invalid position");
if (!(n > 1)) return positions;
let index = d3.range(positions.length);
for (let iter = 0; iter < maxiter; ++iter) {
index.sort((i, j) => d3.ascending(positions[i], positions[j]));
let error = 0;
for (let i = 1; i < n; ++i) {
let delta = positions[index[i]] - positions[index[i - 1]];
if (delta < separation) {
delta = (separation - delta) / 2;
error = Math.max(error, delta);
positions[index[i - 1]] -= delta;
positions[index[i]] += delta;
}
}
if (error < maxerror) break;
}
return positions;
}
height = 200;
html`<style>
.start {
fill: tomato;
}
.end {
fill: steelblue;
}
</style>`
import { getCurrentPinnedName } from '@bryangingechen/version-pinning-for-notebooks@469'
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.
