Published
Edited
Jun 11, 2020
1 star
Insert cell
Insert cell
Insert cell
{
const $svg = svg`<svg width=${width} height=${100}></svg>`;

const data = [
...new Array(5).fill(null).map((v, i) =>
SelfControlledComponent(CircleComponent, {
cx: 30 + 42 * i,
cy: 30,
duration: 1000
})
),
{
append: "text",
x: 20,
y: 80,
text: "Click me or click/hover circles :)",
onClick: handleClick,
fill: "red",
duration: 500
}
];

function handleClick(_, current, index) {
const newDatum = data.map(d => {
if (d.append === "g") {
// ignoring the circles, as the cannot be affected by update
return d;
}
return { ...d, fill: current.fill === "red" ? "blue" : "red" };
});

render($svg, newDatum);
}

render($svg, data);
return $svg;
}
Insert cell
SelfControlledComponent = (call, defaultState) => ({
append: "g",
defaultState,
call
})
Insert cell
function CircleComponent(el) {
render(el, [
{
append: 'circle',
r: 15,
fill: "darkgray",
onClick: function(_e, datum) {
datum.fill = datum.fill === "blue" ? "red" : "blue";
renderSel(el, [datum]);
},
onMouseEnter: function(_e, datum) {
datum.r = 20;
renderSel(el, [datum]);
},
onMouseLeave: function(_e, datum) {
datum.r = 15;
renderSel(el, [datum]);
},
...this.defaultState
}
]);
}
Insert cell
Insert cell
d3render = require('d3-render')
Insert cell
render = d3render.default
Insert cell
renderSel = d3render.renderSelection
Insert cell

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.
Learn more