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>`
coleccion_de_circulos = [
{eje_x:100, eje_y:120, radio:100, color:"#057c06"},
{eje_x:100, eje_y:120, radio:70, color:"#840484"},
{eje_x:100, eje_y:120, radio:30, color:"#fb0405"},
];
{
// 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") // con esto creo el canvas
.attr("width",256) // al svg le seteo el ancho y alto
.attr("height",256);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacío
.data(coleccion_de_circulos) // Estos son los datos
.enter() // Para cada entrada
.append("circle"); // Agregá un círculo
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
// para setear las propiedades cx, cy, r y fill del componente HTML circle
circulos.attr("cx", function(d) {return d.eje_x;} )
.attr("cy", function(d) {return d.eje_y;} )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) {return d.color;});
// 4. Retornamos el canvas.
return svg.node();
}
svg_circulos = {
const size = 17;
const spacing = 20;
const radius = 8;
const width = size * spacing;
const height = size * spacing;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const puntos = Array.from({ length: size }, (_, y) =>
Array.from({ length: size }, (_, x) => {
const tX = x / (size - 1);
const tY = y / (size - 1);
const r = Math.floor(255 * tX);
const g = Math.floor(255 * tY);
const b = 0;
return {
cx: x * spacing + spacing / 2,
cy: y * spacing + spacing / 2,
fill: `rgb(${r},${g},${b})`
};
})
).flat();
puntos.forEach(({ cx, cy, fill }) => {
svg.append("circle")
.attr("cx", cx)
.attr("cy", cy)
.attr("r", radius)
.attr("fill", fill);
});
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") // al canvas le agrego un texto, le puedo setear lo que quiera, un círculo, por ejemplo.
.attr("x", 50)
.attr("y", 128)
.text("Área de dibujo vacía");
// n. Retornamos el canvas.
return svg.node();
}
{
const columnas = 32;
const filas = 16;
const base = 18;
const altura = 18;
const padding = 2;
const width = columnas * (base + padding);
const height = filas * (altura + padding);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const puntos = Array.from({ length: filas }, (_, y) =>
Array.from({ length: columnas }, (_, x) => {
const cx = x * (base + padding) + base / 2;
const cy = y * (altura + padding) + altura / 2;
// Alternamos según la columna (no usando y)
const haciaArriba = x % 2 === 0;
const vertices = haciaArriba
? [
[cx, cy - altura / 2], // arriba
[cx - base / 2, cy + altura / 2],
[cx + base / 2, cy + altura / 2]
]
: [
[cx, cy + altura / 2], // abajo
[cx - base / 2, cy - altura / 2],
[cx + base / 2, cy - altura / 2]
];
const fill = haciaArriba ? "yellow" : "white";
const stroke = haciaArriba ? "blue" : "red";
return { vertices, fill, stroke };
})
).flat();
puntos.forEach(({ vertices, fill, stroke }) => {
svg.append("polygon")
.attr("points", vertices.map(p => p.join(",")).join(" "))
.attr("fill", fill)
.attr("stroke", stroke);
});
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.
