Mostrando postagens com marcador Javascript. Mostrar todas as postagens
Mostrando postagens com marcador Javascript. Mostrar todas as postagens

sexta-feira, 26 de dezembro de 2025

Árvore genealógica com JavaScript e Mermaid.JS

Depois de muito pouco comprometimento com desenvolvimento, seja por obrigação, seja por diversão, eu encontrei um grupo da família e pude obter dados que remontavam aos meus bisavós. Então já que havia muita gente que não se conhecia e não sabia em que posição na família cada um se encontrava, tive a ideia de montar uma árvore genealógica. Daí fiquei buscando algumas formas de como montar uma árvore genealógica. E houve aquelas formas mais corriqueiras como utilizar algum editor de imagens ou montar retângulos com traços os ligando-os, mas que óbvio ficava bem ruim pois a edição é custosa. Então tentei uma solução em JavaScript associado uma página HTML Encontrei alguns pacotes no Github que iam nessa abortagem. A principal solução desse tipo foi o Treant-js encontrado em http://fperucic.github.io/treant-js , trabalho do Fran Peručić.
Captura de tela do site Treant.js, uma biblioteca JavaScript baseada em SVG para visualização de diagramas em árvore. No topo, há o logotipo com o nome ‘Treant.js’ e a frase ‘JavaScript library for visualization of tree diagrams’. Abaixo, um menu de navegação com opções como Quick Start, Introduction, API, Examples e Download. Na seção principal, intitulada ‘Quick Start Demos’, são exibidas miniaturas de exemplos de diagramas, incluindo organograma empresarial, árvore de resultados esportivos, estrutura colapsável, árvore de evolução e itens personalizados por cores.
Treant.JS do Fran Peručić

Então passei para o Gemini e ChatGPT para criar a estrutura básica da página HTML e desta vez o Gemini se saiu melhor que o ChatGPT apesar de o resultado final não ter sido perfeito. Das 6 versões geradas 4 no Gemini e 2 no ChatGPT, exatamente nesta sequência a versão número 2 do Gemini ficou melhor porém incompleta. E não houve meio de explicar para ele nem para o ChatGPT para basicamente incluir os recursos que estavam faltando sem alterar a estrutura já criada. Pois bem todas as vezes foram propostas soluções diferentes nunca agregando o que estava faltando. Por fim peguei a versão 2 (a melhor no meu julgamento) e finalizei o código para que as árvores criadas pudessem ser persistidas (sendo salva e/ou carregada) e assim não ter que refazer a árvore do zero todas as vezes. Na versão 2 em si, o Gemini escolheu a Cytoscape.js - uma biblioteca JavaScript aberta e bem completa de recursos para criação de grafos com possibilidade de visualização e interação, sem falar que é amplamente usada.
Captura de tela do site oficial Cytoscape.js, biblioteca JavaScript para visualização e análise de grafos e redes. No topo, aparece o logotipo Cytoscape.js e a descrição ‘Graph theory (network) library for visualisation and analysis’, acompanhados de selos informativos como versão, licença MIT, repositório GitHub e estatísticas de uso. À esquerda, há um menu de navegação vertical com seções como Introduction, Notation, Getting started e Architecture & API. Na área principal, a seção ‘Demos’ exibe miniaturas de exemplos de grafos interativos, incluindo redes gene-gene, mapa das ferrovias de Tóquio, relações entre vinhos e queijos, diagramas SBGN e exemplos de extensões
Cytoscape.js - Biblioteca JS topíssima !!!


 Apesar de a combinação de recursos ter sido boa suficiente para criar uma árvores simples, não explorei funcionalidades de melhor visualização. O código resultante do trabalho inicial do Gemini e finalização e revisão feita por mim está disponível no meu Github.
Captura de tela de uma aplicação web de genealogia. À esquerda, há um painel lateral escuro intitulado ‘Genealogia’, com formulários para cadastro de pessoas e casamentos, incluindo campos como nome completo, seleção de cônjuges e botões ‘Salvar Pessoa’ e ‘Casar’. À direita, ocupa a maior parte da tela um grande diagrama de árvore genealógica, com várias gerações representadas por caixas retangulares conectadas por linhas coloridas, indicando relações familiares e casamentos organizados hierarquicamente.
Meu formulário simples usando Cytoscape


A partir dessa segunda solução, o Gemini me sugeriu utilizar o Mermaidchart.com que é um conjunto de ferramentas (web, textos e código). Mermaid permite a criação de diagramas e sua visualização usando texto e código. É baseado em JavaScript e pode ser integrado de diferentes formas além de ter recursos de IA para otimização de código e geração de gráfico a partir de texto. Ou seja serve para criar os gráficos mais diversos e serve também para árvores genealógicas. Porém o Mermaid permite mais facilmente (não que os outros não tenham tais recursos) uma visão mais confortável e atraente. Um trabalho futuro interessante seria trabalhar  incrementos tais como a integração numa página HTML, bem como testar a descrição da genealogia em texto e deixar o Mermaid fazer o resto. Mas enfim completei a tarefa e posso dizer que pelo menos fiz um gol de honra.
Captura de tela de uma ferramenta web de edição de diagramas baseada em código. À esquerda, há um painel de código com sintaxe Mermaid, exibindo um fluxograma orientado da esquerda para a direita e definições de estilos por classes de cores. No topo, aparecem controles como ‘Auto Layout’ e ‘Manual Layout’, além de opções de exportação e compartilhamento. À direita, ocupa a maior parte da tela um grande diagrama hierárquico renderizado automaticamente, composto por dezenas de nós retangulares coloridos e conectados por linhas, representando uma estrutura complexa em forma de árvore. Há também ferramentas de navegação, zoom e edição visual distribuídas ao redor da área do diagrama.
Interface da MermaidChart para fazer qualquer gráfico

quarta-feira, 9 de agosto de 2023

Redes e as frases sinceras


Cursei uma disciplina como ouvinte no primeiro semestre de 2023. A disciplina é básica no currículo e foi importante na revisão de conceitos. Vou ser vago pois a ideia é só destacar as frases que ouvi no curso. Ressalto que as frases não são minhas. As frases eu as considero como pérolas pois são fruto de anos de trabalho e experiência sincera do professor, que não vou identificar pois a ideia é destacar as frases. As frases tem o tom jocoso mas de nenhum modo preconceituoso pois vem da visão de um profissional que de fato trabalhou aqueles temas. Mas posso dizer que para mim como ouvinte foram momentos de leveza, um escape humorístico e que, claro, ajuda na pedagogia. O post pode ficar curto pois não são muitas frases. Em algumas delas vou dar contexto, claro que não é uma tentativa de explicar a piada. Mas para não dizer que foi pouco trabalho vou produzir imagens com cada uma das frases.

Frase 1
Há profissionais que não engolem o Java, mas se dão muito bem o Javascript, que de fato não faz parte da plataforma Java. O JavaScript surgiu em 1995 e é posterior ao Java que surgiu em 1991. As linguagens são de empresas diferentes. Javascript recebeu este nome como jogada de marketing, uma tentativa de popularização. Javascript teve vários nomes antes de ter este definitivo. Foi primeiro chamado de  Mocha e depois LiveScript. Então sim, é possível mostrar todo o seu desgosto com o Java e amar o Javascript.

Frase 2
As tecnologias de frontend (ou front-end) são todos os recursos que realiza uma interação direta com o usuário que consiste principalmente na interface gráfica. Essas tecnologias tem seu valor, claro ! Porém em relação às tecnologias de backend que englobam o que podemos considerar o que é mais fundamental em redes de computadores e que está muito relacionado aos serviços, protocolos, sistemas e a fundamentação matemática, estatística, física e até filosófica. 

Frase 3
Sem comentários

Frase 4
Sim, não só os protocolos mas toda a fundamentação de conexões de rede, tem um quê de espetacular na medida em que apesar dos avanços principalmente em termos de velocidade, a base, o fundamental se manteve. Daí o seu valor. Para corroborar esse ponto de vista menciono a Association for Computing Machinery - ACM. A ACM é uma sociedade científica dedicada à Computação. ACM analisa, reconhece e laureia de diferentes formas os avanços computacionais com impactos positivos na sociedade. Assim sendo o principal prêmio da ACM é o A. M. Turing Award (Prêmio Turing) - considerado o prêmio Nobel da Computação. Em 2004 o Prêmio Turing foi concedido a Vinton Cerf e Robert Kahn pelo trabalho pioneiro em internetworking, incluindo o projeto e implementação do TCP/IP. Em 2016 foi laureado Tim Berners-Lee pela invenção da World Wide Web, o primeiro navegador web, e os protocolos e algoritmos fundamentais que permitiram a escalabilidade da web. Em 2022, Robert Metcalfe foi laureado pela invenção, padronização e comercialização da tecnologia Ethernet. Então SIM, há grande valor nesses avanços.

Frase 5
Pelas mesmas razões da frase anterior, o TCP/IP tem uma performance tão excelente que é sugerida sua utilização aos modelos de predição.

Frase 6
Pela experiência pessoal do profissional, parte dos trabalhos em Engenharia de Software tem muito de "blá", lero-lero e pouca entrega, ao contrário dos conceitos de Redes que tem que ser eficientes, performáticos caso contrário não são usados, virar padrão então fica impossível. 

Frase 7
O conceito original de heurística (procedimento mental simples que ajuda a encontrar respostas adequadas para perguntas difíceis) pode dar margem sim para seja "um chute" aleatório. Então, entre amigos numa brincadeira, cabe sim rebaixar a heurística a este patamar.

Frase 8
O Cálculo Numérico corresponde a um conjunto de ferramentas ou métodos usados para se obter à solução de problemas matemáticos de forma aproximada. Esses métodos se aplicam principalmente a problemas que não apresentam uma solução exata. Já o machine learning se propõe a fazer predições automáticas baseado em um conjunto de dados que "aproxima" as predições da realidade usando recursos, métodos, conceitos da área de Inteligência Artificial. A semelhança dos conceitos EXISTE ! E é um grande insight. Defensores de qualquer uma das áreas podem ficar chateados com este tipo de afirmação mas ela não é de modo algum totalmente desconectada da realidade.   

Frase 9
Para mim esta é uma das melhores, ela não é tão polêmica, mas é o reconhecimento da supremacia do SO Android que é versátil o suficiente para rodar nas mais diferentes arquiteturas e plataformas. Daí ele ser um candidato a equipar nossa versão cibernética.