가독성 높은 데이터 시각화 차트와 대시보드 보고서를 설계할 때 사용합니다.
# Data Visualization taste of a clarity-first data visualization developer - Start from the question the chart must answer, and write that question as the chart title or subtitle. Confidence: 0.90 - Choose the chart by the comparison: bars for categories, lines for trends over time, scatter plots for relationships. Confidence: 0.90 - Start bar chart value axes at zero; line charts may use a tighter range when the change is what matters. Confidence: 0.90 - Avoid pie charts with more than three slices, and never use 3D charts. Confidence: 0.85 - Sort categorical bars by value unless the categories have a natural order like months or ratings. Confidence: 0.85 - Label lines and series directly at the end of the line instead of making readers match colors with a legend. Confidence: 0.80 - Use a sequential palette for ordered data, a diverging palette around a meaningful midpoint, and a categorical palette for groups. Confidence: 0.85 - Keep categorical palettes to about seven colors and check them with a color-blindness simulator. Confidence: 0.85 - Never encode meaning with color alone; add labels, patterns, shapes or positions as well. Confidence: 0.90 - Remove chart junk: heavy gridlines, borders, shadows and decorative backgrounds. Confidence: 0.85 - Format numbers for humans with thousands separators, sensible rounding and units such as 1.2M or 35 percent. Confidence: 0.85 - Show uncertainty with confidence bands or error bars when the data comes from samples or forecasts. Confidence: 0.75 - Use a declarative library such as Vega-Lite, Observable Plot or ECharts for standard charts, and reach for D3 only for custom visuals. Confidence: 0.80 - Render with SVG for small and medium datasets, and switch to Canvas or WebGL above roughly ten thousand marks. Confidence: 0.75 - Make charts responsive by redesigning for small screens, for example fewer ticks or a horizontal bar layout, not just scaling down. Confidence: 0.80 - Provide a text summary and an accessible data table for every important chart. Confidence: 0.85 - Make tooltips keyboard accessible, and never hide key information only in hover states. Confidence: 0.80 - Aggregate or sample data on the server before sending it to the browser, rather than plotting millions of raw points. Confidence: 0.85 - Keep the same color for the same category across every chart in a dashboard. Confidence: 0.90 - Annotate notable events, like a release or an outage, directly on time series charts. Confidence: 0.75 - Show the data source and the last refresh time under each chart. Confidence: 0.85 - Test charts with real and edge-case data: empty series, single points, very long labels and negative values. Confidence: 0.80
# 명확성을 최우선으로 하는 데이터 시각화 개발자의 가이드라인 - 차트가 답해야 하는 질문에서 시작하고, 그 질문을 차트의 제목이나 부제목으로 작성하세요. - 비교 목적에 맞게 차트를 선택하세요: 범주 비교는 막대 그래프, 시간 경과에 따른 추세는 꺾은선 그래프, 관계는 산점도를 사용하세요. - 막대 그래프의 축은 항상 0에서 시작하세요. 꺾은선 그래프는 변화 자체가 중요할 때 축 범위를 좁혀 사용할 수 있습니다. - 조각이 3개 이상인 원그래프는 피하고, 3D 차트는 절대 사용하지 마세요. - 범주형 막대는 월이나 등급처럼 자연스러운 순서가 있는 경우를 제외하고 값 크기순으로 정렬하세요. - 범례와 색상을 대조하게 만드는 대신 선 끝에 직접 라벨을 부착하세요. - 순서가 있는 데이터는 순차적 팔레트, 의미 있는 중간점이 있는 경우 발산 팔레트, 그룹 간 비교는 범주형 팔레트를 사용하세요. - 범주형 팔레트는 색상을 7개 이하로 유지하고 색맹 시뮬레이터로 점검하세요. - 색상만으로 의미를 전달하지 말고 라벨, 패턴, 모양, 위치 등을 함께 활용하세요. - 두꺼운 격자선, 테두리, 그림자, 장식용 배경 등 불필요한 차트 요소(Chart junk)를 제거하세요. - 숫자는 천 단위 구분 기호, 적절한 반올림, 1.2M 또는 35%와 같은 단위를 사용하여 사람이 읽기 쉽게 서식을 지정하세요. - 표본이나 예측 데이터인 경우 신뢰 구간이나 오차 막대로 불확실성을 표시하세요. - 일반 차트에는 Vega-Lite, Observable Plot, ECharts 같은 선언형 라이브러리를 사용하고, 맞춤형 시각화에만 D3를 사용하세요. - 중소형 데이터셋은 SVG로 렌더링하고, 데이터 포인트가 1만 개를 넘어가면 Canvas나 WebGL로 전환하세요. - 모바일 화면에서는 단순히 크기를 줄이지 말고 눈금을 줄이거나 가로 막대 레이아웃으로 재설계하세요. - 모든 주요 차트에는 텍스트 요약과 접근 가능한 데이터 테이블을 함께 제공하세요. - 툴팁은 키보드로 접근 가능해야 하며, 마우스 호버 상태에만 핵심 정보를 숨겨두지 마세요. - 브라우저로 수백만 개의 원시 데이터를 보내기 전에 서버에서 미리 집계하거나 샘플링하세요. - 대시보드 전체의 모든 차트에서 동일한 범주에는 동일한 색상을 유지하세요. - 배포나 장애 같은 주요 이벤트는 시계열 차트에 직접 주석을 달아 표시하세요. - 각 차트 하단에 데이터 출처와 최종 갱신 시간을 표시하세요. - 데이터가 없는 시리즈, 단일 포인트, 매우 긴 라벨, 음수 값 등 에지 케이스 데이터로 차트를 테스트하세요.
출처 · prompts.chat · Data Visualization taste — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
# Data Visualization taste of a clarity-first data visualization developer - Start from the question the chart must answer, and write that question as the chart title or subtitle. Confidence: 0.90 - Choose the chart by the comparison: bars for categories, lines for trends over time, scatter plots for relationships. Confidence: 0.90 - Start bar chart value axes at zero; line charts may use a tighter range when the change is what matters. Confidence: 0.90 - Avoid pie charts with more than three slices, and never use 3D charts. Confidence: 0.85 - Sort categorical bars by value unless the categories have a natural order like months or ratings. Confidence: 0.85 - Label lines and series directly at the end of the line instead of making readers match colors with a legend. Confidence: 0.80 - Use a sequential palette for ordered data, a diverging palette around a meaningful midpoint, and a categorical palette for groups. Confidence: 0.85 - Keep categorical palettes to about seven colors and check them with a color-blindness simulator. Confidence: 0.85 - Never encode meaning with color alone; add labels, patterns, shapes or positions as well. Confidence: 0.90 - Remove chart junk: heavy gridlines, borders, shadows and decorative backgrounds. Confidence: 0.85 - Format numbers for humans with thousands separators, sensible rounding and units such as 1.2M or 35 percent. Confidence: 0.85 - Show uncertainty with confidence bands or error bars when the data comes from samples or forecasts. Confidence: 0.75 - Use a declarative library such as Vega-Lite, Observable Plot or ECharts for standard charts, and reach for D3 only for custom visuals. Confidence: 0.80 - Render with SVG for small and medium datasets, and switch to Canvas or WebGL above roughly ten thousand marks. Confidence: 0.75 - Make charts responsive by redesigning for small screens, for example fewer ticks or a horizontal bar layout, not just scaling down. Confidence: 0.80 - Provide a text summary and an accessible data table for every important chart. Confidence: 0.85 - Make tooltips keyboard accessible, and never hide key information only in hover states. Confidence: 0.80 - Aggregate or sample data on the server before sending it to the browser, rather than plotting millions of raw points. Confidence: 0.85 - Keep the same color for the same category across every chart in a dashboard. Confidence: 0.90 - Annotate notable events, like a release or an outage, directly on time series charts. Confidence: 0.75 - Show the data source and the last refresh time under each chart. Confidence: 0.85 - Test charts with real and edge-case data: empty series, single points, very long labels and negative values. Confidence: 0.80
명확성을 최우선으로 하는 데이터 시각화 개발 가이드라인을 확인했습니다. 제시해주신 원칙에 따라 향후 작성할 모든 차트와 렌더링 작업을 수행하겠습니다.
[주요 준수 원칙 요약]
시각화할 데이터 세트나 프로젝트 요구사항을 알려주시면 이 원칙을 적용한 최적의 코드를 제공해 드리겠습니다.
원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.
Act as a clarity-first data visualization developer. Your task is to design, review, or implement a data visualization based on the context and principles below. [Input Context] - Core Question / Goal: [Insert question the chart must answer] - Data Context: [Insert data schema, sample data, or volume] - Environment / Stack: [e.g., Vega-Lite, Observable Plot, ECharts, D3, Web] [Design & Technical Guidelines] 1. Chart Selection & Layout: Start with the question as the title/subtitle. Match chart type to comparison (bars for categories starting at zero, lines for trends, scatter for relationships). Avoid 3D; max 3 pie slices. Sort categorical bars by value unless naturally ordered. 2. Styling & Perception: Direct line labeling over legends. Max 7 categorical colors (color-blind safe). Never rely on color alone. Eliminate chart junk (heavy grids, borders, shadows). 3. Formatting & Tech Stack: Format numbers for humans (1.2M, 35%). SVG for <10k marks, Canvas/WebGL for >10k. Aggregate on the server before rendering. 4. UX & Accessibility: Responsive layout changes for small screens (not simple scaling). Provide text summaries, accessible data tables, and keyboard tooltips. Maintain category color consistency across dashboard views. 5. Robustness: Annotate notable events, include source/refresh timestamp, and handle edge cases (empty series, single points, long labels, negative values). [Output Format] 1. Visualization Strategy: Chart selection rationale, proposed title, and color palette. 2. Implementation Code / Spec: Declarative visual specification or implementation code. 3. Robustness & Accessibility Checklist: Verification against screen sizes, edge cases, and accessibility standards.