html`<svg width="200" height="200">
<circle cx="100" cy="100" r="75" style="fill:green;"></circle>
<circle cx="100" cy="100" r="50" style="fill:purple;"></circle>
<circle cx="100" cy="100" r="25" 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>`
grilla_circ_conc = {
var coleccion = []; // Arreglo de datos a retornar
var cantidad_circulos = 3;
var incremento = 1;
var rad = 100;
var rad_dec = rad*0.25;
var color_ = ['green', 'purple', 'red'];
for(var r = 1; r < cantidad_circulos+incremento; r = r+incremento) {
rad = rad - rad_dec
var circle_elem = {
eje_x: 100,
eje_y: 100,
radio: rad,
color: color_[r-1],
};
coleccion.push(circle_elem);
}
return coleccion;
}
{
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",400)
.attr("height",400);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(grilla_circ_conc) // 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();
}
{
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",400)
.attr("height",400);
// 4. Retornamos el canvas
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);
// n. Retornamos el canvas.
return svg.node();
}
html`
<svg height="200" width="200">
<polygon points="50 15, 100 100, 0 100" style="fill:lime; stroke:purple; stroke-width:1" />
<polygon points="150 15, 100 100, 100 100" style="fill:lime; stroke:purple; stroke-width:1" />
</svg>
</html>`
{
// 1. Creación de un área de dibujo (512x90 pixeles)
const svg = d3.create("svg")
.attr("width",400)
.attr("height",400);
// 4. Retornamos el canvas
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);
// 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.
