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 centerX = 256 / 2;
const centerY = 256 / 2;
const circlesData = [
{ radio: centerX * 0.9, color: 'green' },
{ radio: centerX * 0.6, color: 'purple' },
{ radio: centerX * 0.3, color: 'red' },
];
const circles = svg.selectAll("circle")
.data(circlesData)
.enter()
.append("circle");
circles
.attr("cx", centerX)
.attr("cy", centerY)
.attr("r", d => d.radio)
.attr("fill", d => d.color);
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
const columnas = 20;
const filas = 15;
const espacioX = svg.attr("width") / columnas;
const espacioY = svg.attr("height") / filas;
const radio = Math.min(espacioX, espacioY) / 3;
const datosCirculos = [];
for (let fila = 0; fila < filas; fila++) {
for (let columna = 0; columna < columnas; columna++) {
datosCirculos.push({
x: columna * espacioX + espacioX / 2,
y: fila * espacioY + espacioY / 2,
fila: fila,
columna: columna
});
}
}
svg.selectAll("circle")
.data(datosCirculos)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", radio)
.attr("fill", d => d3.rgb(
(d.columna / columnas) * 255,
(d.fila / filas) * 255,
0
))
return svg.node();
}
(() => {
const width = 256;
const height = 256;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const numCols = 15;
const numRows = 15;
const spacing = width / (numCols + 1);
const centerX = (numCols - 1) / 2;
const centerY = (numRows - 1) / 2;
const maxDistance = Math.sqrt(centerX**2 + centerY**2);
const circlesData = [];
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
const dx = j - centerX;
const dy = i - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
const norm = distance / maxDistance;
const rawRadius = (i === centerY || j === centerX) ? 5.0 * Math.exp(-20 * norm * norm) : 4.0 * Math.exp(-20 * norm * norm);
const radius = Math.max(rawRadius, 0.6);
const opacity = 0.3 + 0.7 * Math.exp(-15 * norm * norm);
circlesData.push({
cx: (j + 1) * spacing,
cy: (i + 1) * spacing,
r: radius,
opacity: opacity
});
}
}
svg.selectAll("circle")
.data(circlesData)
.enter()
.append("circle")
.attr("cx", d => d.cx)
.attr("cy", d => d.cy)
.attr("r", d => d.r)
.attr("fill", "black")
.attr("fill-opacity", d => d.opacity);
return svg.node();
})();
{
const width = 256;
const height = 256;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const ladoTriangulo = 10;
const alturaTriangulo = 10;
const grosorBorde = 1;
const superposicionHorizontal = 0.25;
const espacioEfectivo = ladoTriangulo * (1 - superposicionHorizontal);
const factorEspaciadoVertical = 1.6;
const columnas = Math.floor(width / espacioEfectivo);
const filas = Math.floor(height / (alturaTriangulo * factorEspaciadoVertical));
const datosTriangulos = [];
for (let fila = 0; fila < filas; fila++) {
for (let columna = 0; columna < columnas; columna++) {
const x = columna * espacioEfectivo;
const y = fila * alturaTriangulo * factorEspaciadoVertical;
const haciaArriba = columna % 2 === 0;
datosTriangulos.push({ x, y, haciaArriba });
}
}
svg.selectAll("path")
.data(datosTriangulos)
.enter()
.append("path")
.attr("d", d => {
const inicioX = d.x;
const lado = ladoTriangulo;
if (d.haciaArriba) {
// Triángulo hacia arriba
return `M ${inicioX},${d.y + alturaTriangulo} L ${inicioX + lado / 2},${d.y} L ${inicioX + lado},${d.y + alturaTriangulo} Z`;
} else {
// Triángulo hacia abajo
return `M ${inicioX},${d.y} L ${inicioX + lado / 2},${d.y + alturaTriangulo} L ${inicioX + lado},${d.y} Z`;
}
})
.attr("fill", d => d.haciaArriba ? "yellow" : "white")
.attr("stroke", d => d.haciaArriba ? "blue" : "red")
.attr("stroke-width", grosorBorde);
return svg.node();
}
{
const width = 256;
const height = 256;
const radio = 15;
const espacioHorizontal = 30;
const espacioVertical = 28;
const filas = 7;
const columnas = 7;
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "white");
const escalaColor = d3.scaleLinear()
.domain([0, filas - 1])
.range(["lightgray", "black"]);
const escalaGrosorBorde = d3.scaleLinear()
.domain([0, filas - 1])
.range([1, 3]);
for (let fila = 0; fila < filas; fila++) {
for (let columna = 0; columna < columnas; columna++) {
let x = espacioHorizontal * columna + (fila % 2 === 1 ? espacioHorizontal / 2 : 0) + espacioHorizontal;
let y = espacioVertical * fila + radio * 1.15;
const puntos = hexagon(x, y, radio);
const colorBorde = escalaColor(fila);
const grosorBorde = escalaGrosorBorde(fila);
svg.append("polygon")
.attr("points", puntos)
.attr("fill", "none")
.attr("stroke", colorBorde)
.attr("stroke-width", grosorBorde);
}
}
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;
}
grilla_circ_conc = {
var coleccion = []; // Arreglo de datos a retornar
var cantidad_de_circulos = 6;
var rad = 100;
var cx = 100;
var cy = 100;
var color_circulo = ['green','purple','red']
for(var r = 1; r < cantidad_de_circulos+1; r = r+1) {
var circle_elem = {eje_x: cx, eje_y: cy, radio: rad, color: color_circulo[(r-1)%3]};
rad = rad - 0.25*rad;
coleccion.push(circle_elem);
}
return coleccion;
}
{
// 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);
// 2. Asociamos la colección de círculos
var circulos = svg.selectAll("circle").data(grilla_circ_conc).enter().append("circle");
// 3.
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;} )
// n. Retornamos el canvas.
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.
