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();
}
grilla_circulos =
{
var coleccion = []; // Arreglo de datos a retornar
var cantidad_circulos = 17; //
var margen = 1;
var radio = 5;
for(var x = 1; x < cantidad_circulos + margen; x = x + margen) {
for (var y =1; y < cantidad_circulos + margen; y = y + margen){
var circle_elem = {
eje_x: (x * cantidad_circulos) + margen,
eje_y: (y * cantidad_circulos) + margen,
radio: radio,
color_r: Math.floor(x * 255 / (cantidad_circulos-1)),
color_g : Math.floor(y * 255 / (cantidad_circulos-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_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 d3.rgb(d.color_r, d.color_g, 0);});
// 4. Retornamos el canvas
return svg.node();
}
grilla_circulos_c = {
function distancia_centro(x,y){
const a = x - x_ini;
const b = y - y_ini;
return Math.sqrt(a**2 + b**2);
}
var coleccion = []; // Arreglo de datos a retornar
var cantidad_circulos = 18; //
var margen = 1;
var radio_ini = 5;
var x_ini = 10;
var y_ini = 10;
for(var x = 1; x < cantidad_circulos + margen; x = x + margen) {
for (var y =1; y < cantidad_circulos + margen; y = y + margen){
if (x == x_ini & y == y_ini){
var circle_elem = {
eje_x: (x * cantidad_circulos) + margen,
eje_y: (y * cantidad_circulos) + margen,
radio: radio_ini,
color: 'black'
}
} else {
var circle_elem = {
eje_x: (x * cantidad_circulos) + margen,
eje_y: (y * cantidad_circulos) + margen,
radio: radio_ini/distancia_centro(x,y),
color: 'black'
}
};
coleccion.push(circle_elem);
}
}
return coleccion;
}
{
// 1. Creación de un área de dibujo
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_circulos_c) // 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();
}
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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.