설명 / Description
타임라인은 사건이나 기간을 하나의 시간 축을 따라 배치하여 언제 일어났고 얼마나 지속되었는지를 보여줍니다. 정보 시각화의 가장 오래되고 자연스러운 형태 중 하나입니다 -- 인류는 역사를 이해하고, 프로젝트를 계획하고, 순서를 전달하기 위해 수백 년 동안 타임라인을 그려왔습니다. 핵심 인코딩은 시간적 위치를 수평(또는 때로는 수직) 선을 따라 공간적 위치로 매핑하는 것입니다.
A timeline arranges events or intervals along a single time axis, showing when things happened and how long they lasted. It is one of the oldest and most natural forms of information visualization -- humans have been drawing timelines for centuries to make sense of history, plan projects, and communicate sequences. The core encoding maps temporal position to spatial position along a horizontal (or occasionally vertical) line.
타임라인에는 두 가지 기본 유형이 있습니다: 각 사건이 점이나 레이블로 표시되는 이산적인 순간인 점 타임라인, 그리고 각 사건이 막대나 선분으로 표현되는 시작과 끝 시간을 가진 (간트 차트와 유사한) 기간 타임라인입니다. 많은 타임라인이 두 방식을 결합하여, 점 형태의 사건과 지속 시간 막대를 함께 배치해 풍부한 시간적 서사를 만듭니다.
Timelines come in two fundamental flavors: point timelines, where each event is a discrete moment marked by a dot or label, and span timelines (similar to Gantt charts), where each event has a start and end time represented by a bar or line segment. Many timelines combine both, placing point events alongside duration bars to create a rich temporal narrative.
타임라인의 효과는 사건의 밀도와 분포에 크게 좌우됩니다. 드문드문 잘 배치된 사건은 깔끔하고 읽기 쉬운 화면을 만듭니다. 밀집되거나 고르지 않게 분포된 사건은 신중한 처리가 필요합니다 -- 줌, 어안 왜곡, 계층화된 세부 수준 같은 기법이 혼잡한 영역을 관리하는 데 도움이 됩니다. 색상과 수직 위치는 범주형 차원(예: 서로 다른 사건 유형이나 병렬 트랙)을 인코딩할 수 있어, 시간적 뼈대를 희생하지 않으면서 풍부함을 더할 수 있습니다.
The effectiveness of a timeline depends heavily on the density and distribution of events. Sparse, well-spaced events produce clean, readable displays. Dense or unevenly distributed events require careful handling -- techniques like zooming, fisheye distortion, or layered detail levels help manage crowded regions. Color and vertical position can encode categorical dimensions (e.g., different event types or parallel tracks), adding richness without sacrificing the temporal backbone.
언제 사용하나 / When to Use
- 역사적 사건, 이정표, 프로젝트 단계의 시간 순서를 보여줄 때
- Showing the chronological order of historical events, milestones, or project phases
- 여러 동시 진행 활동의 지속 시간과 중첩을 비교할 때
- Comparing the duration and overlap of multiple concurrent activities
- 핵심 사건들이 서로 상대적으로 언제 일어났는지 서사적 맥락을 제공할 때
- Providing narrative context for when key events occurred relative to each other
- 일정, 로드맵, 전기적 사건 순서를 시각화할 때
- Visualizing schedules, roadmaps, or biographical sequences
이럴 땐 피하세요 / When NOT to Use
- 시간에 따른 수량적 변화가 초점일 때 -- 선 그래프나 영역 그래프를 사용하세요
- When the focus is on quantitative change over time -- use a line graph or area graph
- 사건에 명확한 시간 정보나 순서가 없을 때
- When events lack clear temporal information or ordering
- 동시에 발생하는 사건이 수백 개일 때 -- 화면을 읽을 수 없게 됩니다. 먼저 집계나 필터링을 사용하세요
- When there are hundreds of simultaneous events -- the display becomes unreadable; use aggregation or filtering first
- 주기적이거나 반복되는 패턴에는 -- 요일/시간 구조를 가진 히트맵을 사용하세요
- For cyclical or recurring patterns -- use a heatmap with day/hour structure
구조 / Anatomy
- 시간 축: 시간을 나타내는 선형 스케일로, 보통 일정한 간격의 눈금이 있는 수평 축입니다.
- Time axis: A linear scale representing time, usually horizontal with tick marks at regular intervals.
- 사건 마커: 순간적인 사건을 위해 특정 시간 지점에 배치된 점, 아이콘, 또는 레이블입니다.
- Event markers: Dots, icons, or labels placed at specific points in time for instantaneous events.
- 지속 시간 막대: 지속 시간이 있는 사건에 대해 시작부터 종료 시점까지 이어지는 수평 막대입니다.
- Duration bars: Horizontal bars spanning from start to end time for events with duration.
- 스윔 레인: 범주(예: 부서, 인물, 유형)별로 사건을 그룹화하는 평행한 수평 트랙입니다.
- Swim lanes: Parallel horizontal tracks grouping events by category (e.g., department, person, type).
- 레이블과 주석: 각 사건을 설명하는 텍스트로, 마커나 막대 근처에 배치됩니다.
- Labels and annotations: Text describing each event, positioned near its marker or bar.
- 시대 음영: 뚜렷한 시기나 단계를 강조하는 배경 색상 띠입니다.
- Era shading: Background color bands highlighting distinct periods or phases.
변형 / Variations
- 간트 차트: 작업이 지속 시간 막대로 표시되며, 흔히 의존성 화살표가 함께 있는 프로젝트 관리용 타임라인입니다.
- Gantt chart: A project-management timeline where tasks are shown as duration bars, often with dependency arrows.
- 수직 타임라인: 시간이 위에서 아래로 흐르며, 스토리텔링과 뉴스 기사에서 흔히 사용됩니다.
- Vertical timeline: Time flows top-to-bottom, common in storytelling and news articles.
- 다중 트랙 타임라인: 병렬적인 사건 흐름(예: 정치, 문화, 과학 사건)을 위한 여러 개의 스윔 레인입니다.
- Multi-track timeline: Multiple swim lanes for parallel event streams (e.g., political, cultural, scientific events).
- 인터랙티브 타임라인: 사용자가 확대/축소, 이동, 사건 클릭으로 세부 정보를 볼 수 있습니다 -- 디지털 역사 프로젝트에서 흔합니다.
- Interactive timeline: Users can zoom, pan, and click events for detail -- common in digital history projects.
- 나선형 타임라인: 시간이 나선을 따라 감기며, 더 긴 호 안에서 주기적 패턴을 보여줄 때 유용합니다.
- Spiral timeline: Time wraps around a spiral, useful for showing cyclical patterns within a longer arc.
코드 레퍼런스 / Code Reference
// Observable Plot - horizontal timeline with event spans
Plot.plot({
marks: [
Plot.barX(events, {
y: "label",
x1: "start",
x2: "end",
fill: "category",
tip: true
}),
Plot.dot(milestones, {
y: "label",
x: "date",
fill: "red",
r: 5
})
],
x: { type: "time", label: "Date" },
y: { label: null },
color: { legend: true }
})