메트릭 시각화
1) 이미징 목표
빠르게 이해: 3-5 초 안에 추세/이상/이동을 인식하십시오.
기간, 세그먼트, 변형 A/B를 올바르게 비교하십시오.
데이터를 믿으십시오: 불확실성, 출처, 신선도를 보여주십
법: 그래프 옆에-CTA, 필터, 플레이 북에 대한 링크.
2) 미터법 유형 및 최상의 형태
3) 저울, 축 및 집계
저울: 기본적으로 선형; 로그 - 여러 범위의 경우; 백분율- [0; 100].
제로 기준: 바-처음부터; 선-0의 요구 사항은 없습니다 (그러나 기준선 표시).
집계: 일/시간/분, p50/p95/p99; "잡음" 분포의 평균을 피하십시오.
계층 구조에서 롤업/드릴 다운 버튼 "D/N/H" (일/주/시간) 및 "참고" (지역 → 스트라나 → 고로드).
샘플링 포인트 (다운 샘플링): 극단을 잃지 않도록 긴 행의 LTTB/MinMax.
4) 맥락과 비교
기간 비교: "현재 vs 이전" (점선이있는 오버레이) 및/또는 작은 배수; 상대적인 것과 절대적인 것을 기호합니다.
계절성: 주말/휴일 배경 밴드, 시간별 따뜻한/차가운 지역.
벤치 마크: 수평 표준/대상 라인 (SLO/SLA), 부호 단위 및 시간 지평선.
신뢰 간격: 스트립/테이프 λCI; A/B - 오류 막대 및 p- 값/엘리베이터.
5) 불확실성, 누락, 개정
생략: 선을 끊습니다 (0과 연결하지 마십시오). 불완전한 창을 위해 회색 "안개".
데이터 지연: 배지 "데이터는 12 분 뒤에 있습니다".
수정: 변경 로그를 참조하여 얇은 해치 영역을 "재 계산" 합니다.
6) 색상, 모양 및 가용성 (A11y)
팔레트: 중립베이스; 빨간색-중요, 주황색-경고, 녹색-긍정적입니다.
색상 독립성: 값/마커/서명으로 중복; 대비 WCAG AA.
행 수: 그래프 당 자릿수 5; 그렇지 않으면 작은 배수/패싯입니다.
크기/클릭: 대화식 대상은 32-40 px; 포커스 링, 키보드 탐색.
7) 올바르게 서명
Axes: 단위, 번호 형식 (1,234,56; 12. 3k; 5. 2%); 로케일이있는 데이터 레이블.
전설: 시각적으로 중요한 순서; 시리즈를 포함/제외 할 수 있습니다.
주석: 이벤트를 참조하여 간단하고 경우에 ("릴리스, PSP _ X" "사건 # 4217").
8) 상호 작용: 과부하 방지
호버/툴팁: 주요 필드가 있고 소형베이스 라인이 있습니다.
줌/브러시: 마우스/키보드 선택; 재설정 단추.
드릴 다운: 세그먼트 → 자세한 섹션을 클릭하십시오. 돌아올 빵 부스러기.
선택기: 사전 범위 (24h/7d/30d), 세그먼트 필터, "Abs/Percent" 스위치.
9) 구성 요소 템플릿 (예: API)
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) 렌더링 성능
서버에 집계: 이미 "올바른" 창/정량을 반환합니다.
캔버스/웹 GL: 수만 개의 지점과 열지도; SVG-2 ~ 3 천 개의 요소와 명확한 서명을 위해.
목록/표 가상화-스크롤 할 때 페이지를로드하십시오.
캐싱: 뜨거운 타일, "어제/주" 사전 계산.
11) 유효성 및 패턴 방지
당신은 할 수 없습니다:- 스케일을 조작합니다 (0 이상의 열 축을 다듬으십시오).
- 보조 축과 명시 적 서명없이 다른 단위를 혼합하십시오.
- 8-10 열로 쌓인 지역 "숲" 을 만드십시오.
- 간격을 0으로 바꿉니다.
- "아름다움" 을 위해 3D/그림자를 사용하십시오.
12) 공식, 단위 및 형식
돈: 작은 단위/십진수 문자열; 통화를 명시 적으로 지정하십
변환/분수: 10 진수의 백분율 (필요한 경우 - p. p.).
요금/요금: "시간당/일" -기간에 서명하십시오.
반올림: 값 순서를 숨기지 않고 중요한 숫자로.
13) 품질 및 SLO 지표의 특이성
오류 예산 연소 및 경고 수준 보이기
가동 시간-쌓인 상태 표시 줄 "OK/Degraded/Down" + 사고 창.
대기 시간의 경우-분포 (p50/p95/p99), 클러스터/엔드 포인트에 의한 "바이올린/박스 플롯".
14) 스토리 텔링 및 자동 삼마리
내러티브 블록: 2-4 문장 "무슨 일이 있었는지" + "왜" + "해야 할 일"
슬라이드/내보내기: 글꼴 및 색상이있는 용지/PNG/SVG; 워터 마크 및 컷오프 날짜.
15) 시각화 테스트 계획
단위: 축 형식, 빈 계산, CI 테이프.
통합: 필터/범위/로케일, 드릴 다운 및 리버스 내비게이션.
E2E: 조치 경고 시나리오: 이상 → 플레이 북을 클릭하십시오.
A11y/i18n: 스크린 리더, 키보드, 서명 번역.
Perf: 큰 행 렌더링, 차가운/따뜻한 캐시, 10 × 포인트에서 응력.
16) 시각화 품질 지표
TTI (Time-to-Insight): 처음 클릭/통찰력을 얻는 평균 시간.
설명 된 속도-설명 가능한 그래프와 그래프의 비율.
동작 속도: 위젯의 동작이 수행 된 위치.
오류/소음: 잘못된 서명, 사용자 불만.
Perf p95: 첫 콘텐츠 및 상호 작용 시간.
17) 일정 설계 점검표
- 작업에 대한 정확한 일정 형식
- 축, 단위, 번호 및 날짜 형식 지우기
- 상황: 기준/SLO, 비교 기간, 주석
- 간격/지연/개정 표시
- 색상 및 대비 (WCAG), 5 행 최대
- 과부하가없는 상호 작용: 호버, 확대, 드릴 다운
- 성능: 요청시 집계, 다운 샘플링, 캔버스/웹 GL
- CTA가 나란히: 공개 보고서/플레이 북/경고 생성
- 슬라이스 날짜 및 필터 설정으로 내보내기/공유
18) 대시 보드에 포함
일관성 키트: 균일 한 토큰 (글꼴, 크기, 팔레트), 서체의 균일 한 동작.
위젯 템플릿: KPI, 타임 시리즈, 분포, 비교, 맵, 표.
"스마트" 프롬프트 슬롯: "이상" 배지, 운전자 설명, 액션 버튼.
19) 구현 계획 (3 회 반복)
반복 1-기초 (2-3 주):- 그래프의 종류, 통합 스케일/형식, 기준/SLO, 갭/지연 배지, 수출.
- 기간 비교, CI 테이프, 작은 배수, 이상/배지, 키보드 탐색.
- 다운 샘플링/WebGL, 설명 패널, 자동 삼마리, 대시 보드 사전 설정 및 CTA.
20) 미니 -FAQ
y 축은 항상 처음부터 시작해야합니까?
열의 경우-예. 필요하지는 않지만 기준선을 지정하고 스케일별로 "속이지" 않습니다.
과부하가 아닌 p95/p99를 표시하는 방법?
축이 같은 테이프 백분위 수 또는 작은 배수.
"파이" 를 8 개의 세그먼트로 교체하는 방법?
100% 쌓인 막대 또는 셀 바인 + 정렬.
합계
효과적인 메트릭 시각화는 양식 + 정직한 컨텍스트 + 편리한 동작의 올바른 선택입니다. 저울과 형식에 대한 균일 한 표준을 유지하고, 불확실성과 누락을 보여주고, 빠른 드릴 다운과 CTA를 제공하고, 성능과 가용성을 관리하십시오. 그런 다음 그래프는 "그림" 이되지 않고 의사 결정 도구가됩니다.