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? 🤯
🚀 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
Top comments (0)