Published
Edited
Dec 9, 2021
4 stars
md`# Force Layout Update Pattern`
viewof i = Scrubber(['year1','year2','year3'], {loop:false, delay: 3000})
chart={
// Create some buttons:
var buttons = d3.select("#btn").selectAll("button")
.data(["year1","year2","year3"])
.enter()
.append("button")
.text(function(d) { return d; })
// Go about setting the force layout:
var svg = d3.create('svg')
.attr("width", 500)
.attr("height", 300);
var radiusScale = d3.scaleSqrt()
.domain([0, 40])
.range([5,30]);
var colorScale = d3.scaleLinear()
.domain([0,10,37])
.range(["#c7e9b4","#41b6c4","#253494"]);
function ticked() {
bubbles.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) { return d.y;})
labels.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y +5;})
}
var simulation = d3.forceSimulation()
.nodes(data)
.force("y", d3.forceY(150).strength(0.05))
.on("tick", ticked)
var bubbles = svg.selectAll("circle").data(data).join("circle")
bubbles.append("title").attr('class','title')
var labels = svg.selectAll("text")
.data(data)
.join("text")
.text(function(d) {
return d.label;
})
.style("text-anchor","middle");
invalidation.then(() => simulation.stop());
return Object.assign(svg.node(), {
update(i) {
simulation.force("x", d3.forceX(function(d) {
if (parseFloat(d[i]) >= 15) {
return 100
} else if (parseFloat(d[i]) > 5) {
return 250
} else {
return 400
}
}).strength(0.05))
simulation.force("collide", d3.forceCollide()
.radius(function(d) {
return radiusScale(d[i])
}))
bubbles.attr("r", function(d) {return radiusScale(d[i])})
.attr("fill", function(d) {return colorScale(d[i]);})
svg.selectAll('.title')
.text(d=>{return d[i]})
simulation.alpha(0.5).alphaTarget(0.3).restart();
}
})
}
chart.update(i)
d3=require("d3@5")
import {button} from "@jashkenas/inputs"
import {Scrubber} from "@mbostock/scrubber"
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.
