Occasionally, I saw an article named "Why do cats...?", which analyzed some preferences and behaviors of cats. The visual design in it attracted me very much. Its feature was the use of hand-drawn style and bubble-like layout. Besides, the lovely font was also pleasing. I like cats very much. I have a cat named Guagua (meaning cute and silly). Similarly, I am a front-end developer. I developed a graph visualization framework named AntV G6. Therefore, I thought I could achieve a similar design through this framework, and it turned out that I did!

G6 is based on a rendering engine named G. It provides a plugin that can convert shapes into a hand-drawn-like style (essentially based on roughjs).

Moreover, I used the pack layout provided by d3-hierarchy. Thanks to the registration mechanism of G6, it is very easy to access various third-party libraries.

The complete example can be seen at Why do cats?.

If you like it, welcome to give my project a star. It is very important to me.