मेट्रिक्स विज़ुअलाइज़ेशन

1) इमेजिंग उद्देश्य

जल्दी से समझें: 3-5 सेकंड में एक ट्रेंड/विसंगति/शिफ्ट को पहचानें।

सही ढंग से तुलना करें: अवधि, खंड, वेरिएंट ए/बी।

डेटा पर विश्वास करें: अनिश्चितता, स्रोत, ताजगी दिखाएं।

अधिनियम: ग्राफ के बगल में - सीटीए, फिल्टर, प्लेबुक के लिंक।

2) मीट्रिक प्रकार और सर्वोत्तम रूप

3) तराजू, कुल्हाड़ियाँ और एकत्रीकरण

तराजू: डिफ़ॉल्ट रूप से रैखिक; लघुगणक - कई श्रेणियों के लिए; प्रतिशत - [0; 100].

शून्य आधार: बार - खरोंच से; लाइनें - शून्य की कोई आवश्यकता नहीं (लेकिन बेसलाइन दिखाएं)।

एकत्रीकरण: दिन/घंटा/मिनट, p50/p95/p99; "शोर" वितरण के लिए औसत से बचें।

रोल-अप/ड्रिल-डाउन बटन "डी/एन/एच" (दिन/सप्ताह/घंटा) और पदानुक्रम (region→strana→gorod) में "↑/↓"।

नमूना बिंदु (डाउनसैम्पलिंग): LTTB/MinMax लंबी पंक्तियों के लिए ताकि चरम सीमा को न खोया जा सके।

4) संदर्भ और तुलना

अवधि तुलना: "वर्तमान बनाम पिछला" (बिंदीदार रेखा के साथ ओवरले) और/या छोटे गुणक; सापेक्ष - और निरपेक्ष पर हस्ताक्षर क

मौसमी: सप्ताहांत/छुट्टी पृष्ठभूमि बैंड, घंटे तक गर्म/ठंडे क्षेत्र।

बेंचमार्क: क्षैतिज मानदंड/लक्ष्य लाइनें (SLO/SLA), हस्ताक्षर इकाइयाँ और समय क्षितिज।

ट्रस्ट अंतराल: स्ट्रिप्स/टेप CI; A/B - त्रुटि बार और p-value/levator के लिए।

5) अनिश्चितता, चूक, संशोधन

चूक: पंक्ति को तोड़ें (शून्य से कनेक्ट न करें); अधूरी खिड़की के लिए ग्रे "कोहरा"।

डेटा लैग्स: बैज "डेटा 12 मिनट पीछे है", टाइमस्टैम्प इनगेस्ट के साथ टूलटिप।

संशोधन: पतले हैच क्षेत्रों "पुनर्गणना", चेंजलॉग का संदर्भ।

6) रंग, आकार और उपलब्धता (A11y)

पैलेट: तटस्थ आधार; लाल - महत्वपूर्ण, नारंगी - चेतावनी, हरा - सकारात्मक।

रंग स्वतंत्रता: मूल्य/मार्कर/हस्ताक्षर के साथ डुप्लिकेट; इसके विपरीत ≥ WCAG AA।

पंक्तियों की संख्या: ≤5 प्रति ग्राफ; अन्यथा छोटे गुणकों/पहलुओं।

आकार/क्लिक: इंटरैक्टिव लक्ष्य ≥ 32-40 पीएक्स; फ़ोकस रिंग, कीबोर्ड नेविगेशन।

7) सही ढंग से हस्ताक्षर करना

कुल्हाड़ी: इकाइयाँ, संख्या प्रारूप (1,234,56; 12. 3k; 5. 2%); लोकेल के साथ डेटा लेबल।

किंवदंती: दृश्य महत्व के क्रम में; श्रृंखला को शामिल/बाहर करने के लिए क्लिक करने योग्य

एनोटेशन: संक्षेप में और मामले में ("रिलीज़," "घटना # 4217"), घटना के संदर्भ में।

8) अंतरक्रियाशीलता: ओवरलोड न करें

होवर/टूलटिप: कॉम्पैक्ट, प्रमुख क्षेत्रों और ∆ बनाम बेसलाइन के साथ।

जूम/ब्रश: माउस/कुंजीपटल चयन; बटन रीसेट करें।

ड्रिल-डाउन: खंड → विस्तृत अनुभाग पर क्लिक करें; लौटने के लिए ब्रेडक्रंब।

चयनकर्ता: रेंज के प्रीसेट (24h/7d/30d), सेगमेंट फिल्टर, "एब्स/प्रतिशत" स्विच।

9) घटक टेम्पलेट (उदाहरण एपीआई)

json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}

10) रेंडरिंग प्रदर्शन

सर्वर पर समुच्चय: पहले से ही "सही" विंडोज ़/क्वांटल लौटें।

कैनवास/वेब जीएल: दसियों हज़ार बिंदुओं और गर्मी के नक्शे के लिए; SVG - ≤2 -3 हजार तत्वों और स्पष्ट हस्ताक्षर के लिए।

सूची/तालिका वर्चुअलाइजेशन - जैसे ही आप स्क्रॉल करते हैं लोड पृष्ठ।

कैचिंग: हॉट टाइल्स, प्रीकॉम्प्यूट "कल/सप्ताह।"

11) वैधता और विरोधी पैटर्न

• पैमाने में हेरफेर करें (शून्य से ऊपर के स्तंभों की धुरी को ट्रिम करें)।
• माध्यमिक अक्ष और स्पष्ट हस्ताक्षर के बिना विभिन्न इकाइयों को
• 8-10 पंक्तियों के साथ एक ढेर-क्षेत्र "जंगल" का निर्माण करें।
• शून्य के साथ अंतराल बदलें।
• "सुंदरता" की खातिर इस्तेमाल करें।

12) सूत्र, इकाइयाँ और स्वरूपण

धन: लघु इकाइयाँ/दशमलव तार; स्पष्ट रूप से मुद्रा निर्दिष्ट करें

रूपांतरण/भिन्न: एक दशमलव के साथ प्रतिशत (यदि आवश्यक हो - पी। पी।)।

दरें/दरें: "प्रति घंटे/प्रति दिन" - अवधि पर हस्ताक्षर करें।

राउंडिंग: महत्वपूर्ण अंकों के लिए, मानों के क्रम को छिपाए बिना।

13) गुणवत्ता और एसएलओ मैट्रिक्स की विशिष्टता

त्रुटि बजट बर्न और चेतावनी स्तर दिखाएँ.

अपटाइम के लिए - स्टैक्ड स्टेटस बार "ओके/डिग्रेडेड/डाउन" + इवेंट विंडो।

विलंबता के लिए - वितरण (p50/p95/p99), समूहों/समापन बिंदुओं द्वारा "वायलिन/बॉक्सप्लॉट"।

14) स्टोरीटेलिंग और ऑटो-सैमरी

कथा ब्लॉक: 2-4 वाक्य "क्या हुआ" + "क्यों" + "क्या करना है।"

स्लाइड/निर्यात: fonts और रंगों के साथ PDF/PNG/SVG; वॉटरमार्क और कटऑफ की तारीख।

15) दृश्यों के लिए परीक्षण योजना

इकाई: अक्ष प्रारूप, बिन गणना, सीआई टेप।

एकीकरण: फ़िल्टर/रेंज/लोकेल, ड्रिल-डाउन और रिवर्स नेविगेशन।

E2E: अलर्ट-टू-एक्शन परिदृश्य: एक विसंगति पर क्लिक करना → प्लेबुक।

A11y/i18n: स्क्रीन रीडर, कीबोर्ड, हस्ताक्षर का अनुवाद।

Perf: बड़ी पंक्तियों का रेंडर, ठंडा/गर्म कैश, 10 × बिंदुओं पर तनाव।

16) विज़ुअलाइज़ेशन क्वालिटी मैट्रिक्स

टाइम-टू-इनसाइट (टीटीआई): पहले क्लिक/अंतर्दृष्टि के लिए मेडियन समय।

समझाया दर - उपलब्ध के साथ रेखांकन का हिस्सा।

क्रिया दर: जहाँ विजेट से क्रिया की गई थी।

त्रुटि/शोर: गलत हस्ताक्षर, उपयोक्ता शिकायत।

Perf p95: पहली सामग्री का समय और अंतर्क्रियाशीलता।

17) अनुसूची डिजाइन चेकलिस्ट

• कार्य के लिए अनुसूची प्रकार सही करें
• स्पष्ट अक्षों, इकाइयों, संख्या और तिथि प्रारूप
• संदर्भ: बेसलाइन/एसएलओ, तुलना अवधि, एनोटेशन
• अंतराल/लैग्स/संशोधन दिखाएँ
• रंग और कंट्रास्ट (WCAG), 5 पंक्तियाँ अधिकतम
• ओवरलोड के बिना इंटरएक्टिविटी: होवर, जूम, ड्रिल-डाउन
• प्रदर्शन: मांग पर एकत्रीकरण, डाउनसैम्पलिंग, कैनवास/वेबजीएल
• CTA कंधे से कंधा मिलाकर: खुली रिपोर्ट/प्लेबुक/अलर्ट बनाएँ
• स्लाइस तिथि और फ़िल्टर विन्यास के साथ निर्यात/साझा करें

18) डैशबोर्ड में एम्बेडिंग

संगति-किट: समान टोकन (फोंट, आकार, पैलेट), टाइपफेस का समान व्यवहार।

विजेट टेम्पलेट: केपीआई, समयसीमा, वितरण, तुलना, मानचित्र, तालिका।

"स्मार्ट" संकेत के लिए स्लॉट: "विसंगति" बैज, ड्राइवर स्पष्टीकरण, एक्शन बटन।

19) कार्यान्वयन योजना (3 पुनरावृत्ति)

• रेखांकन, एकीकृत तराजू/प्रारूप, बेसलाइन/एसएलओ, अंतराल/अंतराल बैज, निर्यात के प्रकार।

• अवधि तुलना, सीआई टेप, छोटे गुणक, विसंगतियाँ/बैज, कीबोर्ड नेविगेशन।

• डाउनसैम्पलिंग/वेबजीएल, पैनल, ऑटो-सैमरी, डैशबोर्ड प्रीसेट और सीटीए की व्याख्या करें।

20) मिनी-एफएक्यू

क्या y-अक्ष को हमेशा खरोंच से शुरू करना चाहिए?

स्तंभों के लिए - हाँ। लाइनों के लिए - आवश्यक नहीं है, लेकिन आधारभूत निर्दिष्ट करें और पैमाने से "धोखा" नहीं करें।

p95/p99 कैसे दिखाएं और अधिभार नहीं?

टेप प्रतिशत या एक ही कुल्हाड़ियों के साथ छोटे गुणक।

8 खंडों के साथ "पाई" को कैसे बदलें?

100% स्टैक्ड बार या बार-इन-सेल + सॉर्ट।

कुल

प्रभावी मीट्रिक दृश्य फॉर्म + ईमानदार संदर्भ + सुविधाजनक क्रियाओं का सही विकल्प है। तराजू और प्रारूपों के लिए समान मानक रखें, अनिश्चितता और चूक दिखाएं, एक त्वरित ड्रिल नीचे दें और सीटीए दें, प्रदर्शन और उपलब्धता का ध्यान रखें। फिर रेखांकन "चित्र" होना बंद हो जाएगा और एक निर्णय उपकरण बन जाएगा।