D3 Cuadrados y círculos aleatorios

De vez en cuando, pongo posts raros con códigos aún más extraños. Son mis notas sobre las lecturas de la clase de Visualization Technologies. Si hubiera cumplido con mi objetivo de poner todos los apuntes de todas las clases en el blog, ya habríais leído sobre mapas, tracking, storytelling a través de las fachadas de los edificios, planos de metro, rejillas, DOMs, diseñadores visuales… Pero el día no tiene suficientes horas.

Este post es sólo para recordarme a mí misma sobre el proceso llevado a cabo para el assigment 3-A de la asignatura VISTEC que consistía, básicamente, en crear círculos y cuadrados con posiciones, tamaños y colores aleatorios. Círculos para valores menores de 0.5 y cuadrados para valores mayores de 0,5. Me imagino que para quién sabe JS esto debe ser jauja, pero a mi me costó mis buenas ocho horas enfrente del ordenador y una pregunta clave a un compañero de clase, ayudante del profesor. De hecho, estoy tan orgullosa, que os voy a poner mis resultados:

¿No son monísimos? Estoy segura de que este diseño totalmente aleatorio marcará la tendencia en patrones de tela los próximos años.

Assigment 3-A

//Set up the drawing environment here
var margin = {t:20,r:20,b:20,l:20};
var width = document.getElementById('plot').clientWidth-margin.l-margin.r,
   height = document.getElementById('plot').clientHeight-margin.t-margin.b;


//margin.t, margin.r, margin.b and margin.l are values (20px) to include margins in the body 


var plot = d3.select('.canvas')
   .append('svg')
   .attr('width',width+margin.l+margin.r)
   .attr('height',height+margin.t+margin.b)
   .append('g')
   .attr('class','plot')
   .attr('transform','translate('+margin.t+','+margin.l+')');
      //.attr('transform','translate()') --> complete this line here


//Start with 100 symbols
var numOfSymbols = 100;

//Create an array, generate objects to push into the array
//Attributes of these symbols are
// --> x position: between 0 and width
// --> y position: betewen 0 and height
// --> size: between 0 and 100x100
// --> type: circle or square
// --> color
var symbols = [];

//With the array you've created and populated, draw circles to represent these symbols

for (var i=0;i<numOfSymbols;i++) {
    var newSymbol = Math.random(); //random size
    var newPositionsXY = Math.random(); //random position
    var newColorA = Math.round(1000000*Math.random()); //random color.
// Get numbers of six digits and round to remove decimals created by Math.random
    symbols.push([newSymbol, newPositionsXY, newColorA])
}

// color --> #xxxxxx



symbols.forEach(function(trial,index){
//for each value created (100)
//index, order of appearance inside the array
//trial, value created by Math.random
//[0] is the size
//[1] is the position
//[2] is the color
    if (trial[0] < 1 / 2) {
        plot
            .append('circle')
            .attr('cx', (index / numOfSymbols) * width)
            .attr('cy',( trial[1]) * height)
            .attr('r', (trial[0] * 50))
            .style('fill', ("#"+trial[2]));
        console.log(trial[2])
    }
    else if (trial[0] > 1 / 2) {
        plot
            .append('rect')
            .attr('x', (index / numOfSymbols) * width)
            .attr('y',( trial[1]) * height)
            .attr('width', (trial[0] * 100))
            .attr('height', (trial[0] * 100))
            .style('fill', ("#"+trial[2]));
        console.log("index")
    }
});

Your earlier trials didn’t work because functions cannot know about arrays that are in a different variable outside that function. You needed to put different arrays in the same variable – symbols- (size, position and color) in order to make it work.

Anuncios

One thought on “D3 Cuadrados y círculos aleatorios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s