svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
editableSVG(svg.node());
const n = 500;
svg
.selectAll("text")
.data(rwg(n).sort(d3.ascending))
.join("text")
.text(d => d)
.attr("text-anchor", "middle")
.attr("x", () => (width * Math.random()) | 0)
.attr("y", () => (height * Math.random()) | 0)
.call(drag);
// important! yield before calling occlusion()
yield svg.node();
occlusion(svg);
// bind the meta key listeners
d3.select(document).on("keyup.meta keydown.meta", () => {
svg.classed("meta", d3.event.altKey || d3.event.metaKey);
});
// change the priority on mouseover
svg
.selectAll("text")
.on("mouseover", (d, i, e) => {
e[i].setAttribute("data-priority", 2);
occlusion(svg);
})
.on("mouseout", (d, i, e) => {
e[i].setAttribute("data-priority", 0);
occlusion(svg);
});
}
drag = {
let dx, dy;
function dragstarted(d) {
const n = d3
.select(this)
.raise()
.attr("font-weight", "bolder")
.classed("dragging", true);
dx = d3.event.x - n.attr("x");
dy = d3.event.y - n.attr("y");
}
function dragged(d) {
d3.select(this)
.attr("x", d3.event.x - dx)
.attr("y", d3.event.y - dy);
}
function dragended(d) {
d3.select(this)
.attr("font-weight", null)
.classed("dragging", false);
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
.filter(() => d3.event.altKey || d3.event.metaKey);
}
html`<style>
svg { cursor: pointer; }
svg text { cursor: text; }
svg.meta text { cursor: grab!important; }
svg.meta text.dragging { cursor: grabbing!important; }
svg text.occluded { opacity: 0.1 }
svg text[data-priority="2"] { fill: red }
.editablesvg[contentEditable="true"]:focus {outline: none;}
.editablesvg[contentEditable="true"] svg {outline: 1px solid yellow;}
</style>`
import { occlusion } with { d3 } from "@fil/occlusion"
import { editableSVG } from "@fil/editablesvg"
d3 = require("d3@5")
height = 400
// https://www.npmjs.com/package/random-words
rwg = require("random-words@1.1.0").catch(() => window.words)
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.
