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>`
{
// 1. Creación de un área de dibujo (256x256 pixeles).
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// Datos de los círculos con las posiciones y colores
const circleData = [
{ cx: 128, cy: 128, r: 100, color: "green" },
{ cx: 128, cy: 128, r: 75, color: "purple" },
{ cx: 128, cy: 128, r: 40, color: "red" }
];
// Usamos .data() para unir los datos del array con los círculos
svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle")
.attr("cx", function(d) { return d.cx; }) // Usar d.cx para la posición x del círculo
.attr("cy", function(d) { return d.cy; }) // Usar d.cy para la posición y del círculo
.attr("r", function(d) { return d.r; }) // Usar d.r para el radio del círculo
.style("fill", function(d) { return d.color; }); // Establecer el color
// 2. Retornamos el canvas con los círculos creados.
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 270)
.attr("height", 256);
const circleData = [];
const step= 14.8
for (let x = step; x <= 256; x += step) {
for (let y = step; y <= 256; y += step) {
circleData.push({
cx: x,
cy: y,
r: 5
});
}
}
const colorScaleX = d3.scaleLinear()
.domain([step, 256])
.range([0, 255]); // Rojo aumenta a la derecha
const colorScaleY = d3.scaleLinear()
.domain([step, 256])
.range([0, 250]); // Verde aumenta hacia abajo
svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle")
.attr("cx", d => d.cx)
.attr("cy", d => d.cy)
.attr("r", d => d.r)
.style("fill", d => {
const r = Math.round(colorScaleX(d.cx));
const g = Math.round(colorScaleY(d.cy));
const b = 0;
return `rgb(${r},${g},${b})`;
});
return svg.node();
}
{const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 270);
// Crear un array para almacenar la información de los triángulos
const hexagonData1 = [];
const hexagonData2 = [];
const strokeWidthScale = d3.scaleLinear()
.domain([0, 256]) // Mínimo y máximo de la coordenada y (ajustar según el rango de tus datos)
.range([0.5, 5]); // Mínimo y máximo grosor del borde (ajustar según el grosor deseado)
const r=20
// Definir un tamaño de paso para la cuadrícula
const stepx = 2*r; // El tamaño de cada "celda" de la cuadrícula
const stepy = Math.sqrt(3) * r; // El tamaño de cada "celda" de la cuadrícula
// Llenar el array con las posiciones de los triángulos
for (let x = stepx; x <= 256; x += stepx) {
for (let y = stepy; y <= 256; y += stepy) {
hexagonData1.push({ points: hexagon(x, 2*y, r), fillColor: "white", borderColor: "black",strokeWidth: strokeWidthScale(y) });
}
}
for (let x = stepx; x <= 256; x += stepx) {
for (let y = stepy; y <= 256; y += stepy) {
hexagonData2.push({ points: hexagon(x-stepx/2, 2*y-stepy, r), fillColor: "white", borderColor: "black" ,strokeWidth: strokeWidthScale(y)});
}
}
// Combinar ambos conjuntos de triángulos en un solo array
const allHexagonData = hexagonData1.concat(hexagonData2);
// Crear los hexagono a partir de los datos
svg.selectAll("polygon")
.data(allHexagonData)
.enter()
.append("polygon")
.attr("points", d => d.points)
.attr("fill", d => d.fillColor) // Asignar el color de relleno
.attr("stroke", d => d.borderColor) // Asignar el color del borde
.attr("stroke-width", d => d.strokeWidth); // Establecer el grosor del borde
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
const circleData = [];
for (let x = 15; x <= 256; x += 15) {
for (let y = 15; y <= 256; y += 15) {
circleData.push({
cx: x,
cy: y,
r: Math.max(6.5 - Math.sqrt((x - 128) * (x - 128) + (y - 128) * (y - 128)) / 10, 0.5) });
}
}
svg.selectAll("circle")
.data(circleData)
.enter()
.append("circle")
.attr("cx", d => d.cx)
.attr("cy", d => d.cy)
.attr("r", d => d.r)
;
return svg.node();
}
{const svg = d3.create("svg")
.attr("width", 256)
.attr("height", 256);
// Crear un array para almacenar la información de los triángulos
const triangleData1 = [];
const triangleData2 = [];
const e = 3;
// Definir un tamaño de paso para la cuadrícula
const step = 17; // El tamaño de cada "celda" de la cuadrícula
const d = step/2; // Tamaño de los triángulos
// Llenar el array con las posiciones de los triángulos
for (let x = step; x <= 256; x += step) {
for (let y = step; y <= 256; y += step) {
triangleData1.push({
points: [
[x, y - d + e], // Vértice superior
[x + e - d, y + d - e], // Vértice inferior izquierdo
[x - e + d, y + d - e] // Vértice inferior derecho
],
borderColor: "blue", // Borde negro
fillColor: "yellow" // Centro amarillo
});
}
}
// Llenar el array con las posiciones de los triángulos
for (let x = step; x <= 256; x += step) {
for (let y = step; y <= 256; y += step) {
triangleData2.push({
points: [
[x - step / 2, y + d - e], // Vértice inferior
[x + e - step / 2 - d, y - d + e], // Vértice superior izquierdo
[x - e - step / 2 + d, y - d + e] // Vértice superior derecho
],
borderColor: "red", // Borde rojo
fillColor: "white" // Centro blanco
});
}
}
// Combinar ambos conjuntos de triángulos en un solo array
const allTriangleData = triangleData1.concat(triangleData2);
// Crear los triángulos a partir de los datos combinados
svg.selectAll("polygon")
.data(allTriangleData)
.enter()
.append("polygon")
.attr("points", d => d.points.map(p => p.join(",")).join(" ")) // Convertir los puntos en una cadena
.attr("fill", d => d.fillColor) // Asignar el color de relleno (centro)
.attr("stroke", d => d.borderColor) // Asignar el color del borde
.attr("stroke-width", 1.2); // Establecer el grosor del borde
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.
