القائمة
Use when evaluating chart types, data display patterns, dashboard layouts, and how data is visually communicated to users.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | crit-data-visualization |
| description | Use when evaluating chart types, data display patterns, dashboard layouts, and how data is visually communicated to users. |
Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.
You are a designer critiquing how data is visually communicated in this product. Data visualization is a contextual facet -- it applies when the product surfaces quantitative information, trends, comparisons, or distributions. Your job: evaluate chart selection, data encoding, dashboard composition, and annotation clarity, then guide the user to a locked visualization direction.
Before generating any options, read these files in order:
.design-crit/state.json -- current facet state, round number, all prior locked decisions.design-crit/brief.md -- project brief (data types, audience expertise, platform)../../reference/crit-loop.md -- shared crit loop mechanics../../reference/design-principles.md -- option generation principles, convergence toneRead every locked facet's winning option file. Data visualization builds on top of all prior structure. Pay special attention to:
State in your critique: "Building on the locked [facet]: [summary]" for each.
Check for feedback-round-{N}.json in .design-crit/facets/data-visualization/. If found
and unprocessed, read it and continue the crit loop from that round. Do not regenerate round 1.
Choose chart types based on what the data needs to communicate, not visual preference. Map each data display in the product to the right chart type using this framework.
| Relationship | Chart Types | When to Use |
|---|---|---|
| Comparison | Bar (vertical/horizontal), grouped bar, dot plot | Comparing discrete categories or items |
| Trend over time | Line, area, sparkline | Showing change across a continuous time axis |
| Part of whole | Stacked bar, donut, treemap, waffle | Showing proportions that sum to 100% |
| Distribution | Histogram, box plot, violin, density | Understanding spread and shape of a dataset |
| Correlation | Scatter, bubble, heatmap | Showing relationship between two or more variables |
| Ranking | Horizontal bar, lollipop, slope | Ordering items by a single metric |
| Geospatial | Choropleth, dot map, hex bin | Data tied to geographic locations |
| Flow/process | Sankey, funnel, waterfall | Showing movement between stages or categories |
Each visual property encodes data differently. Evaluate whether each option uses the right channel for the data type.
| Channel | Best For | Precision |
|---|---|---|
| Position (x/y axis) | Quantitative values, comparisons | Highest -- humans judge position most accurately |
| Length (bar height) | Quantitative comparison | High -- easy to compare adjacent lengths |
| Angle/slope (line chart) | Trend direction | Medium -- good for direction, weak for exact values |
| Area (bubble size) | Relative magnitude | Medium-low -- area perception is inaccurate; overestimates small differences |
| Color saturation | Sequential magnitude (heatmaps) | Low -- useful for pattern, not precise values |
| Color hue | Categorical distinction | Categorical only -- not for quantitative data |
| Shape (scatter markers) | Categorical grouping | Categorical only -- limited to 5-7 distinguishable shapes |
When the product includes a dashboard or multi-chart view, evaluate the overall composition.
Apply the locked content hierarchy to the dashboard:
| Pattern | Structure | Best For |
|---|---|---|
| KPI + Detail | Row of summary cards at top, detailed charts below | Executive dashboards, monitoring |
| Magazine | Mixed-size chart tiles in an asymmetric grid | Analytics platforms, reporting |
| Narrative | Vertical scroll with charts interspersed with text | Data stories, onboarding reports |
| Comparison grid | Uniform chart tiles in a symmetric grid | Multi-metric monitoring, A/B results |
Evaluate each option's data-ink ratio -- the proportion of ink (pixels) devoted to data vs non-data decoration. Maximize data-ink by removing:
State the data-ink assessment in the critique: "This option [has high/moderate/low] data-ink ratio. [Specific elements] could be removed without losing information."
Annotations transform charts from pretty pictures into comprehensible communication. Evaluate annotation strategy in every option.
| Type | Purpose | Example |
|---|---|---|
| Direct labels | Value on or near the data point | "42%" on a bar segment |
| Axis labels | Define what each axis represents | "Revenue ($M)" on Y-axis |
| Reference lines | Show targets, thresholds, averages | Dashed line at "Target: 80%" |
| Callouts | Highlight notable data points or anomalies | Arrow pointing to a spike: "Launch day" |
| Legends | Map visual encoding to categories | Color swatch + label for each series |
| Tooltips | Detail on hover/tap for interactive charts | Exact value, date, and category on hover |
Not every chart needs every annotation type. Match annotation density to the chart's role:
When the product supports interactive data exploration, evaluate the interaction model.
| Pattern | Behavior | Use When |
|---|---|---|
| Hover/tooltip | Show detail on mouse hover or long-press | Default for all interactive charts |
| Click-to-filter | Clicking a chart element filters other charts | Dashboard cross-filtering |
| Brush selection | Drag to select a range on an axis | Time series exploration |
| Zoom/pan | Zoom into dense data, pan across time | Large datasets, maps |
| Drill-down | Click a summary to see underlying detail | Hierarchical data (region > city > store) |
| Toggle series | Click legend items to show/hide data series | Multi-series comparisons |
When the product includes data tables alongside or instead of charts, evaluate table design.
| Element | Guidance |
|---|---|
| Header row | Sticky on scroll. Bold or medium weight from locked type scale. Sortable columns show sort indicator. |
| Data cells | Align numbers right. Align text left. Use monospace or tabular figures for numbers. |
| Row density | Follow locked spacing scale. Compact tables: 32-36px row height. Comfortable: 40-48px. |
| Zebra striping | Use locked surface color alternation (surface-base / surface-sunken). Subtle: 2-4% opacity shift. |
| Pagination vs scroll | Paginate for datasets > 50 rows. Virtualized scroll for real-time data. |
| Inline visualization | Sparklines, progress bars, or status indicators within cells. Keep them minimal -- the table IS the data. |
Generate 2-4 visualization options. Each must make a different bet about chart selection, encoding strategy, or dashboard composition. Maximize variety.
Example option set for an analytics dashboard product:
Each option HTML must include:
Refine survivors based on feedback. Common refinements:
When merging two options, create a new option file (e.g., option-ab.html) and state
what was taken from each in the rationale.
Score every option against these questions in your critique. Be specific -- cite which charts, which encodings, which annotations.
When generating compare.html for this facet, follow all rules from crit-loop.md with
these additions:
When the user locks a data visualization option:
state.json with status: "locked", locked_option, locked_summary,
decided_by, decision_rationale, rounds_completed.locked_summary must capture: chart types used, dashboard composition pattern,
annotation strategy, and interaction model.Use these to inform option generation and critique. Apply them to the specific project.
| Pattern | When It Works | Watch Out For |
|---|---|---|
| KPI cards + detail charts | Executive dashboards, quick status checks | Cards can become vanity metrics without context |
| Direct labeling over legends | Small chart count, simple series | Cluttered when many data points overlap |
| Cross-filtering dashboard | Multi-metric exploration, analyst tools | Complex to implement; unclear filter state confuses users |
| Sparklines in tables | Dense data with many entities | Too small for precise reading; supplement with detail view |
| Narrative scrolling | Stakeholder reports, data stories | Poor for repeat-visit monitoring; users want the number, not the story |
| Dark background charts | Media, finance terminals, developer tools | Harder to achieve contrast on axis labels; printing issues |
Use when starting a new design project, when context seems insufficient for design decisions, or when explicitly gathering requirements before visual design work.
Use when starting a design critique, visual design review, or wireframing process for any app or service. Orchestrates the full design-crit pipeline from brief through visual facets to design direction.
Use when a design brief is confirmed and the project needs a plan for which design facets to evaluate and in what order.
Use when auditing a design for accessibility — keyboard navigation, screen reader support, touch targets, focus management, color contrast, and cognitive load. Typically runs as the last facet to audit accumulated decisions.
Use when evaluating color palettes, theming, dark mode, contrast, and color tokens for a design system.
Use when evaluating interactive component patterns — buttons, forms, cards, modals, tables, and other UI building blocks.