CS Undergrad, IIIT Hyderabad,
India.
Published
Edited
Apr 1, 2020
1 fork
2 stars
md`# Radial Force`
d3 = require("d3@^5.9")
radial = {
var width = 960
var height = 600
var svg = d3.create("svg")
.attr("viewBox", [-480,-250,960,600]);
var nodes = [].concat(
d3.range(80).map(function() { return {type: "a"}; }),
d3.range(160).map(function() { return {type: "b"}; })
);
var node = svg.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 2.5)
.attr("fill", function(d) { return d.type === "a" ? "brown" : "steelblue"; })
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceCollide().radius(5))
.force("r", d3.forceRadial(function(d) { return d.type === "a" ? 100 : 200; }))
// .force("center", d3.forceCenter(width / 2, height / 2))
.on("tick", ticked);
function ticked() {
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
return svg.node();
}
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.
