Published
Edited
Feb 26, 2021
md`# D3 Data Joins`
{
const enterColor = "#c6db5f",//yellow green
updateColor = "#759e7e",//muted green
svgBackgroundColor = '#152c33',
radius = 12,
numRows = 15,
numCols = 15,
numNodes = numRows * numCols,
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", svgBackgroundColor),
container = svg.append("g")
.attr("transform", `translate(20,0)`),
y = d3.scaleBand()
.range([24,height])
.domain(d3.range(numRows)),
x = d3.scaleBand()
.range([0, width-12])
.domain(d3.range(numCols)),
circleNodes = d3.range(numNodes).map(function(i) {
return {
id: i,//needed for the key with .data()
radius: radius,
x: x(i%numCols),
y: y(Math.floor(i/numCols))
};
});
function update(nodes){
let t = d3.transition()
.duration(750);
let circles = container.selectAll("circle")
.data(nodes,d=>d.id);
circles
.join(
enter => enter.append("circle")
.attr("fill", enterColor),
update => update
.attr("fill", updateColor),
exit => exit
.attr("opacity", 0.4)
.call(e => e.transition(t).remove())
)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.radius)
}
yield svg.node();
update(circleNodes);
d3.interval(function() {
update(d3.shuffle(circleNodes)
.slice(0, Math.floor(Math.random() * (circleNodes.length - 10) + 10)));
}, 2500);
}
height = 400
width=400
d3 = require("d3@6")
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.
