Criando MEU Próprio Obsidian Graph | SEM REACT | JAVASCRIPT + D3.js

*Aprenda a criar um gráfico estilo Obsidian usando JavaScript e D3.js!*

CURSO BASICO DE GOLANG [PUBLICO]: https://www.youtube.com/playlist?list=PL-tb3yiDrcKr-OryokjvgHWeOLNJ1quIr
CURSO COMPLETO DE GOLANG [EXCLUSIVO MEMBROS]: https://www.youtube.com/playlist?list=PL-tb3yiDrcKrG4ke9kSy_7m3lxRYATvX2

Junte-se ao clube dev pinguin, para ter acesso antecipado, videos exclusivos e mentoria exclusiva.
https://www.youtube.com/channel/UC6GTHm9ChYQBw3lxOq5zubA/join
Neste vídeo, Lucas Badico mostra como ele desenvolveu uma visualização de nós similar ao Obsidian usando D3.js, uma biblioteca poderosa para manipulação de dados em JavaScript. Ele explica desde a estrutura básica do gráfico até a implementação de interações como zoom, tooltips e filtros. O projeto faz parte de um trabalho da faculdade, mas serve como um ótimo exemplo prático para quem quer entender visualização de dados com JavaScript puro.

00:00 - Introdução e demonstração do projeto
01:14 - O que é D3.js e exemplos de uso
02:25 - Como o D3 foi aplicado no projeto
03:41 - Estrutura da função createGraph
07:11 - Transformando cadernos em nós e links
14:00 - Integração com a página e controles
17:33 - Próximos passos e conclusão

*Introdução e demonstração do projeto:* Lucas apresenta seu projeto, que replica a visualização em grafos do Obsidian usando D3.js. Ele mostra como os nós representam cadernos, tags e conteúdos, destacando a interatividade do gráfico.

*O que é D3.js e exemplos de uso:* Ele explica o que é D3.js, uma biblioteca para visualização de dados, e mostra exemplos como gráficos financeiros e scatter plots, comuns em análise de dados e machine learning.

*Como o D3 foi aplicado no projeto:* O vídeo detalha como o D3 foi usado no projeto, começando com uma versão simples que exibia notas e matérias, evoluindo para um grafo mais complexo com tags e conexões.

*Estrutura da função createGraph:* A função createGraph é explicada: ela recebe arrays de nós e links, cria um SVG, aplica forças de atração/repulsão e define interações como tooltips e zoom.

*Transformando cadernos em nós e links:* Lucas mostra como transforma cadernos, conteúdos e tags em nós e links, usando um sistema de filtros para controlar o que é exibido no gráfico.

*Integração com a página e controles:* A integração do gráfico na página é feita com JavaScript puro, carregando scripts do D3 e controles personalizados para zoom e filtros.

*Próximos passos e conclusão:* Ele planeja adicionar mais interações, como criação e edição de nós, e comemora o resultado atual, que já se aproxima da funcionalidade do Obsidian.

Edição: @l.f.porto
Thumbnail: ‪@facsant‬

#D3js #JavaScript #DataVisualization #Obsidian #FrontEnd #WebDevelopment #Programming #Coding #NoCode #GraphView #NoteTaking #TechTutorial #CodeFromScratch #DevProjects #LearnToCode #OpenSource #BuildInPublic #StudyWithMe #DeveloperCommunity #ProgrammingTips #DIYTech

Видео Criando MEU Próprio Obsidian Graph | SEM REACT | JAVASCRIPT + D3.js канала Lucas Badico