Create a Basic Org Chart

Create an interactive org chart component for my app. I want users to see a hierarchy where they can click to expand and collapse branches.

Framework: [React, Vue, vanilla JS, etc.]
Library preference: [D3.js, React Flow, GoJS, or suggest one]

Requirements:
1. Display hierarchical data as connected boxes
2. Click a node to show/hide its children
3. Visual lines connecting parent to children
4. Start with top levels expanded, deeper levels collapsed

My data looks like this:
[paste your data structure, e.g., { id, name, title, children: [] }]

Keep it simple — I want to understand the basic pattern first. Show me:
- The component code
- How to pass in my data
- How to style the nodes (basic CSS)

I'm learning, so explain each part simply.