{
const [svgNode, svg] = getSVG(width, height, margin, true);
const circleGroup = svg
.append("g")
.style('fill', "steelblue")
.style('opacity', 0.5)
.style('stroke', "black");
const drawCircles = () => {
const t = circleGroup.transition().duration(750);
circleGroup
.selectAll("circle")
.data(getRandomizedData(), d => d.id)
.join(
enter =>
enter
.append("circle")
.attr("r", rad)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.style("fill", "black"),
update => {
update.call(selection =>
selection
.transition(t)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.style("fill", d => colorScale(d.id))
);
},
exit =>
exit.style("fill", "none").call(selection =>
selection
.transition(t)
.attr("cy", height)
.remove()
)
);
};
drawCircles(getRandomizedData());
d3.select("#update_3").on("click", drawCircles);
return svgNode;
}
mutable feedback = []
width = 600
height = 300
margin = 20
rad = 10
W = width - 2 * margin
H = height - 2 * margin
chars = "abcdefghij".split("");
colorScale = d3
.scaleOrdinal()
.domain(chars)
.range(d3.schemeCategory10)
getRandomizedData = () => {
const N = Math.ceil(Math.random() * 10);
const step = W / N;
const randomChars = d3.shuffle(chars.map(d => d)); //.sort(d3.ascending);
const data = d3.range(N).map((d, i) => ({
x: (i * W) / N,
y: Math.random() * H,
id: randomChars[i]
}));
mutable feedback = data.map(d => d.id);
return data;
}
md `### External Libraries and Imports`
import {getSVG} from "@spattana/topojson-and-geovisualization"
import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/inputs"
import {columns} from "@bcardiff/observable-columns"
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.
