Department of Computer Science, Virginia Tech
// Choose a dataset. Deep copy the data so we can see what new attributes the Simulation adds.
graph = {
button; // reset the data when clicked
return JSON.parse(JSON.stringify(miserables));
return JSON.parse(JSON.stringify(flare));
}
simulation = {
let sim = d3
.forceSimulation(graph.nodes)
// insert forces here...
// Hookes law:
// Coulomb's law:
// Any other useful forces?
// Terminate the force layout when this cell re-runs.
invalidation.then(() => sim.stop());
return sim;
}
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid lightgrey");
// Map edges to lines
const links = svg
.append("g")
.attr("stroke", "lightgrey")
.attr("stroke-width", 1); //...
// Map vertices to circles
const nodes = svg.append("g").attr("fill", "steelblue"); //...
setupDrag(svg, nodes, simulation);
// Callback after every iteration of the simulation, set xy using values computed by force Simulation
function update() {
// make updates here...
}
return svg.node();
}
// Set the fx,fy values of the dragged node to fix it to the mouse position.
// Force simulation will not move nodes with fx,fy set, and will fix x=fx, y=fy.
function setupDrag(svg, nodes, simulation) {
// D3 Drag API
const drag = d3
.drag()
.on("start", dragstart)
.on("drag", dragging)
.on("end", dragend);
nodes.call(drag);
// Drag event callback functions
function dragstart(event) {
// do stuff here...
}
function dragging(event) {
// do stuff here...
}
function dragend(event) {
// do stuff here...
}
}
height = 700
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.
