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>`
d3 = require("d3@5")
coleccion = [
{radio:120, color:"#17861D"},
{radio:80, color:"#721394"},
{radio:40, color:"#F91F1B"}];
{
// 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 a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(coleccion) // 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", 125 )
.attr("cy", 125 )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) { return d.color;});
// 4. Retornamos el canvas
return svg.node();
}
// Agregar circulos de 5 px de filas verde de 0 a 255 y columnas rojo de 0 a 255
// 17 x 17 circulos (16 pasos)
// dos fors uno para filas y otro columnas darle un incremento de color de 255/17 = 15
// coords: 5 de margen + c/ circulo 5 de radio + c/15 (entre centro y centro) el primero arranca en (10,10) y dsp c/15
colc =
{var coleccion_circulos = []
for(var i=0; i<17; i=i+1)
{for(var j=0; j<17; j=j+1){
var circulo={radio:5,
color_green:Math.floor((i*255)/16),
color_red:Math.floor((j*255)/16),
color_blue:0,
coordx:10+j*15,
coordy:10+i*15}
coleccion_circulos.push(circulo)}
}
return coleccion_circulos
}
{
// 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 a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(colc) // 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
circulos.attr("cx", function(d) {return d.coordx;} )
.attr("cy", function(d) {return d.coordy;} )
.attr("r" , function(d) {return d.radio;} )
.style("fill", function(d) { return "rgb("+ d.color_red + "," + d.color_green +",0)"});
// n. Retornamos el canvas.
return svg.node();
}
function distancia(x,y){
const a = x - 8;
const b = y - 8;
if (x == 8 & y == 8){
return 1}
else {return Math.sqrt(a*a + b*b)}
}
colc2 =
{var coleccion_circulos = []
for(var i=0; i<18; i=i+1)
{for(var j=0; j<18; j=j+1){
var circulo={radio:5/distancia(i,j),
coordx:5+j*15,
coordy:5+i*15}
coleccion_circulos.push(circulo)}
}
return coleccion_circulos
}
{
// 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 a componentes gráficos "circle"
var circulos = svg.selectAll("circle") // Esta selección da vacio
.data(colc2) // 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
circulos.attr("cx", function(d) {return d.coordx;} )
.attr("cy", function(d) {return d.coordy;} )
.attr("r" , function(d) {return d.radio;} )
.style("fill", "black");
// n. Retornamos el canvas.
return svg.node();
}
function localizacion(i,j){
var x1 = 3 + 16*j
var y1 = 16*i + 1
var x2 = 16*j - 2
var y2 = 16*i + 11
var x3 = 16*j + 8
var y3 = 16*i + 11
var points = x1.toString() + ',' + y1.toString() + ' ' + x2.toString() + ',' + y2.toString() + ' ' + x3.toString() + ',' + y3.toString()
return points
}
coltarriba =
{var coleccion_arriba = []
for(var i=0; i<16; i=i+1)
{for(var j=0; j<17; j=j+1){
var triangulo_arriba = ({points: localizacion(i,j), color: "yellow", stroke:"blue"})
// borde: "blue", fill: "yellow"};
coleccion_arriba.push(triangulo_arriba)}
}
return coleccion_arriba
}
function localizacion2(i,j){
var x1 = 6 + 16*j
var y1 = 16*i + 1
var x2 = 16*j + 16
var y2 = 16*i + 1
var x3 = 16*j + 11
var y3 = 16*i + 11
var points = x1.toString() + ',' + y1.toString() + ' ' + x2.toString() + ',' + y2.toString() + ' ' + x3.toString() + ',' + y3.toString()
return points
}
coltabajo =
{var coleccion_abajo = []
for(var i=0; i<16; i=i+1)
{for(var j=0; j<17; j=j+1){
var triangulo_abajo = ({points: localizacion2(i,j), color: "white", stroke:"red"})
coleccion_abajo.push(triangulo_abajo)}
}
return coleccion_abajo
}
colt = d3.merge([coltarriba, coltabajo])
{
// 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 a componentes gráficos "circle"
var triangulos = svg.selectAll("polygon") // Esta selección da vacio
.data(colt) // Estos son los datos
.enter() // Para cada entrada
.append("polygon"); // Agregá un círculo
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
triangulos.attr("points", function(d) {return d.points})
.style("fill", function(d) { return d.color})
.style("stroke", function(d) { return d.stroke})
.style("stroke_width", "1.5");
// n. Retornamos el canvas.
return svg.node();
}
colh =
{var coleccion_hex = []
const x0 = 16
const y0 = 16
for(var i=0; i<8; i=i+1)
{for(var j=0; j<8; j=j+1){
var yi = y0 + 31*i
var xj = x0 + 32*j + 16*((i+1) % 2)
var hexs=({points: hexagon(xj, yi, 16), borde: i/2.25})
coleccion_hex.push(hexs)}
}
return coleccion_hex
}
{
// 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);
var hexagonos = svg.selectAll("polygon") // Esta selección da vacio
.data(colh) // Estos son los datos
.enter() // Para cada entrada
.append("polygon"); // Agregá un círculo
// 3. Le decimos a d3 cómo utilizar la información disponible en el arreglo
hexagonos.attr("points", function(d) {return d.points})
.style("fill", "white")
.style("stroke", "black")
.style("stroke-width", function(d) {return d.borde});
// n. Retornamos el canvas.
return svg.node();
}
// Función para generar hexágonos en x,y de radio r.
// x,y centroide
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.