Published
Edited
Mar 17, 2022
15 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
forceValues = {
const obj = {};
obj.center = {
function: d3.forceCenter(),
description: "Shifts the view, so the graph is centered at this location",
enabled: true,
parameters: {
x: {min: 0, max: width, step: 1, value: width / 2},
y: {min: 0, max: height, step: 1, value: height / 2},
}
};
obj.collide = {
function: d3.forceCollide(),
description: "Prevents nodes from overlapping",
enabled: true,
parameters: {
strength: {min: 0, max: 2, step: 0.1, value: 0.7},
radius: {min: 0, max: 100, step: 1, value: 5},
iterations: {min: 0, max: height, step: 1, value: height / 2},
}
};
obj.charge = {
function: d3.forceManyBody(),
description: "Attracts (+) or repels (-) nodes to/from each other",
enabled: true,
parameters: {
strength: {min: -200, max: 50, step: 0.1, value: -30},
distanceMin: {min: 0, max: 50, step: 0.1, value: 1},
distanceMax: {min: 0, max: 2000, step: 0.1, value: 2000},
}
};
obj.link = {
function: d3.forceLink(links).id(d => d.id),
description: "Sets link length",
enabled: true,
parameters: {
distance: {min: 0, max: 100, step: 1, value: 30},
iterations: {min: 1, max: 10, step: 1, value: 1},
}
};
obj.forceX = {
function: d3.forceX(),
description: "Acts like gravity. Pulls all points towards an X location",
enabled: false,
parameters: {
x: {min: 0, max: 1 * width, step: 1, value: width / 2},
strength: {min: 0, max: 1, step: .01, value: .1},
}
};
obj.forceY = {
function: d3.forceY(),
description: "Acts like gravity. Pulls all points towards a Y location",
enabled: false,
parameters: {
y: {min: 0, max: 1 * height, step: 1, value: height / 2},
strength: {min: 0, max: 1, step: .01, value: .1},
}
};
return obj;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more