viewof button = Inputs.button("Reset")
mouse = {
let blah = {};
window.addEventListener("mouseover", e => { blah.x = e.layerX ; blah.y = e.layerY;} );
return blah;
}
chart = {
console.log(`yeet ${button.value}`);
window.addEventListener("mouseover", function (e) {console.log(e);});
const edges = data.edges.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));
const simulation = Object.entries(forces)
.reduce(
(simulation, [name, force]) => simulation.force(name, force),
d3.forceSimulation(nodes)
).force("link", d3.forceLink(edges).id(d => d.id).strength(1));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const edge = svg.append("g")
.attr("stroke", "#000")
.selectAll("line")
.data(edges)
.join("line")
.attr("stroke-width", d => .4);
const node = svg.append("g")
.attr("stroke", "#000")
.attr("stroke-width", .5)
.selectAll("g")
.data(nodes)
.join("g")
.call(drag(simulation));
node.append("title")
.text(d => d.id);
let rect = node.append("rect")
.attr("width", 120)
.attr("height", 48)
.attr("rx", 4)
.attr("ry", 4)
.attr("fill", "teal");
let text = node
.append("text")
.attr("width", 120)
.text(d => d.id)
.attr("font-size", 12)
.attr("stroke", "none")
.attr("fill", "white");
simulation.on("tick", () => {
edge
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("x", d => d.x)
.attr("y", d => d.y);
rect
.attr("x", d => d.x)
.attr("y", d => d.y - 20);
text
.attr("opacity", d => Math.max(mouse.x, d.x))
.attr("x", d => d.x)
.attr("y", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
forces = ({
"center": centerForce,
"collide": d3.forceCollide().radius(40),
"custom": boundingForce(width, height, .1),
});
md`A custom force`
centerForce = d3.forceCenter(x * width, y * height)
height = 600
d3 = require("d3@5")
import {parseGraphViz} from "@jimmcnulty41/graphviz-forcedirected-format"
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.
