Web Component · Edu

<iso-city>

트리맵(Treemap)으로 바닥을 구역으로 나누고, 그 위에 건물을 세웁니다. 밑면 넓이는 학생 수(size), 건물 높이는 측정 지표(v)를 나타내어 복합적인 학교 통계를 도시처럼 한눈에 조망합니다.

가상 예시 데이터이며 외부로 전송되지 않습니다. 학년·학급별 집계 지표 예시입니다.

예시: 학교 도시 (학년별 학급 독서량)

구역은 학년을 나타내며, 각 구역 안의 건물은 학급입니다. 밑면은 학생 수, 높이는 1인당 월 독서 권수(권)입니다.

트리맵 알고리즘과 스마트 라벨링

iso-city는 정보 밀도가 높은 다차원 계층 데이터를 효과적으로 전달하기 위해 설계되었습니다.

Squarified 트리맵 분할: 의존성 없는 순수 알고리즘으로 바닥 면적을 최적의 종횡비로 분할합니다. 학급 인원수가 많은 곳은 밑면이 넓어집니다.
자동 깊이 정렬: 구역 판들을 먼저 그리고 건물들을 뒤에서 앞으로 완벽한 위상 순서로 렌더링합니다.
스마트 라벨 제어: 구역 이름은 구역 상단에 항상 노출되며, 건물 라벨은 호버나 포커스 시 부드럽게 나타나 화면이 글자로 가려지지 않습니다. 건물을 가리키면 구역 이름이 흐려져 가독성을 높입니다.

속성

속성	형식	의미
`data`	JSON 객체	계층 구조 객체(뿌리 → 구역 → 건물). 잘못된 형식이면 오류 문구를 표시합니다
`max`	숫자	축척 최댓값. 생략 시 전체 건물 중 최댓값
`unit`	숫자(px)	기본 등각 단위(`--iso-u`). 기본 24
`height-units`	숫자	최댓값일 때의 블록 높이 단위. 기본 5
`label`	문자열	접근성 캡션(`aria-label` 및 숨김 표 `caption`)
`renderer`	`css` \| `svg` \| `auto`	렌더링 방식. 기본 `auto` (건물 200개 초과 시 SVG 자동 전환)

data 객체 (Root)

키	형식	의미
`k`	문자열 · 필수	전체 이름 (예: "학교")
`children`	배열 · 필수	구역(District) 객체들의 배열

District 객체

키	형식	의미
`k`	문자열 · 필수	구역 이름 (예: "1학년")
`children`	배열 · 필수	해당 구역 내 건물(Building) 객체들의 배열

Building 객체

키	형식	의미
`k`	문자열 · 필수	건물 이름 (예: "1반")
`size`	양의 숫자 · 필수	밑면 넓이에 반영되는 크기 (예: 학생 수)
`v`	0 이상 숫자 · 필수	건물 높이에 반영되는 측정 지표 (예: 독서량)
`c`	CSS 색 · 선택	건물 블록의 색상

이벤트

건물 블록을 누르거나 키보드로 선택하면 iso-select가 발생합니다. detail은 { district, index, item }입니다.

document.querySelector("iso-city").addEventListener("iso-select", (e) => {
  const { district, index, item } = e.detail;
  console.log(`${district}번 구역의 ${item.k}: 학생 수 ${item.size}명, 수치 ${item.v}`);
});

빈 상태와 오류

데이터가 올바르지 않으면 오류 상태 메시지가 표시됩니다.

장면 전체는 role="group"을 가지며 label이 설명으로 부여됩니다.
각 건물 블록은 tabindex="0"과 aria-label="구역 이름: 값 (크기 수치)"을 가집니다.
스크린 리더를 위해 구역, 건물 이름, 크기, 값을 표 형태로 정리한 숨김 표(.iso-sr-only)가 자동 생성됩니다.