DEV Community

Cover image for Visualize the preferences of cats
Aaron
Aaron

Posted on

Visualize the preferences of cats

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!

Image description

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).

Image description

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.

Image description

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.

Top comments (1)

Collapse
 
nicolus profile image
Nicolus • Edited

The javascript framework is probably fine, but really I'm here for the cats 🤣

You sir know everything there is to know about marketing.