Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

3Dmol

Capítulo 15

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

3Dmol é uma biblioteca JavaScript orientada a objetos para visualização de dados moleculares disponível em: <http://3dmol.csb.pitt.edu>. 3Dmol pode ser utilizado para visualizar arquivos no formato PDB.

Exemplo de visualização com 3Dmol da proteína beta-glicosidase 1BGA.

Comandos básicos
MovimentoEntrada do mouse
RotaçãoBotão primário do mouse.
TranslaçãoBotão do meio do mouse ou Ctrl + botão primário.
ZoomScroll ou botão secundário do mouse ou Shift + botão primário.

Requisitos básicos

Antes de iniciar o desenvolvimento de aplicações com 3Dmol é necessário declara no código a biblioteca 3Dmol. Há três versões do código-fonte:

  • 3Dmol-min.js: versão reduzida da biblioteca (já inclui a biblioteca JQuery);
  • 3Dmol.js: versão não reduzida da biblioteca;
  • 3Dmol-nojquery.js: versão sem a biblioteca JQuery embutida.

Recomenda-se que seja declarada no final da página HTML, em geral, no head ou no footer.

<script src="http://cdn.jsdelivr.net/3dmol.js/latest/3Dmol-min.js"></script>

c15_s1.html | https://goo.gl/fUH4a4

Recomenda-se que a biblioteca seja armazenada localmente. Para isso, acesse o link <http://cdn.jsdelivr.net/3dmol.js/latest/3Dmol-min.js> e salve o arquivo na pasta app/js. Declare da seguinte forma:

<script src="app/js/3Dmol-min.js"></script>

c15_s2.html | https://goo.gl/0uwysZ

Visualizando estruturas de proteínas

3Dmol

Para embutir uma visualização com 3Dmol é necessário, além da declaração da biblioteca, inserir uma div com a classe ‘viewer_3Dmoljs’ e alguns atributos a mais.

<script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
<div 
style="height: 400px; width: 400px; position: relative;" 
class='viewer_3Dmoljs' 
data-pdb='2POR' 
data-backgroundcolor='0xffffff' 
data-style='stick'
></div>

c15_s3.html | https://goo.gl/S3h8YM

O conteúdo das visualizações pode ser manipulado através das tags data-. Por exemplo:

  • data-pdb: recebe o ID de um arquivo PDB (3Dmol requisitará o arquivo PDB diretamente da Internet, ou seja, não é necessário ter o arquivo PDB);
  • data-href: recebe o endereço de um arquivo PDB (caso tenha o arquivo localmente);
  • data-element: recebe o ID de um elemento HTML na página atual em que os dados moleculares serão embutidos;
  • data-type: recebe um formato de arquivo (padrão pdb; pode ser sdf, xyz, mol2, ou cube);
  • data-backgroundcolor: define a cor do background (padrão preto);
  • data-select: recebe uma especificação de seleção AtomSpec;
  • data-style: recebe uma especificação de estilo (pode ser sticks, cartoon, sphere, line, etc.);
  • data-surface: recebe uma especificação de superfície, como por exemplo, opacidade e cor da superfície;
  • data-labelres: recebe uma especificação de estilo para rótulos de resíduos.

Gerando múltiplas visualizações

Usando um numeral após as data- tags é possível inserir múltiplas visualizações com estilos diferentes. No exemplo abaixo, veremos a cadeia A de uma proteína exibida como cartoon e a cadeia B exibida como stick:

<div 
style="height: 400px; width: 400px; position: relative;" 
class='viewer_3Dmoljs' 
data-pdb='1YCR' 
data-backgroundcolor='0xffffff'      
data-select1='chain:A' 
data-style1='cartoon:color=spectrum' 
data-surface1='opacity:.7;color:white' 
data-select2='chain:B' 
data-style2='stick'
></div>

c15_s4.html | https://goo.gl/90w27c

Desenvolvendo com 3Dmol

Podemos carregar visualizações diretamente de arquivos JavaScript e exibi-las diretamente em um elemento HTML. Primeiro vamos criar uma div com id “pdb”. A div não precisa ter qualquer informação, pois se trata de um simples espaço para que as visualizações sejam salvas.

<div id="pdb"></div>

c15_s6.html | https://goo.gl/JBdhZp

Agora vamos criar uma função que lê um arquivo PDB.

var glviewer = null;

/* Load default PDB */
document.onload = readPDB("1bga.pdb");

/* Reading PDB */
function readPDB(id){
    var txt = id;
    
    $.post(txt, function(d) {
        moldata = data = d;

        /* Cria visualizacao */
        glviewer = $3Dmol.createViewer("pdb", {
            defaultcolors : $3Dmol.rasmolElementColors
        });

        /* Define cor do fundo*/
        glviewer.setBackgroundColor(0x242830);

        receptorModel = m = glviewer.addModel(data, "pqr");

        /* Define o tipo de visualizacao*/
        glviewer.setStyle({},{cartoon:{color:'spectrum'}}); /* Cartoon multi-color */
        glviewer.addSurface($3Dmol.SurfaceType, {opacity:0.3}); /* Surface */

        /* Define os nomes do atomos*/
        atoms = m.selectedAtoms({});
        for ( var i in atoms) {
            var atom = atoms[i];
            atom.clickable = true;
            atom.callback = atomcallback;
        }

        glviewer.mapAtomProperties($3Dmol.applyPartialCharges);
        glviewer.zoomTo();
        glviewer.render();
    });
}

c15_s7.js | https://goo.gl/kzPT3E

Observe que a declaração glviewer é necessária para o correto carregamento da visualização. Declaramos ela inicialmente como nula. O script acima recebe o nome de um arquivo “.pdb” e ao carregar chama uma função chamada readPDB. Essa função, via método post, carrega o PDB. A seguir criamos a visualização, definimos a cor de fundo, definimos o tipo de visualização (no caso cartoon com esquema de cores spectrum, mas também definimos uma superfície com transparência de 30%), criamos uma função que exibe o nome dos átomos ao clicar neles, e por fim, renderizamos a visualização na div selecionada.

Ao final teremos essa figura:

No próximo capítulo, vamos abordar o uso do JavaScript e do jQuery para inserir novas funcionalidades nas visualizações de arquivos PDB em nosso projeto final.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

Capítulo 1
Introdução ao HTML

Capítulo 2
Fundamentos do HTML

Capítulo 3
Estrutura de páginas

Capítulo 4
Folhas de Estilo em Cascata (CSS)

Capítulo 5
Bootstrap

Capítulo 6
Iniciando a construção de um Website

Capítulo 7
Introdução ao PHP

Capítulo 8
Fundamentos do PHP

Capítulo 9
Transformando um Website em dinâmico

Capítulo 10
Introdução ao JavaScript

Capítulo 11
Fundamentos do JavaScript

Capítulo 12
jQuery

Capítulo 13
Bootstrap JavaScript

Capítulo 14
D3.js

Capítulo 15
3Dmol

Capítulo 16
Projeto Final

Epílogo
Referências Bibliográficas

Cite:

MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.