md`# Colorforms`
{
const svg = DOM.svg(width, height);
const svgSelection = d3.select(svg).append('g');
let data = generateNodes();
var simulation = d3.forceSimulation()
.force("collide", d3.forceCollide(17))
.force("center", d3.forceCenter(width / 2, height / 2))
.nodes(data)
.on("tick", tick);
svgSelection.selectAll(".nodes")
.data(data, function(d,i) {
return i;
}).enter()
.append("circle")
.attr("class", "node")
.attr("r", (d,i)=> i*0.2)
.attr("fill", (d,i) => colors(i));
return svg;
}
function generateNodes() {
let nodes = [];
for (let i=0; i<size; i++){
nodes.push({})
}
return nodes;
}
colors = d3.scaleSequential().domain([0,size])
.interpolator(d3.interpolatePuRd);
function tick() {
d3.selectAll(".node")
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
}
size = 200
width = 600
height = 600
d3 = require("d3")
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.
