chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const context = DOM.context2d(width, height);
const idContext = DOM.context2d(width, height);
const getNodeFromMouseEvent = event => {
const x = Math.floor(event.offsetX * window.devicePixelRatio);
const y = Math.floor(event.offsetY * window.devicePixelRatio);
const color = idContext.getImageData(x, y, 1, 1).data;
const index = colorToIndex(color);
const node = nodes[index];
return node;
};
// title
d3.select(context.canvas).on("mousemove", () => {
const d = getNodeFromMouseEvent(d3.event);
if (d) {
context.canvas.title = d.id;
} else {
context.canvas.title = "";
}
});
// drag
d3.select(context.canvas)
.call(
drag(simulation)
.container(context.canvas)
.subject(() => {
const d = getNodeFromMouseEvent(d3.event.sourceEvent);
return d || { x: d3.event.x, y: d3.event.y };
})
);
simulation.on("tick", () => {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
idContext.clearRect(0, 0, idContext.canvas.width, idContext.canvas.height);
links.forEach(d => {
context.beginPath();
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
context.globalAlpha = 0.6;
context.strokeStyle = "#999";
context.lineWidth = Math.sqrt(d.value);
context.stroke();
context.globalAlpha = 1;
});
nodes.forEach((d, i) => {
context.beginPath();
context.arc(d.x, d.y, 5, 0, 2*Math.PI);
context.strokeStyle = "#fff";
context.lineWidth = 1.5;
context.stroke();
context.fillStyle = color(d);
context.fill();
idContext.beginPath();
idContext.arc(d.x, d.y, 5, 0, 2*Math.PI);
idContext.fillStyle = indexToColor(i);
idContext.fill();
});
});
invalidation.then(() => simulation.stop());
// const div = DOM.element("div");
// div.appendChild(context.canvas);
// div.appendChild(idContext.canvas);
// return div;
return context.canvas;
}
indexToColor = {
return index => "#" + (index + 1).toString(16).padStart(6, "0");
}
colorToIndex = {
return color => ((color[0] << 16) + (color[1] << 8) + color[2]) - 1;
}
data = d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json")
height = 600
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
drag = simulation => {
function dragstarted() {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d3.event.subject.fx = d3.event.subject.x;
d3.event.subject.fy = d3.event.subject.y;
}
function dragged() {
d3.event.subject.fx = d3.event.x;
d3.event.subject.fy = d3.event.y;
}
function dragended() {
if (!d3.event.active) simulation.alphaTarget(0);
d3.event.subject.fx = null;
d3.event.subject.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
d3 = require("d3@5")
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.
