مصورسازی داده

وضعیت: پیش‌نویس

هر نمودار به یک پرسش پاسخ می‌دهد و عنوانش همان پاسخ است.

آناتومی

1. عنوان کنشی: یک جمله که یافته را می‌گوید («بهره‌وری بعد از استقرار سیستم جدید ۲۲٪ رشد کرد»).
2. زیرعنوان: شاخص، واحد، دوره و مبنا، با رنگ text-secondary.
3. راهنما: فقط برای دو سری یا بیشتر، بالای نمودار. برچسب مستقیم بهتر است.
4. محورها و خط‌های راهنما: خط‌های افقی مویی با gray-20، چهار تا شش گام با عددهای گرد.
5. یادداشت: رویداد یا نقطهٔ مهم، کنار داده و روی زمینهٔ accent-subtle.
6. برچسب محورها: کوتاه و افقی، هرگز چرخیده.
7. منبع: زیر یک خط مویی؛ منبع، تاریخ، و «دادهٔ نمایشی» اگر داده واقعی نیست.

نقش رنگ‌ها

• دسته‌ای: chart-1 تا chart-5 با همین ترتیب ثابت. از سری ششم، «سایر» با chart-other.
• برجسته‌سازی (رایج‌ترین حالت در ارایه): سری مورد بحث با accent، بقیه با chart-other.
• ترتیبی: chart-seq-1 تا chart-seq-6.
• واگرا: قرمز برای منفی، فیروزه‌ای برای مثبت و gray-20 در میانه.
• وضعیت: positive، warning و negative فقط برای خوب، احتیاط و بد، همیشه با برچسب یا آیکن.

عددها

• رقم فارسی در نمودار. هزارگان «٬»، اعشار «٫» و درصد «٪» چسبیده به عدد.
• واحد و مقیاس در زیرعنوان («میلیارد تومان»)، نه کنار هر عدد.
• حداکثر یک رقم اعشار؛ درصد معمولاً بدون اعشار. یک دقت در هر نمودار.

محورها

• محور نمودار میله‌ای و ستونی همیشه از صفر شروع می‌شود.
• زمان حتی در چیدمان راست‌به‌چپ از چپ به راست پیش می‌رود. میله‌های افقی از راست رشد می‌کنند.
• دسته‌ها به ترتیب مقدار مرتب می‌شوند، مگر ترتیب طبیعی داشته باشند.

پرهیز کنید

نمودار سه‌بعدی، نمودار دومحوره، نمودار دایره‌ای با بیش از پنج بخش، پالت رنگین‌کمانی و آیکن تزیینی به جای میله.

جدول‌ها

• متن راست‌چین، عددها با رقم هم‌عرض و یک دقت در هر ستون.
• واحد در سرستون یا زیرعنوان.
• سرستون با راوی SemiBold و رنگ text-secondary و خط ۲ پیکسلی زیر آن؛ ردیف‌ها با خط مویی؛ بدون خط عمودی و بدون راه‌راه.
• ردیف جمع Bold، با خط ink بالای آن.
• برای برجسته کردن ستون یا خانه، زمینهٔ accent-subtle، نه رنگ متن.