Published
Edited
Nov 4, 2020
Insert cell
Insert cell
collide_force = {

var width = 300
var height= 300
let nodes = [{id: 1, r:10}, {id: 2, r:30}, {id: 3, r:15}, {id: 4, r:2}]
let svg = d3.select(DOM.svg(width, height))
var layout = d3.forceSimulation(nodes)
.force('center', d3.forceCenter(300/2, 300/2))
.force('collisions', d3.forceCollide().radius(d => d.r))
.on('tick', ticked)

let node = svg.append("g")
.selectAll("circle")
.data(nodes).enter()
.append("circle")
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr("fill", "black")
.attr("opacity", 0.4)
.attr("r", d => d.r)
function ticked(){
svg.selectAll("circle")
.attr('cx', d => d.x)
.attr('cy', d => d.y)
}
return svg.node()
}
Insert cell
Insert cell
data = FileAttachment("miserables-2.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
family = d3.hierarchy({
name: "root",
children: [
{name: "child #1"},
{
name: "child #2",
children: [
{name: "grandchild #1"},
{name: "grandchild #2"},
{name: "grandchild #3"}
]
}
]
})
Insert cell
Insert cell
root = d3.hierarchy(family)
Insert cell
Insert cell
chart = {

let layout = d3.tree(d => d.tree)
.size([100,200]);//prepare your layout
layout(root)

let svg = d3.select(DOM.svg(400, 200))
let bound = svg.append("g")
.attr("transform", `translate(10,0)`)
let link = bound.insert("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 2)
.selectAll("path")
.data(root.links()) //here you have to pass the links generated by your hierarchy
.join("path")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x));
const node = bound.append("g")
.selectAll("circle")
.data(root.descendants()) //here you have to pass the descendants of your root
.enter()
.append("circle")
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 4)

return svg.node()
}
Insert cell
d3 = require("d3@6")
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