Published
Edited
Jan 12, 2020
1 star
Insert cell
Insert cell
{
const boxHeight = 300;
const svg = d3.create('svg').attr('viewBox', [0, 0, width, boxHeight]);

const nodes = [
{ x: 50, y: 50 },
{ x: 150, y: 50 },
{ x: 170, y: 200 },
{ x: 350, y: 175 },
{ x: 500, y: 100 }
];

const circles = svg.selectAll('circle');

circles
.data(nodes)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', 20)
.attr('fill', 'green')
.on('click', changeStyle);

function changeStyle(d, i, nodes) {
if (d3.selectAll('circle[fill=green]').empty()) {
d3.selectAll('circle').attr('fill', 'green');
} else {
d3.select(nodes[i]).attr('fill', 'red');
}
}

return svg.node();
}
Insert cell
html`
<style>
circle {
cursor: pointer;
}
</style>`
Insert cell
d3 = require('d3')
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