LabRedes

Bem vindos novamente a outro post, espero que estejam aqui para aprender mais uma vez sobre algo relacionado a visualização de dados usando nossa velha amiga D3, e bem, se você caiu de paraquedas aqui, meu caro amigo leitor, não se intimide, continue lendo e brinque com a visualização 😄.

Bem, a ideia é trazer para vocês algum dado sobre o gráfico logo abaixo, mas vou fazer diferente hoje, dessa vez, vou dar as diretivas para vocês irem buscar como fazer a de vocês mesmos 😉.

Como eu disse, para quem caiu aqui de paraquedas, aconselho estudar um pouco sobre javascript,d3,html, mas não fique triste, a internet está ai aberta para conseguirmos aprender tudo isso, então, não desistam 💪.

Assumindo que vocês camaradas, já possuem certos dominios em criação de visualizações através da ferramenta ‘D3’, irei dar-lhes um exemplo de como é representado um nó e suas arestas,

Podemos representar um nó dessa maneira:

    var node_data = ['id1', 'id2', 'id3']; 

e nossas arestas dessa maneira:

    var edge_data = [
        {source: 'id1', target:'id2', weight: 10.0},
        {source: 'id2', target:'id3', weight: 20.0}, 
        {source: 'id3', target:'id1', weight: 30.0}
    ];

Por motivos de hora, não posso explicar detalhadamente, entretanto, é aconselhavel seguir esse padrão, para irmos até o proximo passo.

Bem, um dos meus maiores desejos desde o dia em que me foi apresentado esse tipo de visualização, era a de detectar clusters ou agrupamentos de nós e separa-los por cores, afim de descobrir alguma informação através dessa visualização, mas nossos amigos que trabalham com Grafos em si, já descobriram isso para nós, e podemos usar algoritmos que realizam essas operações para conseguirmos extrair essas informações ou até mesmo aproveitar a vista, como estão fazendo os que cairam de paraquedas aqui 😁. Buscando na internet com meu professor, descobrimos que existe um script já desenvolvido para isso, chamado jLouvain, e essas formas de representação de nós e arestas estavam no git dos responsaveis a qual deixarei logo abaixo, mas vou dizer para vocês, não foi facil associar a API do Spotify com os artistas semelhantes ao Nando Reis ( escolhi por ser muito fã, e por outros motivos que supostamente vocẽs devem desconfiar 💜, sim, é amor 😌) Então deixarei aqui, apenas o link da API do Spotify.

    https://developer.spotify.com/web-api/get-related-artists/

Lá vocês encontraram detalhadamente pela própria equipe do Spotify, como usar esses dados, lembrando que essas dados são em redes, visto que temos indicações do Spotify quando estamos procurando algum artista, então, é sugerido que o sistema nos indique artistas com sons semelhante ao qual nos estamos escutando, não é verdade ? 👍

Bem, as dificuldades que senti ao formar esses clusters mesmo usando o script do jLouvain

    https://github.com/upphiminn/jLouvain

Foi em como o json recebido pela api do spotify tinha inumeras informações a mais, e tanta informação assim, as vezes, deixa você meio Lélé da cuca, então busquei por projetos no

    https://bl.ocks.org/

Aconselho a todos irem lá e desfrutarem de tantas criações legais e divertidas, que podemos usar em inumeros dados, da forma como quisermos, além de ter todo o codigo aberto para entendermos a ideia.

O fato é que nessas pesquisas, encontrei esse link:

    https://bl.ocks.org/micahstubbs/3f439df92579c5bb2902fab15742ba87

Foi aqui que minha dor de cabeça passou, mas eu primeiro tive que entender como era necessario passar o json para o nosso amigo script jLouvain, e foi ai que as ideias viram, mas para não dar rodeios e ir direto ao ponto, voces precisam atentar para as linhas do ‘vis.js’, onde se diz

    var nodeData = nodes.map(function (d) {return d.id});
    var linkData = links.map(function (d) {return {source: d.source, target: d.target,      weight: d.weight}; });

isso era oque eu precisava, usar os dados que foram carregados, e filtra-los para usar apenas os dados em que o jLouvain irá utilizar, exatamente aqui;

    var community = jLouvain()
        .nodes(nodeData)
        .edges(linkData);

    var result  = community();

Mas, não precisamos usar os dados filtrados na nossa visualização, pois lá possuem varios dados importantissimos para a leitura da mesma, como o Label, então usamos outra variavel para dessa forma, criar os circulos referentes aos nós, e os links referentes as arestas da nossa visualização, deixarei aqui a mudança que fiz para que os label fossem usados na nossa visualização e pudessemos identificar quais artistas pertences aos clusters formados, clusters esses que se afastam um dos outros, é lindo de se ver.

    circles.append("title")
        .text(function (d) { return d.label; });

Bem, sei que vocês querem ver como ficou, então aqui está:

Espero que tenham gostado, depois eu passo aqui e coloco mais alguma coisinha nova pra vocês, fiquem bem, se alimentem, e nunca esqueçam de seus cafés, Certo ???

Abs: Léo. 😌