DEV Community

Cover image for Visualize the preferences of cats
Aaron
Aaron

Posted on

1

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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs