The latest articles on DEV Community by Aaron (@iaaron). https://dev.to/iaaron https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2013254%2Fc7d0ce43-2729-4583-8f58-a3fa347080b6.jpeg https://dev.to/iaaron en Aaron Mon, 02 Sep 2024 04:33:12 +0000 https://dev.to/iaaron/visualize-the-preferences-of-cats-14al https://dev.to/iaaron/visualize-the-preferences-of-cats-14al <p>Occasionally, I saw an article named <a href="https://whydocatsanddogs.com/cats" rel="noopener noreferrer">"Why do cats...?"</a>, 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 <a href="https://github.com/antvis/g6" rel="noopener noreferrer">AntV G6</a>. Therefore, I thought I could achieve a similar design through this framework, and it turned out that I did!</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3rdnxcyfoxbp1ownphr.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3rdnxcyfoxbp1ownphr.png" alt="Image description" width="800" height="800"></a></p> <p>G6 is based on a rendering engine named <a href="https://github.com/antvis/g" rel="noopener noreferrer">G</a>. It provides a plugin that can convert shapes into a hand-drawn-like style (essentially based on <a href="https://github.com/rough-stuff/rough" rel="noopener noreferrer">roughjs</a>).</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fic3iieu5h68wf1d4ni88.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fic3iieu5h68wf1d4ni88.png" alt="Image description" width="800" height="628"></a></p> <p>Moreover, I used the pack layout provided by <a href="https://github.com/d3/d3-hierarchy" rel="noopener noreferrer">d3-hierarchy</a>. Thanks to the registration mechanism of G6, it is very easy to access various third-party libraries.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs6mzpuk7eg7wxri1oz14.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs6mzpuk7eg7wxri1oz14.png" alt="Image description" width="800" height="281"></a></p> <p>The complete example can be seen at <a href="https://g6-next.antv.antgroup.com/en/examples/scene-case/default#why-do-cats" rel="noopener noreferrer">Why do cats?</a>.</p> <p>If you like it, welcome to give <a href="https://github.com/antvis/g6" rel="noopener noreferrer">my project</a> a star. It is very important to me.</p> frontend javascript graph visualization