Hi there, I'm Matt Sergei (do call me Matt, please) and can script your visualization using D3.js (25 years a webmaster, scripting SVG animations/visualizations for 7+ years).
Can you tell me how many nodes do you plan? With D3.js it's fast up to 50.000 nodes while for more, yes, some dynamic loading/unloading might be needed (though practically all javascript charting libraries keep data structure in web browser's memory).
The dynamic (hierarchical) tree is well-known chart implementation in D3.js and can be further scripted with keeping the current level of nodes open/closed etc. The coloring of the points might be added as an additional attribute to each node and used when displaying nodes. Same with opened/closed color (if only two would be used - maybe a color variation of the node color can distinguish its open/close state).
The best way to read the data would be a JSON structure read from your database like this:
[
{
"name": "Top Level",
"parentID": "null",
"children": [
{
"name": "Level 2: A",
"parentID": "Top Level",
"children": [
{
"name": "Son of A",
"parentID": "Level 2: A"
},
{
"name": "Daughter of A",
"parent": "Level 2: A"
}
]
}
]
}
]
e.g. parentID if not "null" can be an ID or a name of parent node (typical in D3.js).
I'm on vacation till Aug 8th though can discuss more via messages.
Best Regards,
Matt