Project Description
I'm seeking an experienced developer to create a dynamic graph visualization tool. The ideal candidate should have:
- Proficiency in graph layout algorithms (Dagre, ELK.js, force-directed layouts)
- Experience with React Flow, ELK.js, or similar libraries
- Familiarity with system dynamics diagrams and Causal Loop Diagrams (CLDs)
Key features needed:
- Auto-layout for dynamic graph adjustment
- Flow Connector for seamless relationship mapping
- Support for creating and editing Causal Loop Diagrams (CLDs)
Please include relevant work samples in your bid. Looking for a long-term relationship and I am interested in exchanging value as part of a future partnership in an exciting AI/systems dynamics/educational startup (or potentially for this current project based on mutual interest). More details will be provided if there is an expressed interest and there is a shared fit.
Auto-layout. Experience with graph layout algorithms (dagre, ELK.js, force-directed layouts) and the specific visual conventions of system dynamics diagrams. An experienced developer who has worked with React Flow, ELK.js, or similar graph visualization libraries. The layout has to produce readable diagrams on the first render — when the Builder agent creates a 30-variable model and it appears on screen, the feedback loops need to be visually recognizable as loops, not a tangle. That's a spatial reasoning problem with known algorithmic solutions. Experience here is preferred.
In the designated codebase, the LAYOUT.md file is 27KB of documentation about positioning — that's how much complexity lives in this problem. Getting it right for AI-generated models specifically (where you don't have hand-placed positions) is the novel challenge.
The CLD rendering components are the second priority. There exists a current Stock & Flow Diagram (SFD) rendering component that will aid in this build. While CLDs are structurally simpler than SFDs, the curved polarity arrows with +/− labels, the R/B loop annotations, and the visual distinction between reinforcing and balancing loops all require someone comfortable with SVG path math and React component architecture. The existing Flow.tsx is 62KB and Connector.tsx is 18KB. These files are larger because arrow routing and curve rendering are genuinely hard. The CLD arrow components need that same level of craft, and an experienced developer is required to produce cleaner, more maintainable code consistent with the current coding structure.
This is a small part of a larger build to include full system dynamics capabilities for simulations, sensitivity analysis, flight simulators, equilibrium, optimization and other features. Automation of the process is included in the overall build so the ideal candidate would be interested in this type of activity as well.