Let's focus on the client-side implementation of the editor. We want the user to be able to click on any existing mind map from the list and see the mind map's contents. The contents should update in real time, based on the changes that people are making. There should also be facilities for performing the three editing operations: adding nodes, renaming nodes, and deleting nodes.
To visualize the mind map, we will use D3, a popular JavaScript data visualization library. You don't need to be familiar with the library to be able to follow along. The most relevant thing to understand is that D3 is based on a very similar idea as jQuery. You can select certain parts of the document and then manipulate that selection by changing the attributes, adding and removing elements, and attaching event handlers.
The crucial difference between D3 and jQuery is that D3 supports data binding. This means that you can attach some JavaScript data to a selection. For example, you can attach a JavaScript...