JavaScript ile Etkileşimli Bir Kelime Ağacı Grafiği Oluşturma

0
47

Veri görselleştirme, yalnızca içgörüleri iletmek için değil, aynı zamanda veri keşfi için de yararlıdır. Verilerdeki kalıpları tanımlamak için yaygın olarak kullanılan çok sayıda farklı grafik türü vardır. Daha az kullanılan grafik türlerinden biri de Word Tree’dir. Metinleri analiz etmede oldukça etkili, çok ilginç bir görselleştirme formudur. Ve şimdi size JavaScript kullanarak güzel etkileşimli kelime ağacı çizelgelerini nasıl hızlı bir şekilde oluşturacağınızı öğreteceğim.

Kelime ağaçları, bir dallanma düzeni ile metin verilerindeki seçili kelimelerin diğer kelimelere nasıl bağlandığını gösterir. Bu grafikler, daha sık geçen kelimelerin daha büyük gösterildiği kelime bulutlarına benzer. Ancak, kelime ağaçları, bağlam ekleyen ve kalıpları bulmaya yardımcı olan kelimeler arasındaki bağlantıyı da göstermesi bakımından farklıdırlar.

Bu derste, Fransız havacı ve yazar Antoine de Saint-Exupéry’nin çok ünlü kitabı Küçük Prens’in metninden güzel bir kelime ağacı oluşturacağım. Aşağıdaki son grafiğin bir gösterimine göz atın ve bunun ve diğer etkileşimli JS kelime ağacının nasıl kolaylıkla oluşturulabileceğini öğrenmek için okumaya devam edin.

Tam etkileşimli JS kelime ağacı grafiği veri görselleştirmesinin animasyonlu gösterimi

Temel JavaScript Kelime Ağacı Oluşturma

Etkileşimli bir JS kelime ağacı grafiği karmaşık görünebilir. Ancak, sadece dört basit adımda nasıl oluşturulacağını öğrenmek için takip edin.

Bir HTML sayfası oluşturun. Gerekli JavaScript dosyalarını ekleyin. Verileri hazırlayın. Grafik için biraz JS kodu ekleyin.

1. Bir HTML Sayfası Oluşturun

İlk adım, grafiği tutacak bir HTML sayfası oluşturmaktır. Sayfada, bir

daha sonra başvurulacak bir kimliğe sahip öğe.


JavaScript Kelime Ağacı Grafiği



Kelime ağacının tüm sayfayı kaplaması için genişlik ve yükseklik parametrelerini %100 olarak belirtin. Bu, projenizin gereksinimlerine göre ayarlanabilir.

2. Gerekli JavaScript Dosyalarını Dahil Edin

Kelime ağaçlarını oluşturmak için bir JavaScript grafik kitaplığı kullanmak uygundur. Bu tür kitaplıkları kullanmanın en iyi yanı, kullanıma hazır çizelgelerin ileri teknik beceriler olmadan hızla oluşturulabilmesidir. Bu eğitimde, kelime ağacı belgelerine dayanarak AnyChart ile çalışıyorum. Ticari olmayan kullanım için ücretsizdir, ancak yine de sadece bir örnektir. Veri görselleştirme mantığı, tüm JS grafik kitaplıkları için oldukça benzer kalır. Yani, temel olarak, bu öğrenmeyi, önceden oluşturulmuş kelime ağaçlarına sahip başkalarıyla da çizelgeler oluşturmak için kullanabilirsiniz.

AnyChart’ın CDN’sinden gerekli JS dosyalarını HTML sayfasının bölümü. Kelime ağacı grafiği için iki komut dosyası eklemem gerekiyor: çekirdek modül ve kelime ağacı modülü.


JavaScript Kelime Ağacı Grafiği



3. Verileri Hazırlayın

Antoine de Saint-Exupéry’nin ünlü Küçük Prens kitabının metnini çevrimiçi bir kütüphaneden indirdim ve buradan indirebileceğiniz veri dosyasını oluşturdum.

Veri dosyasına erişmek için jQuery’ye ihtiyacım var ve bu nedenle komut dosyasını koda dahil ediyorum.

Şimdi tüm ön adımlar tamamlandığına göre, asıl kısma geçelim. Bu kadar az JavaScript kodu satırıyla işlevsel, etkileşimli bir kelime ağacı grafiğinin ne kadar hızlı yapılabileceğini seveceksiniz.

4. Grafik için Bazı JS Kodları Ekleyin

Herhangi bir kod yazmadan önce yaptığım ilk şey, yalnızca sayfa hazır olduktan sonra içindeki kodu yürüten ve ardından Ajax kullanarak veri dosyasını yükleyen bir kapatma işlevi eklemek.

anychart.onDocumentReady(işlev () { $.ajax(“https://Gist.githubusercontent.com/shacheeswadia/ccbccc482b1fb691405e07772c0fbfa0/raw/fb7b5972838b4212f4551c4cc9d5fc026fc2eprince});

Ardından, JS kütüphanesinin wordtree() fonksiyonunu kullanarak grafiği oluşturuyorum.

var chart = anychart.wordtree(metin);

Bir kelime ağacında önemli bir kısım, metindeki çeşitli cümlelere ayrılan kök kelimeleri tanımlamaktır. Burada, kökün başlangıcı olarak ‘The’ tanımlıyorum ve kökün sonu olarak ‘prens’i detaylandırıyorum, böylece birleşik kök kelimeler ‘küçük prens’ haline geliyor.

// kök kelime chart.word(“The”); // ağaçtaki bir sonraki kelimeye git chart.drillTo(“prens”);

Son olarak, sadece kapsayıcıyı ayarlamam ve grafiği çizmem gerekiyor.

// grafik için kapsayıcı kimliğini ayarla chart.container(“container”); // grafik çizmeyi başlat chart.draw();

İşte, etkileşimli kelime ağacını web sayfasında hayata geçirmek için yaptığım tek şey bu!

JS kelime ağacı grafiğinin bu ilk sürümünü aşağıdaki kodla veya CodePen’de inceleyebilirsiniz. [or on AnyChart Playground].


JavaScript Kelime Ağacı Grafiği



Bu harika görünüyor ama kelime ağacının daha parlak görünmesi için yapılabilecek çok şey var ve ben size bunu nasıl yapacağınızı göstereceğim.

JS Kelime Ağacı Grafiği Özelleştirme

JS grafik kitaplıkları, temel bir görselin çok hızlı bir şekilde hazır olması ve ardından grafiği özelleştirmek için çok sayıda seçeneğe sahip olması harikadır. Bu kelime ağacını nasıl daha güzel ve kişisel hale getirebileceğinizi göstereyim.

1. Konektörleri Biçimlendirme

Kelime ağacımızın dalları biraz ezilmiş görünüyor, bu yüzden onları ağacın daha aralıklı görünmesi için değiştirelim. Deneyeceğim ve ayrıca strok ayarlarını değiştireceğim düz hat konektörleri yapma seçeneği var.

// bağlayıcıları yapılandırın var bağlayıcılar = chart.connectors(); konektörler.uzunluk(100); konektörler.offset(10); bağlayıcılar.curveFactor(0); konektörler.stroke(“0.5 #96a6a6”);

Her şey oldukça basit ve işte bu değişikliklerle kelime ağacımız nasıl görünüyor.

Etkileşimli sürüm CodePen’de mevcuttur [and AnyChart Playground] tam kodunu da burada bulabilirsiniz.

Dürüst olmak gerekirse, kavisli konektörleri daha çok seviyorum, bu yüzden ileriye dönük olarak onları geri yüklüyorum.

2. Yazı Tipi Boyutunu ve Rengini Yapılandırma

Grafiği daha kişisel hale getirmek için yazı tipi boyutunu ve rengini değiştiriyorum. Yine, oldukça basittir ve yalnızca birkaç satır kod gerektirir.

// font chart.fontColor(“#1976d2”); // grafiğin minimum ve maksimum yazı tipi boyutunu ayarlayın chart.minFontSize(8); chart.maxFontSize(24);

3. Özel Detaya Git ve Detaya Git Düğmeleri Ekleme

Kelime ağacında varsayılan olarak detaya inip çıkmanın ne kadar harika olduğunu fark ettiniz mi? Sadece bir kelimeye tıklayarak grafik otomatik olarak o seviyeye ölçeklenir.

Dahili işlevsellik süper ama gerektiğinde, belirli bir kelimenin detayına inmek için bir düğmeyi nasıl ekleyebileceğinizi ve her seferinde bir seviyeyi detaylandırmak için bir düğmeyi nasıl ekleyebileceğinizi burada göstereceğim.

HTML’de bir kapsayıcı oluşturuyorum ve içine iki düğme ekliyorum – biri seçtiğim ‘hayal kırıklığına uğramış’ kelimesine gitmek ve diğeri detaya gitmek için. Elbette ağaçta bulunan herhangi bir kelimeyi seçebilirsiniz.


Düğmelerin stilini de ekliyorum.

Sonra, biri belirtilen kelimeye kadar detaya inen ve diğeri ağacın bir seviyesini detaya inen iki fonksiyon ekliyorum.

// bir veri öğesinin detayına inme function DrillToItem() { // veri ağacında bir öğeyi bulun ve onu bir nesne olarak alın var item = chart.data().search(“değer”, “hayal kırıklığına uğramış”); // öğenin detayına git chart.drillTo(item); } // seviye fonksiyonunun detayına inme DrillUpALevel() { chart.drillUp(); }

Bu harika nihai JavaScript kelime ağacı grafiğinin tüm koduna buradan veya CodePen’den bir göz atın. [or on AnyChart Playground].


JavaScript Kelime Ağacı Grafiği




Çözüm

Öyleyse dürüst olalım. Bunu inşa etmek gerçekten kolay ve çok havalı değil miydi?

Bu görselleştirmeyi öğrenmeye ve oynamaya devam etmek istiyorsanız, kelime ağacı belgelerine bakın ve bu örneklerden biraz ilham alın. Veya başka bir JS grafik kitaplığı seçin ve aynı tekniğe dayalı olarak onunla devam etmeye çalışın.

Küçük Prens bize derin bir bilgelik veriyor. JavaScript, etkileşimli grafikler oluşturmak için harikadır. Öyleyse, ikisini de kullanalım ve bazı çarpıcı görselleştirmeler yapalım!

Shachee Swadia’nın izniyle yayınlanmıştır. Başlangıçta Hacker Noon’da “JavaScript ile Etkileşimli Bir Kelime Ağacı Grafiği Oluşturma” başlığı altında 2 Eylül 2021’de göründü.

Chartopedia’daki kelime ağacı çizelgeleri hakkında daha fazla bilgi edinin ve blogumuzdaki diğer JavaScript çizelgeleme eğitimlerine bakın.

Harika bir misafir gönderisi fikriniz mi var? Temasta olmak!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz