{
const svgBackgroundColor = "#000",
circleColor = "#a3f7b5",
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", svgBackgroundColor),
bigContainer = svg.append("g")
.attr("transform", `translate(${width/2},${height/2})`),
container = bigContainer.append("g"),
circlesContainer = bigContainer.append("g");
function update(concentricData,count){
const t = d3.transition()
.duration(500);
let circles = circlesContainer
.selectAll("circle")
.data(concentricData, d => d.id);
circles
.join(
enter => enter.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", d => d.radius)
.attr("stroke", (d,i) => colorScale(i))
.attr("stroke-width", 1)
.style("opacity", 1)
.attr("fill", "none"),
update => update.call(e => e.transition(t)
.attr("stroke-width", (d,i) => sineScaleLineWidth(Math.sin(count*i/concentricData.length)))
.style("opacity", (d,i) => sineScale(Math.sin(count*i/concentricData.length)))
)
)
}
update(concentricCircleData);
yield svg.node();
let count = 1;
d3.interval(() => {
update(concentricCircleData,count);
count ++
}, 500);
}
width = 400
height = 400
numCircles = 20
innerRadius = 180
outerRadius = 300;
colorScale = d3.scaleSequential()
.domain([0,numCircles-1])
.interpolator(d3.interpolateHsl("#ffd000","#f72585"))
sineScale = d3.scaleLinear()
.domain([-1,0,1])
.range([.9,.2,.9]);
sineScaleLineWidth = d3.scaleLinear()
.range([concentricScale.bandwidth(),1,concentricScale.bandwidth()])
.domain([-1,0,1])
concentricScale = d3.scaleBand()
.domain(d3.range(numCircles))
.range([0,innerRadius]);
concentricCircleData = d3.range(numCircles).map(d => {
return {
id: d,
radius: concentricScale(d)
};
})
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.
