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 width = 300;
const height = 300;
const center_x = width / 2;
const center_y = height / 2;
const radii = [100, 70, 40];
const colors = ["forestgreen", "purple", "orangered"];
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("circle")
.data(radii)
.join("circle")
.attr("cx", center_x)
.attr("cy", center_y)
.attr("r", d => d)
.attr("fill", (d, i) => colors[i]);
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 512)
.attr("height", 512);
const rows = 20;
const cols = 20;
const spacing = 22;
const radius = 8;
const colorTop = d3.scaleLinear()
.domain([0, cols - 1])
.range(["black", "red"]);
const colorBottom = d3.scaleLinear()
.domain([0, cols - 1])
.range(["green", "yellow"]);
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const t = row / (rows - 1);
const topColor = d3.color(colorTop(col));
const bottomColor = d3.color(colorBottom(col));
const r = topColor.r * (1 - t) + bottomColor.r * t;
const g = topColor.g * (1 - t) + bottomColor.g * t;
const b = topColor.b * (1 - t) + bottomColor.b * t;
svg.append("circle")
.attr("cx", col * spacing + 20)
.attr("cy", row * spacing + 20)
.attr("r", radius)
.attr("fill", `rgb(${r}, ${g}, ${b})`);
}
}
return svg.node();
}
{
// 1. Creación de un área de dibujo (256x256 pixeles).
// Si lo consideran necesario, pueden modificar el tamaño del canvas.
// También es posible que necesiten más de una celda para resolverlo.
const svg = d3.create("svg")
.attr("width",256)
.attr("height",256);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
{
const numRows = 16;
const numCols = 32;
const triangleSize = 20;
const horizontalSpacing = triangleSize * Math.sqrt(3) / 2;
const verticalSpacing = triangleSize / 3;
const width = numCols * horizontalSpacing;
const height = numRows * verticalSpacing * 3;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background", "white");
// Función para calcular vértices del triángulo (centrado en x, y)
function getTrianglePoints(x, y, size, up) {
const h = size * Math.sqrt(3) / 2;
if (up) {
return [
[x, y - h / 2], // Top
[x - size / 2, y + h / 2],
[x + size / 2, y + h / 2]
];
} else {
return [
[x, y + h / 2],
[x - size / 2, y - h / 2],
[x + size / 2, y - h / 2]
];
}
}
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
const x = col * horizontalSpacing;
const y = row * verticalSpacing * 3;
const isUp = (row + col) % 2 === 0;
const points = getTrianglePoints(x, y, triangleSize, isUp);
const strokeColor = isUp ? "blue" : "red";
const fillColor = isUp ? "yellow" : "none";
svg.append("path")
.attr("d", `M${points[0][0]},${points[0][1]} L${points[1][0]},${points[1][1]} L${points[2][0]},${points[2][1]} Z`)
.attr("fill", fillColor)
.attr("stroke", strokeColor)
.attr("stroke-width", 1.2);
}
}
return svg.node();
}
{
// 1. Creación de un área de dibujo (256x256 pixeles).
// Si lo consideran necesario, pueden modificar el tamaño del canvas.
// También es posible que necesiten más de una celda para resolverlo.
const svg = d3.create("svg")
.attr("width",256)
.attr("height",256);
// Un cuadro de texto.
svg.append("text")
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
// Función para generar hexágonos en x,y de radio r.
function hexagon(x, y, r) {
var x1 = x;
var y1 = y - r;
var x2 = x + Math.cos(Math.PI / 6) * r;
var y2 = y - Math.sin(Math.PI / 6) * r;
var x3 = x + Math.cos(Math.PI / 6) * r;
var y3 = y + Math.sin(Math.PI / 6) * r;
var x4 = x;
var y4 = y + r;
var x5 = x - Math.cos(Math.PI / 6) * r;
var y5 = y + Math.sin(Math.PI / 6) * r;
var x6 = x - Math.cos(Math.PI / 6) * r;
var y6 = y - Math.sin(Math.PI / 6) * r;
var path = x1 + ',' + y1 + " " + x2 + ',' + y2 + " " + x3 + ',' + y3 + " " + x4 + ',' + y4 + " " + x5 + ',' + y5 + " " + x6 + ',' + y6;
return path;
}
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.
