here to learn
chart = {
const nodes = [...Array(10).keys()].map(i => {
id: i;
});
// equivalent to [...Array(10).keys()].map(i => undefined);
const height = 100;
const svg = d3.create("svg").attr("viewBox", [-width / 2, -200, width, 400]);
const nodeSelection = svg
.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 10)
.attr("fill", "sienna");
// the following line starts an infinite loop which throws a bunch of errors
const sim = d3.forceSimulation(nodes);
// the execution of this cell stops, since `sim` returns an error, however the infinite loop continues
console.log('we never reach this point!');
// invalidation.then(() => sim.stop());
sim
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.on("tick", () => {
nodeSelection.attr("cx", d => d.x).attr("cy", d => d.y);
});
return svg.node();
}
md`### Version Without Error`
// chart2 = {
// const nodes = [...Array(10).keys()].map(i => ({ id: i }));
// const height = 100;
// const svg = d3.create("svg").attr("viewBox", [-width / 2, -200, width, 400]);
// const nodeSelection = svg
// .append("g")
// .selectAll("circle")
// .data(nodes)
// .join("circle")
// .attr("r", 10)
// .attr("fill", "sienna");
// const sim = d3
// .forceSimulation(nodes)
// .force("charge", d3.forceManyBody())
// .force("center", d3.forceCenter(10, 0))
// .on("tick", () => {
// nodeSelection.attr("cx", d => d.x).attr("cy", d => d.y);
// });
// invalidation.then(() => sim.stop());
// return svg.node();
// }
// import {slider} from '@jashkenas/inputs'
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.
