Public
Edited
Mar 12, 2024
2 forks
Insert cell
Insert cell
d3 = require('d3')
Insert cell
numbers = [15, 20, 4, 5, 6, 15]
Insert cell
html`<svg width="800" height="150" id="viz"></svg>`
Insert cell
{
let rects = d3.select("#viz").selectAll("rect").data(numbers);

rects.exit().remove();

rects = rects.enter().append("rect").merge(rects);

// UPDATE
rects
.attr("x", 10)
.attr("y", function (d, i) {
return 10 + i * 10;
})
.attr("width", function (d, i) {
return d * 10;
})
.attr("height", 8)
.attr("fill", "red");
}
Insert cell
{
let rects = d3
.select('#viz2')
.selectAll('rect')
.data(numbers)
.join('rect')
.attr('x', 10)
.attr('y', function(d, i) {
return 10 + i * 10;
})
.attr('width', function(d, i) {
return d * 10;
})
.attr('height', 8)
.attr('fill', 'lightblue');
}
Insert cell
numbersObj = [
{ x: 10, y: 1 },
{ x: 7, y: 1 },
{ x: 3, y: 1 },
{ x: 9, y: 1 }
]
Insert cell
Insert cell
{
let rects = d3.select("#viz2").selectAll("rect").data(numbersObj);

rects.exit().remove();

rects = rects.enter().append("rect").merge(rects);

// UPDATE
rects
.attr("x", 10)
.attr("y", function (d, i) {
return 10 + i * 10;
})
.attr("width", function (d, i) {
return d.x * 10;
})
.attr("height", 8)
.attr("fill", "green");
}
Insert cell
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