Home > Web Front-end > JS Tutorial > Visualize the preferences of cats

Visualize the preferences of cats

WBOY
Release: 2024-09-03 15:02:57
Original
550 people have browsed it

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!

Visualize the preferences of cats

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

Visualize the preferences of cats

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.

Visualize the preferences of cats

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.

The above is the detailed content of Visualize the preferences of cats. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template