Data visualization
Data, in motion.
Show relationships in data clearly. These are DYNGLE's chart standards, drawn with D3.js.데이터의 관계를 선명하게 보여줍니다. D3.js로 그리는 뒹글의 차트 기준입니다.
Explore the connections
Click the legend to turn interests on and off. The axis range stays fixed to make before/after comparison easier. These are not real business results.범례를 눌러 분야를 켜고 끌 수 있습니다. 축 범위를 유지해 전후 비교를 돕습니다. 실제 사업 성과가 아닙니다.
Connection activity by interest관심 분야별 연결 활동
Monthly activity / illustrative sample data월별 활동 수 / 가상 예시 데이터
Hover over a data point or move with Tab to see its value.데이터 지점에 마우스를 올리거나 Tab 키로 이동해 값을 확인하세요.
View sample data table예시 데이터 표 보기
| Month월 | Life | Wellness | Bio |
|---|---|---|---|
| Apr4월 | 84 | 48 | 32 |
| May5월 | 108 | 71 | 49 |
| Jun6월 | 98 | 85 | 63 |
| Jul7월 | 142 | 112 | 78 |
| Aug8월 | 168 | 127 | 106 |
| Sep9월 | 204 | 162 | 134 |
Chart color roles
Chart colors use semantic tokens (--dy-color-chart-*), so they brighten automatically in the dark theme.차트 색은 의미 토큰(--dy-color-chart-*)을 사용해 다크 테마에서 자동으로 밝아집니다.
| Interest분야 | Token토큰 | Light / Dark | Distinguished by구분 방법 |
|---|---|---|---|
| Life | --dy-color-chart-1 | violet.500 / violet.400 | Solid line실선 |
| Wellness | --dy-color-chart-2 | lime.700 / lime.300 | Long dashes긴 점선 |
| Bio | --dy-color-chart-3 | red.500 / red.400 | Short dashes짧은 점선 |
Life Lime lacks contrast as a thin line on light surfaces, so lime.700 (#547A12) is used. Line styles and a data table are provided too, so nothing relies on color alone.Life Lime은 밝은 표면의 얇은 선에서 대비가 부족해 lime.700(#547A12)을 사용합니다. 선 형태와 데이터 표를 함께 제공해 색상에만 의존하지 않습니다.
Visualization principles
State the axis units, time period, and nature of the data, and start bar charts at 0. Keep the same axis range for charts being compared.축의 단위, 기간, 자료 성격을 명시하고, 막대 그래프는 0에서 시작합니다. 비교하는 차트는 같은 축 범위를 유지합니다.
Avoid decorative 3D effects, curves unrelated to actual values, and truncated axes that exaggerate small differences.장식용 입체 효과, 실제 값과 무관한 굴곡, 작은 차이를 과장하는 축 절단은 피합니다.
Chart motion
| Element요소 | Motion모션 |
|---|---|
| Lines / areas선 / 영역 | Revealed left to right (clipPath, 1.1s, cubic in-out), the same direction as time왼쪽에서 오른쪽으로 드러남 (clipPath, 1.1s, cubic in-out). 시간이 흐르는 방향과 같아요 |
| Data points데이터 점 | Appear in order after the line passes (120ms apart)선이 지나간 뒤 순서대로 등장 (120ms 간격) |
| Bars막대 | Grow from 0 to their value / 60ms apart per month0에서 값까지 성장 / 월별 60ms 간격 |
| Reduced motion동작 줄이기 | All transitions 0ms; only the final state is shown모든 전환 0ms, 최종 상태만 표시 |
D3 implementation
const x = d3.scalePoint()
.domain(data.map(d => d.month))
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 240])
.range([height - margin.bottom, margin.top]);
const line = d3.line()
.x(d => x(d.month))
.y(d => y(d.Life))
.curve(d3.curveMonotoneX);
svg.append("path")
.datum(data)
.attr("d", line)
.attr("fill", "none")
.style("stroke", "var(--dy-color-chart-1)");