DEV Community

Cover image for 🚀 Exploring the Power of Visualization: From Dependency Graphs to Molecular Structures 🧬
prakasha
prakasha

Posted on

1

🚀 Exploring the Power of Visualization: From Dependency Graphs to Molecular Structures 🧬

Over the past few weeks/months, i have been exploring import-graph-visualizer for visualizing modules and their dependencies in angular projects, which made me think and fascinated to build something similar but the same concept, like chemical compounds.

💡 Why Chemical Compounds and Not Dependencies?

When i was searching for data to render something with cytoscape and render a structure, i came across PubChem.
PubChem provides an amazing API to fetch detailed molecular data, so I thought: Why not visualize molecules first? 🤯

Rendering C17H14O4S structure

🚀 Real Vision ?

Started to imagine, software architects or Developers using augmented reality (like Apple Vision) to visually map out their system architecture, wherever they are 🌍. They could easily spot and understand dependencies in their system with a more engaging, almost gamified experience that reduces the learning curve for newer developers.

🌟 Current Implementation:

  • Interactive Molecule Visualization: Molecules and their bonds come to life, giving a clear picture of how components are connected.
  • Dynamic Data Fetching from PubChem API: Molecule data pulled in real-time.
  • Molecular Properties: Displaying key chemical properties like molecular formula, molecular weight, and IUPAC name.

🌟 Next Steps:

  • Animated Atoms: floating atoms making it more engaging and provide gamified effect.
  • Might add on later, (thinking something around 3D visualizations).

🌟 Technologies Used:

  • React for UI components
  • Cytoscape.js for graph-based molecular visualization
  • PubChem API for chemical data
  • Motion/Threejs for animations

GitHub: https://github.com/gprakasha/react-cytoscape-molecules

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay