DEV Community

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

Posted on

🚀 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

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay