Gerador de nuvem de informação com variação visual de atributo.
Lista de Atributos:
Lista de Valores:
Nuvem Gerada:
Essa é uma representação visual de uma coleção de palavras vinculadas a N valores numéricos.
Foi inspirado nas nuvens de tags encontradas em sistemas de bookmarks e CMS's.
Enquanto a nuvem de tags está limitada a representação de nomes com variação de apenas um atributo de formatação (geralmente o tamanho), esse gerador de nuvem pode aplicar variações em qualquer aspecto formatável via CSS, ou seja são dezenas de atributos representáveis graficamente.
Para criar uma nuvem você deve preencher duas caixas de texto. São elas:
Lista de Valores: Nesta caixa você adiciona uma linha para cada palavra da nuvem, precedida de valores numéricos relacionados a esta, separados por pipes "|". Numa nuvem de tags comum temos apenas um valor numérico que corresponde a ocorrência da tag, sendo assim cada linha teria o formato "<número>|<palavra>".
Lista de Atributos: Onde você define que atributos CSS serão gerados dinamicamente. cada linha contém o nome do atributo css a ser aplicado, espaço e uma expressão para definir seu valor. Cada coluna de valor numérico na lista de valores será representada por uma variável com o nome v<número>, por exemplo, o primeiro valor numérico vinculado a palavra é acessivel como v1, o segundo como v2 e assim por diante. v<número> sempre terá um valor entre 0 e 1 (inclusive), demonstrando a representatividade daquele atributo dentro do conjunto ao qual pertence. Por exemplo: se na primeira coluna temos 1, 3 e 5, teremos v1 com os valores 0, 0.5 e 1, respectivamente. O menor valor é representado como 0 e o maior é representado como 1, desta forma v1 contém a representatividade do primeiro valor de uma palavra dentro do conjunto da primeira coluna. No caso de uma nuvem de tags, onde a ocorrência de uma tag define seu tamanho e queremos uma variação de 10 até 20, adicionamos apenas a seguinte linha nessa lista: font-size { round( v1 * 10 ) + 10 }px. tudo o que estiver entre {...}chaves será interpretado como código javascript e seu conteúdo será substituido por seu valor resultante. Não use isso para programar, apenas escreva expressões aritméticas. Tendo v1 um valor entre 0 e 1, ( v1 * 10 ) nos trará um valor entre 0 e 10, porém ainda teremos ponto flutuante, para garantirmos que o valor será um número inteiro usamos a função round(...). Agora tendo um número inteiro entre 0 e 10 somado a 10, conseguimos uma variação de 10 até 20 no tamanho da fonte, de acordo com a ocorrencia da tag.
A nuvem gerada inicialmente nessa página registra dois valores numéricos para cada item da Lista de Valores. Digamos que as palavras sejam temas de artigos, a primeira coluna seja a quantidade de publicações no tema e a segunda seja o interesse do público pelo tema. Queremos que a quantidade de artigos defina o tamanho da palavra e o interesse defina a cor, quanto menor o interesse mais azul e quanto maior, mais vermelho.
Para isso definimos a seguinte Lista de Atributos:
font-size { round( v1 * 20 ) + 12 }px aqui definimos uma variação no tamanho do texto de 12 a 32, baseado no valor da primeira coluna.
top -{ 4 - round( v1 * 4 ) }px agora movemos textos menores para cima para dar um certo equilibrio.
color rgb({ round( v2 * 250 ) }, 0, { 250 - round( v2 * 250 ) }) nesta linha definimos a cor vermelha proporcionalmente ao valor da segunda coluna e a cor azul é definida de forma inversamente proporcional a mesma coluna.
