Biz allaqachon radardiagrammalarni o‘rganib chiqdik, endi esa ko‘pchilik e’tibordan chetda qoldiradigan turga to‘xtalamiz. Diagramma, Daraxt — yoki Treemap — bu ierarxiyani ichma-ich to‘rtburchaklar orqali ko‘rsatish usulidir. Har bir to‘rtburchakning yuzasi qiymatga proportsional, ichma-ich joylashuvi esa strukturani aks ettiradi: kategoriya ichida kategoriya, subkategoriya ichida subkategoriya. Bu darajalari bo‘lgan ma’lumotlar uchun eng samarali vositalardan biri: fayl tizimlari, loyiha byudjetlari, mintaqalar va qurilmalar bo‘yicha trafik strukturasi, mahsulot kataloglari.

IT va AI dunyosida ierarxik ma’lumotlar hamma joyda uchraydi. Server jurnallari xizmatlar bo‘yicha bo‘lingan, xizmatlar — endpointlar bo‘yicha, endpointlar — status kodlari bo‘yicha. Mashinaviy o‘qitish modellari qatlamlarga ega, qatlamlar — neyronlarga. Va agar siz butun bu strukturani bir vaqtning o‘zida, proportsiyalarni yo‘qotmasdan ko‘rishni istasangiz, Treemap — aynan sizga kerak bo‘lgan asbob. Bugun men uning qanday ishlashini, Apache ECharts’da qanday qurishni va diagramma haqiqatan ham ishlashi uchun nimaga e’tibor berishni ko‘rsataman.

Asosiy g‘oya: Treemap — bu shunchaki "chiroyli kvadratlar" emas. Bu bir vaqtning o‘zida ierarxiya va proportsiyalarni ochib beruvchi vositadir. Agar ma’lumotlaringizda darajalar bo‘lsa — IT va AI’da esa ular deyarli doim bo‘ladi — bu diagramma turi sizga na doiraviy, na ustunli diagramma bera olmaydigan imkoniyatni beradi.

Diagramma, Daraxt nima va nima uchun kerak

Tasavvur qiling, siz disk strukturasini ko‘rsatishingiz kerak: papkalar, ularning ichida boshqa papkalar, ularning ichida fayllar. Doiraviy diagramma bu vazifani bajara olmaydi — u faqat bitta darajani ko‘rsatadi. Ustunli diagramma ham uddalay olmaydi — u ichma-ichlikni qo‘llab-quvvatlamaydi. Ammo Treemap uddalaydi. Har bir to‘rtburchak — bu daraxt tuguni. Qiymat qanchalik katta bo‘lsa, yuza shunchalik katta. Ichma-ich to‘rtburchaklar bir tugun boshqasining tarkibiy qismi ekanligini ko‘rsatadi.

Apache ECharts’da Treemap series.type: 'treemap' orqali amalga oshiriladi. Ma’lumotlar daraxt strukturasi ko‘rinishida uzatiladi: har bir tugunda name, value va ixtiyoriy children massivi bo‘ladi. Bu bitta ildiz tugun yoki ildiz tugunlar massivi bo‘lishi mumkin. ECharts yuzalarni avtomatik hisoblab, to‘rtburchaklarni mavjud bo‘sh joyni iloji boricha samarali to‘ldiradigan qilib joylashtiradi.

Ma’lumotlarning asosiy strukturasi quyidagicha ko‘rinadi:

  • Ildiz tugun — masalan, "Sayt trafigi". Alohida to‘rtburchak sifatida ko‘rsatilmasligi mumkin, lekin kontekstni belgilaydi.
  • Bola tugunlar — "Cloudflare" va "Vercel". Ularning yuzalari qiymatlariga proportsional.
  • Nabiralar — Cloudflare ichida: "AQSH", "O‘zbekiston", "Niderlandiya". Vercel ichida: "Hong Kong", "San Francisco".
  • Chuqurlik — qancha darajani ko‘rsatish. Odatiy holda ECharts barchasini ko‘rsatadi, lekin buni cheklash mumkin.

Treemap’ning boshqa diagrammalar turlariga nisbatan asosiy afzalligi — zichlik. U barcha mavjud joydan bo‘sh joy qoldirmasdan foydalanadi. Bu uni har bir piksel muhim bo‘lgan dashboard’lar uchun ideal qiladi.

Treemap qurish: amaliyot

Endi — amaliyotga. Men Diagramma, Daraxt turini ushbu blog o‘quvchilari yaxshi tanish bo‘lgan ma’lumotlar asosida qurdim: devitpro.uz saytining trafigi. Ammo bu safar uni ierarxiyaga guruhladim. Ildiz — "Trafik", birinchi daraja — provayderlar (Cloudflare va Vercel), ikkinchi daraja — mamlakatlar va mintaqalar. Shunday qilib siz ichma-ichlik qanday ishlashini va ECharts yuzalarni qanday taqsimlashini ko‘rasiz.

Diagramma, Daraxt: devitpro.uz trafigining ierarxiyasi
Ildiz — "Sayt trafigi". Birinchi daraja — provayderlar. Ikkinchi daraja — mintaqalar va mamlakatlar. Har bir to‘rtburchakning yuzasi so‘rovlar soniga proportsional.
Aniq qiymat va ierarxiyadagi yo‘lni ko‘rish uchun to‘rtburchak ustiga kursor bilan bosing. Tugunni yaqinlashtirish uchun ustiga bosing.

Bu yerda nimalarga e’tibor berish muhim? Birinchidan, Cloudflare va Vercel bo‘sh joyni proportsional taqsimlaydi: 64.87k va 51.79k so‘rov. Cloudflare biroz kattaroq. Ikkinchidan, Cloudflare ichida AQSH va O‘zbekiston asosiy mamlakatlar ekanligi ko‘rinadi, ammo unchalik faol bo‘lmagan mintaqalardan iborat "dum" ham bor. Uchinchidan, Vercel ichida Hong Kong hukmronlik qiladi — 29 043 so‘rov bilan, bu butun Vercel trafigining yarmidan ko‘pini tashkil qiladi. Treemap buni bir zumda ko‘rsatadi: Hong Kong to‘rtburchagi o‘z guruhidagi qolgan barchasidan vizual kattaroq.

Agar biz doiraviy diagrammadan foydalansak, ikkita alohida diagramma qurishga majbur bo‘lardik — biri Cloudflare, ikkinchisi Vercel uchun. Treemap ularni yagona maydonda birlashtirib, ham proportsiyalarni, ham ierarxiyani saqlab qoladi.

Treemap’ni o‘qishga qulay qiladigan sozlamalar

Asosiy diagramma — bu faqat boshlanish. ECharts Treemap’ni "oddiy kvadratlar"dan tahlil vositasiga aylantiradigan ko‘plab parametrlarni taklif qiladi. Men eng ko‘p ishlatadiganlarimni keltiraman.

Yorliqlar va o‘qilishi

Agar to‘rtburchak juda kichik bo‘lsa, uning yorlig‘i sig‘maydi. ECharts sig‘maydigan yorliqlarni avtomatik yashiradi, lekin buni label.show va label.overflow orqali boshqarish mumkin. Men odatda yorliqlarni faqat yetarlicha yirik tugunlar uchun qoldiraman, qolganlari esa tooltip orqali mavjud bo‘ladi. Bu vizual shovqinni kamaytiradi.

Navigatsiya va drill-down

ECharts’dagi Treemap roam: true orqali zum va panoramalashni qo‘llab-quvvatlaydi. Bundan tashqari, agar nodeClick: 'zoomToNode' o‘rnatilsa, tugun ustiga bosish uni yaqinlashtirishi mumkin. Bu statik diagrammani interaktiv tadqiqot vositasiga aylantiradi. Foydalanuvchi qiziqarli tarmoqqa "kirib" borishi va non bo‘lakchalari (breadcrumb) orqali qaytishi mumkin.

Chuqur ierarxiyali dashboard’lar uchun bu juda muhim. Tasavvur qiling, siz jurnallarni xizmatlar bo‘yicha tahlil qilmoqdasiz. Xizmat ustiga bosganingizda uning endpointlari ko‘rinadi. Endpoint ustiga bosganingizda esa status kodlari. Drill-down bo‘lmasa, Treemap yassi rasm bo‘lib qolaveradi.

Rang va vizual kodlash

Treemap’da rang ikki narsani qilishi mumkin: kategoriyalarni farqlash yoki qo‘shimcha metrikani kodlash. ECharts’da visualDimension va visualMin/visualMax mavjud bo‘lib, ular yordamida rangni yuzadan boshqa qiymatga bog‘lash mumkin. Masalan, yuza — so‘rovlar soni, rang esa xatolar ulushi (5xx). Shunda siz nafaqat "trafik qayerda ko‘p"ligini, balki "trafik qayerda muammoli"ligini ham darhol ko‘rasiz.

Men o‘z diagrammamda rangni birinchi darajani farqlash uchun ishlatdim: Cloudflare — ko‘k, Vercel — yashil. Bu ko‘zga ikki katta guruhni tezroq ajratishga yordam beradi. Ammo agar menda "xatolar" metrikasi bo‘lsa, uni albatta rang bilan kodlagan bo‘lardim.

IT va AI’da Treemap: qayerda haqiqatan ishlaydi

Nazariya yaxshi, ammo keling, Diagramma, Daraxt turi afzallik beradigan aniq stsenariylarni ko‘rib chiqaylik.

  • Jurnallarni tahlil qilish va monitoring. Ierarxiya: xizmat → endpoint → status kod. Treemap qaysi xizmat eng ko‘p xatolarni keltirib chiqarishini va uning ichida qaysi kodlar hukmronligini ko‘rsatadi. Bu jadvallarni varaqlashdan tezroq.
  • Bulutli xarajatlar. Ierarxiya: provayder → xizmat → mintaqa. Yuza — xarajat. Pul qayerga ketayotganini va qaysi mintaqalarni optimallashtirish mumkinligini darhol ko‘rasiz.
  • ML-model strukturasi. Ierarxiya: model → qatlamlar → parametrlar. Treemap qaysi qatlamlarda eng ko‘p parametrlar borligini ko‘rsatadi — demak, asosiy hisoblash yuklamasi qayerda.
  • Fayl tizimi va saqlash. Klassik keys: papkalar → ichki papkalar → fayllar. Yuza — hajm. Joyni nima egallab turganini darhol ko‘rasiz.
  • Loyiha strukturasi. Modullar → paketlar → sinflar. Yuza — kod satrlari yoki bog‘liqliklar soni. Refaktoring uchun foydali.

Bu stsenariylarning har birida Treemap ishlaydi, chunki ma’lumotlar tabiiy ravishda ierarxik. Agar ierarxiya bo‘lmasa, boshqa diagramma turlaridan foydalaning. Ammo IT va AI’da ierarxiya — bu qoida, istisno emas.

Yodda tutish kerak bo‘lgan cheklov: Treemap tugunlar juda ko‘p yoki juda kichik bo‘lsa, yomon o‘qiladi. Chuqurlikni 3–4 darajagacha cheklashga harakat qiling va mayda kategoriyalarni "Boshqa"ga jamlang. Aks holda diagramma ajratib bo‘lmaydigan mikroskopik to‘rtburchaklar bo‘tqasiga aylanadi.

Bu tajribadan nima o‘rgandim

Treemap bilan ishlagandan so‘ng ierarxik ma’lumotlarga boshqacha qaray boshladim. Ilgari ma’lumotlarda aniq darajalar bo‘lsa ham, men avtomatik ravishda jadvallar yoki ustunli diagrammalarga murojaat qilardim. Endi esa birinchi navbatda o‘zimga savol beraman: "Bu yerda ichma-ichlik bormi?" Agar ha bo‘lsa, Treemap deyarli har doim tezroq va chuqurroq tushunish beradi.

Mana o‘zim uchun yozib olgan bir nechta xulosalar:

  • Treemap — ierarxiyalar uchun, hamma narsa uchun emas. Agar ma’lumotlar yassi bo‘lsa, bu diagramma turi faqat chalkashtiradi.
  • Drill-down — bu majburiy. Tugunga "kirib borish" imkoniyati bo‘lmasa, Treemap tadqiqot uchun o‘z qiymatining yarmini yo‘qotadi.
  • Rang nimani anglatishi kerak. Yoki kategoriyalarni farqlash, yoki metrikani kodlash. Tasodifiy ranglar — bu boy berilgan imkoniyat.
  • Chuqurlikni cheklang. 3–4 daraja — optimal. Undan chuqurroq — va diagramma mobil ekranlarda o‘qib bo‘lmaydigan holga keladi.
  • ECharts Treemap’ni qulay qiladi. Murakkab kod yozmasdan siz zum, drill-down, non bo‘lakchalari va sozlash imkoniyatlariga ega bo‘lasiz.
  • Ierarxiya — bu IT’ning tili. Xizmatlar, qatlamlar, modullar, mintaqalar — bularning barchasi daraxtlardir. Treemap shu tilda gapiradi.

Xulosa: 2026 yilda Diagramma, Daraxt turini o‘rganishga arziydimi?

Shubhasiz — ha. Tizimlarning murakkabligi eksponensial o‘sayotgan dunyoda strukturani ko‘rish qobiliyati — bu hashamat emas, balki zarurat. Treemap aynan shuni beradi: ierarxiya va proportsiyalarni bir vaqtning o‘zida ko‘rish. Siz shunchaki "nima kattaroq"ni emas, balki "nima ichida nima kattaroq"ni ham ko‘rasiz.

Muhandis, analitik yoki ma’lumot tadqiqotchisi uchun bu anomaliyalarni tezroq topish, resurslar taqsimotini tushunish va murakkab strukturalarni boshqalarga tushuntirish qobiliyatini anglatadi. AI bilan ishlayotganlar uchun Treemap yana modellarning ichki tuzilishini vizuallashtirish usulidir: qatlamlar, parametrlar, aktivatsiyalar.

Shaxsan men uchun bu tahlil vizualizatsiya shakli fikrlashga qanday ta’sir qilishini tushunish yo‘lidagi yana bir qadam bo‘ldi. Ma’lumotlar to‘g‘ri shaklda taqdim etilsa, miya samaraliroq ishlaydi. Treemap — ierarxik ma’lumotlar tabiatiga mos keladigan shakl. Va agar siz undan foydalanishni o‘rgansangiz, IT va AI’ning istalgan sohasida afzallikga ega bo‘lasiz.