import { Renderer } from "@jwolondon/renderer"
height = 500
width = 500
r = new Renderer(width, width / 5 );
{
//create dummy data
simulation.nodes(nodes) //sets the simulation’s nodes to the specified array of objects, initializing their positions and velocities, and then re-initializes any bound forces;
.on("tick", ticked); //use simulation.on to listen for tick events as the simulation runs.
// After this, Each node must be an object. The following properties are assigned by the simulation:
// index - the node’s zero-based index into nodes
// x - the node’s current x-position
// y - the node’s current y-position
// vx - the node’s current x-velocity
// vy - the node’s current y-velocity
simulation.force("link").links(links); //sets the array of links associated with this force, recomputes the distance and strength parameters for each link, and returns this force.
// After this, Each link is an object with the following properties:
// source - the link’s source node;
// target - the link’s target node;
// index - the zero-based index into links, assigned by this method
// This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated).
function ticked() {
link
.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("cx", (d) => d.x).attr("cy", (d) => d.y);
// text
// .attr("x", (d) => d.x - 5) //position of the lower left point of the text
// .attr("y", (d) => d.y + 5); //position of the lower left point of the text
}
const r = new Renderer(width, width / 5 );
r.strokeWidth(2)
.fill("rgba(180,90,45,0.9)")
.pointSize(12)
.line([[50,50],[100,60]])
.ellipse(50,50,5,5)
.ellipse(100,60,8,8)
// // Use screen coords directly for interaction
// .addListener("click", (ev) => r.points([d3.pointer(ev)]));
return r.render();
}
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.
