Computer Graphics
coleccion_de_circulos = [
{"eje_x":50 , "eje_y":45, "radio":32, "color":"#ffbe0b"},
{"eje_x":150, "eje_y":45, "radio":32, "color":"#fb5607"},
{"eje_x":250, "eje_y":45, "radio":32, "color":"#ff006e"},
{"eje_x":350, "eje_y":45, "radio":32, "color":"#8338ec"},
{"eje_x":450, "eje_y":45, "radio":32, "color":"#3a86ff" }
];
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 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
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 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;})
// Escuchamos el evento "mouseover" y cambiamos la opacidad del círculo
// d3.select(this) devuelve el círculo sobre el que se produjo el evento
.on('mouseover', function (d, i) {
d3.select(this).attr('opacity', 0.5)
})
// Escuchamos el evento "mouseout" y restauramos la opacidad del círculo a 1
.on('mouseout', function (d, i) {
d3.select(this).attr('opacity', 1)
})
// 4. Retornamos el canvas
return svg.node();
}
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 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;})
// Escuchamos el evento "mouseover" y cambiamos el color del círculo
// también aumentamos un 20% el radio
.on('mouseover', function (d, i) {
d3.select(this).style('fill', "rgb(128,128,128)")
.attr("r" , function(d) {return d.radio+(0.2*d.radio);})
})
// Escuchamos el evento "mouseout" y restauramos el color y el radio originales
.on('mouseout', function (d, i) {
d3.select(this).style('fill', function(d) { return d.color;} )
.attr("r" , function(d) {return d.radio;})
})
// 4. Retornamos el canvas
return svg.node();
}
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height);
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(coleccion_de_circulos)
.enter()
.append("circle");
// 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;})
// Escuchamos el evento "click" y cambiamos el color del círculo
// también aumentamos un 20% el radio
.on('click', function (d, i) {
d3.select(this).style('fill', "rgb(128,128,128)")
.attr("r" , function(d) {return d.radio+(0.2*d.radio);})
})
// Escuchamos el evento "dblclick" y restauramos
.on('dblclick', function (d, i) {
d3.select(this).style('fill', function(d) { return d.color;} )
.attr("r" , function(d) {return d.radio;})
})
// 4. Retornamos el canvas
return svg.node();
}
// Arreglo de 100 elementos
grilla_circulos = d3.range(0, 100)
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height*3);
const spacing = 27 // Espacio entre círculos
const max_por_fila = 10 // Cantidad de circulos por fila
const radius = 10 // Radio
const margin = 15 // Márgen derecho e izquierdo
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(grilla_circulos)
.enter()
.append("circle");
// 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', (d,i) => margin + spacing * (i % max_por_fila))
.attr('cy', (d,i) => margin + Math.floor(i / max_por_fila) * spacing)
.attr('r', radius)
.style('fill', '#8338EC')
// 4. Retornamos el canvas
return svg.node();
}
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height*3);
const spacing = 27 // Espacio entre círculos
const max_por_fila = 10 // Cantidad de circulos por fila
const radius = 10 // Radio
const margin = 15 // Márgen derecho e izquierdo
const distancia_max = 3 // Para saber cuantos pintar
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(grilla_circulos)
.enter()
.append("circle");
// 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', (d,i) => margin + spacing * (i % max_por_fila))
.attr('cy', (d,i) => margin + Math.floor(i / max_por_fila) * spacing)
.attr('r', radius)
.style('fill', '#8338EC')
// Escuchamos el evento "mouseover", agregamos el parámetro arr (contiene grilla circulos)
.on('mouseover', function (d, i, arr) {
// Sabemos que está seleccionado el elemento i del dataset.
// Tenemos que encontrar los vecinos de i y pintarlos
// a. Obtenemos coordenadas en la grilla (no en píxeles)
const clickX = i % max_por_fila
const clickY = Math.floor(i / max_por_fila)
// b. Pintamos todos los vecinos a una distancia menor que n
// Utilizamos el forEach http://shorturl.at/DFKLQ
arr.forEach((ciculo,index) => {
// c. Calculo la posición
const currX = index % max_por_fila
const currY = Math.floor(index / max_por_fila)
// d. Calculo la distancia con el que hice click
const dist = Math.sqrt((clickX-currX)**2 + (clickY-currY)**2)
// e. Si es menor a n,
if(dist < distancia_max)
// f. Lo selecciono y lo pinto
d3.select(ciculo).style('fill', "#FF006E")
})
})
// Escuchamos el evento "mouseout" y restauramos el color
.on('mouseout', function (d, i, arr) {
arr.forEach((ciculo,index) => {
d3.select(ciculo).style('fill', "#8338EC" )
})
})
// 4. Retornamos el canvas
return svg.node();
}
{
// 1. Creación de un área de dibujo
const svg = d3.create("svg")
.attr("width",width)
.attr("height",height*3);
const spacing = 27 // Espacio entre círculos
const max_por_fila = 10 // Cantidad de circulos por fila
const radius = 10 // Radio
const margin = 15 // Márgen derecho e izquierdo
const distancia_max = 4 // Para saber cuantos pintar
// Escala con dominio en las distancias y rango 0->1 (para el interpolador)
const color_scale = d3.scaleLinear()
.domain([0, distancia_max])
.range([0,1])
// Interpolador Lab entre el violeta y el rojo
const interpolador = d3.interpolateLab("#FF006E","#8338EC")
// 2. Asociamos la colección de círculos a componentes gráficos "circle"
var circulos = svg.selectAll("circle")
.data(grilla_circulos)
.enter()
.append("circle");
// 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', (d,i) => margin + spacing * (i % max_por_fila))
.attr('cy', (d,i) => margin + Math.floor(i / max_por_fila) * spacing)
.attr('r', radius)
.style('fill', '#8338EC')
// Escuchamos el evento "mouseover", agregamos el parámetro arr (contiene grilla circulos)
.on('mouseover', function (d, i, arr) {
// Sabemos que está seleccionado el elemento i del dataset.
// Tenemos que encontrar los vecinos de i y pintarlos
// a. Obtenemos coordenadas en la grilla (no en píxeles)
const clickX = i % max_por_fila
const clickY = Math.floor(i / max_por_fila)
// b. Pintamos todos los vecinos a una distancia menor que n
// Utilizamos el forEach http://shorturl.at/DFKLQ
arr.forEach((ciculo,index) => {
// c. Calculo la posición
const currX = index % max_por_fila
const currY = Math.floor(index / max_por_fila)
// d. Calculo la distancia con el que hice click
const dist = Math.sqrt((clickX-currX)**2 + (clickY-currY)**2)
// e. Si es menor a n,
if(dist < distancia_max)
// f. Lo selecciono y lo pinto
d3.select(ciculo).style('fill', function(d) { return interpolador(color_scale(dist))} )
})
})
// Escuchamos el evento "mouseout" y restauramos el color
.on('mouseout', function (d, i, arr) {
arr.forEach((ciculo,index) => {
d3.select(ciculo).style('fill', "#8338EC" )
})
})
// 4. 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.
