| name | infographic-and-data-visualization |
| description | Use when visualizing data or process. Infographics communicate complex information efficiently when well-designed.
|
Infographic and Data Visualization
Data viz signals seriousness. Use restrained: 1-2 colors, clear typography, no decorative ornaments. Function over decoration.
Infographic principles
- Single message — one core insight per graphic
- Hierarchy — visual size matches importance
- Restraint — 1-2 brand colors, no rainbow
- Typography — same brand fonts, consistent sizing
- Annotation — labels close to data, not in legend
- Source — cite data source for credibility
Chart type selection
| Data type | Chart type |
|---|
| Comparison (2-5 items) | Bar chart, horizontal |
| Comparison (5+ items) | Sorted bar, table |
| Trend over time | Line chart |
| Composition (parts of whole) | Stacked bar, donut |
| Distribution | Histogram, box plot |
| Correlation | Scatter plot |
| Geographic | Map, choropleth |
Implementation tools
- Recharts (React, free, well-styled)
- D3.js (custom, full control)
- Chart.js (vanilla JS, lighter)
- Figma + manual (one-off infographics)
- Excel/Sheets export (quick + dirty)
Where this fits in the X3 empire
Used for CardPrepAI methodology charts and demo data viz.
