html`<svg width="100" height="100">
<circle cx="40" cy="60" r="20" style="fill:red;">
</circle>`
html`<svg width="110" height="110">
<polygon points="50,5 20,99 95,39 5,39 80,99" style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</circle>`
{
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
const rows = 20;
const cols = 20;
const spacing = 12;
const radius = 5;
const xScale = d3.scaleLinear().domain([0, cols - 1]).range([20, 236]);
const yScale = d3.scaleLinear().domain([0, rows - 1]).range([20, 236]);
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const rx = i / (cols - 1); // rojo
const gy = j / (rows - 1); // verde
const color = d3.rgb(
255 * rx, // rojo
255 * gy, // verde
0 // azul
).toString();
svg.append("circle")
.attr("cx", xScale(i))
.attr("cy", yScale(j))
.attr("r", radius)
.attr("fill", color);
}
}
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
const cols = 32; // 32 triángulos por fila
const rows = 16; // 16 filas
const dx = 8; // ancho del triángulo
const dy = 12
; // alto del triángulo
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
const x = i * dx;
const y = j * dy;
const isEvenCol = i % 2 === 0;
const p1 = isEvenCol ? [x + dx / 2, y] : [x + dx / 2, y + dy];
const p2 = isEvenCol ? [x, y + dy] : [x, y];
const p3 = isEvenCol ? [x + dx, y + dy]: [x + dx, y];
svg.append("polygon")
.attr("points", `${p1} ${p2} ${p3}`)
.attr("fill", isEvenCol ? "yellow" : "white")
.attr("stroke", isEvenCol ? "blue" : "deeppink")
.attr("stroke-width", 1.5);
}
}
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
