prefixVarsInFormulaDiscrete distribution inputheightiframe testFenced code highlighterWhat's this?FullscreenSVG editingEditable SVGFile Uploaderpt - pretty-print matrices & tensorsselectFlat inputHello html2canvasGeoJSON feature editorwidthTesting visibility continuouslyForce Simulation Web WorkermathHello SharedArrayBufferPrettier Observable BookmarkletD3 ProjectionsFullwidth Observable BookmarkletInvalidationHello iocaneSignatureHello JSON-editorWorkerd3.csv code snippetFormat Comma-Separated TreeLayers PerspectiveMy NotebooksCool Observable NotebooksCool Notebooks Circle
Drag to re-arrange
drag = {
return function(g, svg) {
var x, y, free;
g.each((d, i) => {
d.slot = i;
}).attr("x", d => d.slot * w);
function dragstarted(event, d) {
const me = d3
.select(this)
.raise()
.classed("active", true),
m = d3.pointer(event);
x = +me.attr("x") - event.x;
y = +me.attr("y") - event.y;
free = d.slot;
}
function dragged(event, d, i) {
const xx = Math.max(0, x + event.x),
yy = 0; //Math.max(0, y + event.y);
d3.select(this)
.attr("x", (d.x = xx))
.attr("y", (d.y = yy));
let p = Math.round(xx / w);
svg.value = g.data().map(d => d.slot);
svg.dispatchEvent(new CustomEvent("input"));
if (p === d.slot) return;
g.each(function(e) {
if (e !== d && e.slot === p) {
e.slot = free;
d.slot = free = p;
d3.select(this)
.transition()
.attr("x", e.slot * w);
}
});
}
function dragended(event, d) {
d.slot = free;
d3.select(this)
.transition()
.attr("x", d.slot * w);
free = -1;
d3.select(this).classed("active", false);
}
const drag = d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
svg.value = g.data().map(d => d.slot);
svg.dispatchEvent(new CustomEvent("input"));
return drag(g);
};
}
w = (width / N) | 0
N = 10
color = d3.scaleOrdinal(d3.schemeCategory10)
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.
