Public
Edited
Mar 20
{
const width = 400;
const height = 200;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid #ccc");
return svg.node();
}
numbers = Array.from({length: 15}, () => ({
value: Math.floor(Math.random() * 100),
x: Math.random() * 400,
y: Math.random() * 200
}))
{
const width = 400;
const height = 200;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid #ccc");
numbers.forEach(d => {
svg.append("text")
.attr("x", d.x)
.attr("y", d.y)
.attr("fill", "black")
.attr("font-size", 14)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text(d.value);
});
return svg.node();
}
d3 = require("d3@7")
{
const width = 400;
const height = 200;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px solid #ccc");
const numbers = Array.from({length: 15}, () => ({
value: Math.floor(Math.random() * 100), // random numbers 0-99
x: Math.random() * width, // random x position
y: Math.random() * height // random y position
}));
svg.selectAll("text")
.data(numbers)
.join("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("fill", "black")
.attr("font-size", 14)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.text(d => d.value);
return svg.node();
}
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.
