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)