Photo by Omar Flores on Unsplash

VISUALIZATION SERIES

Visualization — Visjs(Network) ve Örnekler

Bu blog yazısında Vis.js Network kütüphanesinin ne olduğunu. Görselleştirme Amaçlı nasıl kullanılabileceği üzerine yaptığım denemelerden bahsedeceğim.

--

Network, düğümler ve kenarlardan oluşan ağları görüntülemek için kullanılan bir görselleştirmedir. VisJS özel şekilleri, stilleri, renkleri, boyutları, görüntüleri ve daha fazlasını destekler.

Network görselleştirmesi, birkaç bin düğüm(node) ve kenara(edge) ile modern tarayıcıda sorunsuz çalışır. Daha büyük miktarda düğümü işlemek için Network clustering(kümeleme) desteğine sahiptir.

Network, rendering için HTML canvas kullanır. Bu da büyük ağ gösterimlerinde performans sağlar.

1. Basic

Bu örnekte Network ağını farklı görseller üzerinden oluşturmaya çalışıyorum.

https://onurdayibasi.dev/react-vis-network-basic

2. Basic 2

Bu örnekte düğümler ve edgeleri daha basit hale getirirek render etmeye çalıştırm.

https://onurdayibasi.dev/react-vis-network-basic2

3. Clustered

https://onurdayibasi.dev/react-vis-network-basic3

4. Hierarchical (Top-Bottom)

https://onurdayibasi.dev/react-vis-network-hierarchical

5. Hierarchical (Left — Right)

https://onurdayibasi.dev/react-vis-network-horizontal

6. Selection

https://onurdayibasi.dev/react-vis-network-selection

7. Selection2

https://onurdayibasi.dev/react-vis-network-selection2

8. Neighbourhood Highlighting

https://onurdayibasi.dev/react-vis-network-neighbourhood-highlight

9. Neighbourhood Highlighting2

https://onurdayibasi.dev/react-vis-network-neighbourhood-highlight2

--

--