D3.js it is a popular tool for Data Visualisation, I have spent a day to explore it and built a simple mind map application.
The application structure is quiet simple:
- Back-end: Web API by Flask in Python
- Front-end: D3.js
As the focus is mainly on trying the D3.js, so the web api doesn't come with any security implementation.
Key Feature of D3.js
The only key feature I learned from the day is D3.js provides a very simple way to select New Data, Modified Data and Removed Data.
- New Data is accessed by blocks.enter()
- Modified Data is accessed by blocks
- Removed Data is accessed by blocks.exit()
These three functions enable the developer to update the graph simply.
Functionality of the Mind Map app
- Add a new mind block by left click any empty spaces
- Create a link between mind blocks by dragging from one to the other.
- Move mind blocks by dragging the special area in the block.
- Auto size of the mind blocks according to the content length.
- Save the current layout and blocks by click save.
What is the Design
- Created two global arrays(Not a good practise): BlocksData for block information and LinksData(Contains Parent and Child Information) for block links information
- Few functions to implement the link the blocks and store the information into Links_Data
- Convert two global arrays to JSON and save into the database through Web API.(Not a good practise)
Check The Code
Please do check the GitHub code if you want to know the details, the repository is hao-hao-hao/D3MindMap .