Ma’lumotlar vizualizatsiyasini o‘rganishni davom ettiramiz. O‘tgan safar biz birja diagrammalarini — shamlar, hajm, OHLC ni tahlil qildik. Endi keyingi darajaga — yuzaki diagrammalarga o‘tamiz. Bu shunchaki «uch o‘lchamli rasmlar» emas. Bu ikkita mustaqil o‘lchovga (X va Y) va bitta bog‘liq o‘lchovga (Z) ega bo‘lgan ma’lumotlarni vizualizatsiya qilish vositasidir. Xaritadagi harorat, relyefning balandligi, neyron tarmoqning zichligi — bularning barchasi yuzaki ma’lumotlardir. Biz beshta asosiy variantni tahlil qilamiz: Yuzaki, Hajmli yuzaki, Rangsiz hajmli yuzaki, Konturli va Rangsiz konturli.

Misollarda ishlatilgan ma’lumotlar sintetik, ammo real ko‘rinishda: biz cho‘qqilar va vodiy bilan landshaftni taqlid qiluvchi funksiyani yaratdik, shunda siz har bir diagramma turi shaklni qabul qilishni qanday o‘zgartirishini ko‘rasiz. Bu to'qilgan nazariya emas — bu siz o‘z JavaScript loyihalaringizda ECharts GL bilan qo‘llashingiz mumkin bo‘lgan amaliyotdir.

Asosiy g‘oya: yuzaki diagramma go‘zallik haqida emas. U ma’lumotlar shakli haqida. Yuzalarni o‘qishni o‘rganganingizda, ikkita o‘zgaruvchining har qanday funksiyasini — model yo‘qotishidan server infratuzilmasi yuklamasigacha — vizualizatsiya qila olasiz.

Yuzaki diagramma nima?

Yuzaki diagramma (surface chart) — bu ikkita o‘zgaruvchining funksiyasini uch o‘lchamli yuza sifatida ko‘rsatadigan vizualizatsiya turi. Yuzadagi har bir nuqta (X, Y, Z) koordinatalariga ega, bu yerda X va Y mustaqil o‘lchovlar, Z esa biz ko‘rsatmoqchi bo‘lgan qiymatdir. Oddiy 3D grafikdan farqi - yuza nuqtalarni uzluksiz «plyonka» ga bog‘laydi, bu ma’lumotlarning umumiy shaklini ko‘rish imkonini beradi: cho‘qqilar qayerda, vodiylar qayerda, platolar qayerda.

ECharts’da buning uchun ECharts GL kengaytmasi surface seriya turi bilan ishlatiladi. Siz ma’lumotlar massivini yoki equation — har bir (X, Y) uchun Z ni hisoblaydigan funksiyani uzatishingiz mumkin. Ikkinchi usul ixchamroq va minglab nuqtalarni saqlamasdan silliq matematik yuzalarni chizish imkonini beradi.

Hajmli yuzaki va konturli diagramma o‘rtasidagi farqni tushunish muhim. Birinchisi yuzani uch o‘lchamli fazoda ko‘rsatadi — siz uning shaklini ko‘rasiz. Ikkinchisi xuddi shu yuzani tekislikka proyeksiya qiladi, bir xil Z qiymatiga ega nuqtalarni chiziqlar bilan bog‘laydi. Bu balandlik xaritasi kabi: tog‘ga yon tomondan qarash o‘rniga, yuqoridan qaraysiz va izoliniyalarni ko‘rasiz.

1. Yuzaki — bazaviy 3D landshaft

Eng oddiy variant. Biz series: [{ type: 'surface', data: [...] }] yordamida uch o‘lchamli fazoda yuza quramiz. ECharts GL avtomatik ravishda 3D to‘rni, o‘qlarni va kamera boshqaruvini yaratadi. Siz grafikni aylantirishingiz, yaqinlashtirishingiz va uzoqlashtirishingiz mumkin — bu o‘rnatilgan.

Misol uchun biz z = sin(x) * cos(y) funksiyasidan foydalanamiz — cho‘qqilar va vodiylar bilan almashinadigan klassik «to‘lqinli» yuza. U yuzaki diagramma toza ko‘rinishda qanday ko‘rinishini yaxshi namoyish etadi: rang kodlashsiz, faqat shakl va to‘r.

Yuzaki — bazaviy 3D landshaft
z = sin(x) · cos(y) funksiyasi. Siz yuzaning shaklini rang kodlashsiz ko‘rasiz. Grafikni sichqoncha bilan aylantiring.
Aylantirish: bosing va torting Masshtab: sichqoncha g‘ildiragi
Bazaviy yuza. Ma’lumotlar shaklini ko‘rsatadi, lekin qiymatlarni rang bilan ajratmaydi.

Qachon ishlatish kerak: ma’lumotlar shakli bilan birinchi tanishish uchun, aniq qiymatlar emas, balki umumiy relyefni ko‘rish muhim bo‘lganda. «Mana bizning yo‘qotish funksiyamiz» ni ko‘rsatish kerak bo‘lgan taqdimotlar uchun mos keladi.

2. Hajmli yuzaki — rang qiymat sifatida

Rang qo‘shamiz. ECharts GL’da bu visualMap orqali amalga oshiriladi: siz yuzani qaysi o‘lchov bo‘yicha bo‘yashni (odatda Z) va gradientni ko‘rsatasiz. Endi nuqtaning balandligi nafaqat fazodagi joylashuvi, balki rangi bilan ham kodlanadi — bu qiymatlarni qabul qilishni tezlashtiradi.

Bizning misolimizda biz ko‘k (past qiymatlar) dan yashil orqali qizilga (yuqori qiymatlar) gradientdan foydalanamiz. Bu ko‘pchilik ma’lumotlar uchun ishlaydigan intuitiv shkala: sovuq — past, issiq — yuqori.

Hajmli yuzaki — Z ning rang kodlashi
Xuddi shu yuza, ammo endi rang Z qiymatini ko‘rsatadi. Ko‘k — minimal, qizil — maksimal.
Past qiymatlar O‘rta Yuqori qiymatlar
Rang qabul qilishni tezlashtiradi. Siz cho‘qqilar qayerda ekanligini ko‘z bilan balandlikni baholamasdan darhol ko‘rasiz.

Qachon ishlatish kerak: deyarli har doim, yuzani odamlarga ko‘rsatganingizda. Rang — bu qo‘shimcha axborot kanali va uni e’tiborsiz qoldirish qabul qilish tezligini yo‘qotish demakdir. Yagona istisno — rang allaqachon boshqa ma’no bilan band bo‘lganda.

3. Rangsiz hajmli yuzaki — chalg‘ituvchisiz shakl

Rangni olib tashlaymiz. Faqat to‘r va bir rangli yuzani qoldiramiz. Nima uchun? Chunki rang xalaqit berishi mumkin. Masalan, agar siz yuzaga qo‘shimcha ma’lumotlarni qatlamlamoqchi bo‘lsangiz yoki auditoriya rangni bu yerda mavjud bo‘lmagan signal sifatida qabul qilsa.

ECharts GL’da bu itemStyle.color ni bitta qiymat bilan va visualMap ni o‘chirish orqali amalga oshiriladi. Yuza bir rangli bo‘ladi va barcha e’tibor geometriyaga o‘tadi: cho‘qqilarning shakli, yon bag‘irlarning tikligi, vodiylarning joylashuvi.

Rangsiz hajmli yuzaki — faqat shakl
Bir rangli yuza. Rang kodlash yo‘q — faqat geometriya va to‘r.
Rang chalg‘itganda yoki allaqachon boshqa ma’no bilan band bo‘lganda ideal.

Qachon ishlatish kerak: shaklning aniqligi «vau-effekt» dan muhimroq bo‘lgan ilmiy taqdimotlar uchun. Yoki chop etish uchun kulrang soyalarda yuza qurayotganingizda. Bu professional, vazmin variant.

4. Konturli — balandliklar xaritasi

Ikki o‘lchamli fazoga o‘tamiz. Konturli diagramma (contour chart) — bu yuzaning tekislikka proyeksiyasi, bu yerda uchinchi o‘lchov o‘rniga teng qiymatlar chiziqlari (izoliniyalar) ishlatiladi. Bu topografik xaritalarda ko‘rgan narsangiz: bir xil balandlikdagi nuqtalarni bog‘laydigan chiziqlar.

ECharts’da konturli diagrammalar uchun o‘rnatilgan seriya turi yo‘q, lekin @echarts-x/custom-contour kengaytmasi mavjud yoki o‘z chizishingiz bilan custom seriyasidan foydalanishingiz mumkin. Muqobil yondashuv — rang kodlash bilan heatmap dan foydalanish, lekin haqiqiy kontur chiziqlari professionalroq ko‘rinadi.

Bizning misolimizda biz xuddi shu z = sin(x) * cos(y) funksiyasi uchun izoliniyalarni chizadigan custom seriyasidan foydalanamiz. Natija — yopiq egri chiziqlar to‘plami, ularning har biri ma’lum bir Z qiymatiga mos keladi.

Konturli — qiymatlar izoliniyalari
Yuzaning tekislikka proyeksiyasi. Chiziqlar bir xil Z ga ega nuqtalarni bog‘laydi.
Balandliklar xaritasi kabi. Chiziqlar qanchalik zich bo‘lsa, yonbag‘ir shunchalik tik.

Qachon ishlatish kerak: absolyut balandlik emas, balki gradient muhim bo‘lgan ma’lumotlar uchun. Kontur chiziqlari qiymatlar qayerda tez, qayerda sekin o‘zgarishini ko‘rsatadi. Bu mashinaviy o‘rganishda yo‘qotish funksiyasi landshaftlarini tahlil qilish uchun kuchli vositadir.

5. Rangsiz konturli — toza tuzilma

Rangni konturli diagrammadan ham olib tashlaymiz. Neytral fonda faqat chiziqlar qoladi. Bu izoliniyalar tuzilishiga e’tiborni qaratadigan minimal variant, qiymatlarga emas. Ko‘pincha akademik nashrlarda qo‘llaniladi, bu yerda rang qabul qilinmaydi yoki cheklangan.

Bizning misolimizda biz chiziqlarni yorug‘ fonda qora (yoki to‘q kulrang) qilamiz — ilmiy vizualizatsiyaning klassik uslubi. Siz toza topologiyani ko‘rasiz: qancha cho‘qqi, qancha vodiy, ular qanday bog‘langan.

Rangsiz konturli — faqat tuzilma
Bir rangli izoliniyalar. Rang kodlash yo‘q — faqat yuzaning topologiyasi.
Akademik uslub. Chalg‘ituvchisiz tuzilma.

Qachon ishlatish kerak: rang cheklangan nashrlar uchun. Funksiya topologiyasini tez tahlil qilish uchun. «Mana bu yerda chuqurliklar, mana bu yerda tepaliklar» ni aniq qiymatlarga kirmasdan ko‘rsatmoqchi bo‘lgan holatlar uchun.

Bu tahlildan nima o‘rgandim

  • Yuzaki diagramma shakl haqida. Ikkita kirish, bitta chiqish — va siz ma’lumotlar relyefini ko‘rasiz.
  • Rang — tezlatgich. visualMap bilan hajmli yuzaki rangsizdan tezroq o‘qiladi.
  • Rangsiz — yomon degani emas. Ba’zan monoxrom kamalakdan ko‘ra mosroq.
  • Konturli — xarita. Tog‘ga yon tomondan qarash o‘rniga, yuqoridan qarang.
  • ECharts GL 3D ni ochiq qiladi. WebGL dasturlashsiz siz aylantirish, zum va ranglarni olasiz.
  • Mobil optimallashtirish muhim. 3D grafiklar 2D dan og‘irroq. Telefonlarda nuqtalar sonini kamaytiring.
  • Tur tanlash — bu murosa. Informativlik tezlikka qarshi. Go‘zallik aniqlikka qarshi.

Xulosa: 2026 yilda yuzaki diagrammalarni o‘rganishga arziydimi?

Albatta, ha. AI dunyosida, model ko‘p o‘lchovli fazolarda ishlaganda, funksiya shaklini ko‘rish qobiliyati asosiy savodxonlikka aylanadi. Yuzaki diagrammalar — bu mavhum matematika va inson idroki o‘rtasidagi ko‘prik. Ular yo‘qotish landshaftini, qaror yuzasini, faollashuv xaritasini ko‘rish imkonini beradi.

Shaxsan men uchun bu tahlil kashfiyot bo‘ldi: ma’lum bo‘lishicha, konturli diagramma «3D ning soddalashtirilgan versiyasi» emas, balki o‘z afzalliklariga ega mustaqil vositadir. Ba’zan yuqoridan qarash yon tomondan qarashdan foydaliroq. Va hajmli va konturli yuza o‘rtasidagi tanlov — bu «shaklni ko‘rsatish» va «tuzilmani ko‘rsatish» o‘rtasidagi tanlovdir.