منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۱۸ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۲ دقیقه

مصورسازی داده (Data Visualization) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

نمودار یک تصویر نیست؛ یک ترجمه است. عدد به هندسه تبدیل می‌شود و انتخابِ آن هندسه، دقت خواندن را عوض می‌کند.

تعریف

مصورسازی داده یعنی نمایش دیداری دادهٔ انتزاعی، برای دو هدف: فهمیدن و انتقال دادن.

هدف اول کارِ تحلیل‌گر است. او خودش هم نمی‌داند در داده چه خبر است و نمودار را برای دیدن می‌سازد.

هدف دوم کارِ طراح یا مدیر است. او نتیجه را می‌داند و نمودار را برای رساندن همان نتیجه می‌سازد.

این دو یک نام دارند و دو حرفه‌اند. جدا نکردنشان، ریشهٔ بخش بزرگی از داشبوردهای بی‌مصرف است.

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

این صفحه فقط دربارهٔ یک تصمیم است: رمزگذاری. رمزگذاری یعنی نگاشتِ یک کمیت به یک ویژگی دیداری.

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

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

نمودار خوب بارِ کار را از دوش دومی برمی‌دارد و به اولی می‌سپارد. رمزگذاری بد، همین انتقال را نصفه رها می‌کند و بار شناختی را برمی‌گرداند.

اکتشاف و روایت: دو کارِ یک ابزار

این تمایز در مطلب اصلی فقط یک جملهٔ کوتاه است، اما در عمل تعیین می‌کند که چه چیزی بسازید.

در حالت اکتشاف، سرعت بر زیبایی مقدم است. بیست نمودار خامِ ده‌دقیقه‌ای بیشتر از یک نمودار صیقلی به شما یاد می‌دهد.

بهترین ابزار این حالت، نمودارهای کوچکِ چندگانه است: یک شکلِ واحد که برای هر دسته تکرار می‌شود.

مزیتش این است که مقیاس همه‌جا یکی می‌ماند و چشم فقط تفاوت الگو را می‌بیند. رنگ اضافه هم لازم نمی‌شود.

در حالت روایت، پاسخ از قبل معلوم است. نمودار باید یک جمله را ثابت کند و هر عنصری که آن جمله را نمی‌سازد، اضافه است.

اینجا حاشیه‌نویسی جزئی از نمودار است، نه تزئین آن. یک فلش و یک عبارت شش‌کلمه‌ای روی نقطهٔ مهم، از هر افکتی مؤثرتر است.

یک آزمون ساده این دو حالت را از هم جدا می‌کند. اگر عنوان نمودارتان «گزارش فروش» است، هنوز در حالت اکتشاف هستید.

داشبوردِ محصول جای سومی است و همین آن را سخت می‌کند. باید مثل روایت یک پیش‌فرضِ روشن داشته باشد و مثل اکتشاف امکان ریزشدن بدهد.

ترتیب کار روشن است. اول اکتشاف کنید تا بدانید چه چیزی گفتنی است، بعد برای گفتنش نمودار بسازید.

از پرسش به نشانه و کانال

دستور زبانِ ساده‌ای زیر همهٔ نمودارها هست و دانستنش انتخاب را از سلیقه بیرون می‌آورد.

نشانه هندسهٔ پایه است: نقطه، خط، میله یا سطح. کانال ویژگی‌ای است که مقدار را حمل می‌کند.

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

ترتیب درستِ تصمیم چهار پله دارد: پرسش، نوع داده، نشانه، کانال. ابزار همیشه آخرین پله است، نه اولین.

این نگاشت در بیشتر موقعیت‌های کاری جواب می‌دهد:

• - ۱. مقایسهٔ دسته‌ها: نشانه میله است و کانالْ طول روی یک خط پایهٔ مشترک. مرتب‌سازی بر اساس مقدار، نیمی از کار را انجام می‌دهد.
• - ۲. تغییر در زمان: نشانه خط است و کانالْ موقعیت عمودی. خط، پیوستگی را هم می‌رساند و میله این کار را نمی‌کند.
• - ۳. رابطهٔ دو کمیت: نشانه نقطه است و دو کانالِ موقعیت افقی و عمودی. دقیق‌ترین نمودارِ ممکن همین است، چون هر دو کانالش از بالای نردبان‌اند.
• - ۴. توزیع یک کمیت: هیستوگرام یا نمودار جعبه‌ای. میانگین به‌تنهایی پراکندگی را پنهان می‌کند و پنهان‌کردن پراکندگی، خودش یک تحریف است.
• - ۵. جزء از کل: میلهٔ انباشتهٔ صددرصدی. اگر تعداد اجزا از چهار بیشتر شد، همان را به میلهٔ ساده بشکنید.

یک قاعدهٔ کوچک هم برای متغیر دوم و سوم لازم می‌شود. مهم‌ترین کمیت را روی قوی‌ترین کانال بگذارید و کم‌اهمیت‌ترین را روی ضعیف‌ترین.

این همان کاری است که سلسله‌مراتب بصری در یک صفحه انجام می‌دهد. نمودار هم صفحه است و اولویت لازم دارد.

نردبان دقت، و ظرفیت هر کانال

همهٔ کانال‌ها به یک اندازه دقیق نیستند و این تفاوت اندازه‌گیری شده است، نه سلیقه.

چشم اختلافِ موقعیت روی یک مقیاس مشترک را با کمترین خطا می‌خواند. طول در ردهٔ بعد است و بعد از آن زاویه و شیب.

مساحت بدتر از زاویه خوانده می‌شود و شدت رنگ و فامْ بدترینِ فهرست‌اند. همین ترتیب، تکلیف بیشتر دعواهای همیشگی را روشن می‌کند.

اما دقت تنها معیار نیست و کنار گذاشتنِ معیار دوم، به انتخاب‌های عجیب می‌رسد. معیار دوم ظرفیت است.

ظرفیت یعنی یک کانال چند مقدارِ قابل تشخیص را می‌تواند حمل کند. موقعیت صدها مقدار را نگه می‌دارد و فامِ رنگ حدوداً هفت دسته را.

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

دوازده دستهٔ رنگی روی یک نمودار، عملاً یک راهنمای رنگِ دوازده‌ردیفه است. مخاطب چشمش را بین راهنما و نمودار می‌برد و می‌آورد و در همان رفت‌وبرگشت خسته می‌شود.

درمانش هم روشن است: دسته‌ها را جدا کنید و به نمودارهای کوچکِ چندگانه ببرید، یا فقط یکی را رنگی و بقیه را خاکستری بگذارید.

پشتِ کل این نردبان یک واقعیت ادراکی ایستاده که در ویژگی‌های پیش‌توجهی مفصل آمده. برخی تفاوت‌ها پیش از توجه آگاهانه دیده می‌شوند.

نمودار دایره‌ای بهترین نمونهٔ سقوط از این نردبان است. یک مقدار را با سه ویژگی همزمان رمزگذاری می‌کند: مساحت، زاویه و کمان.

هر سه در انتهای فهرست دقت‌اند و افزودنِ سه رمزگذاری ضعیف، یک رمزگذاری قوی نمی‌سازد. سه‌بعدی کردنش هم آخرین میخ است، چون پرسپکتیو مقدارها را به‌هم می‌زند.

در برابرش، میلهٔ مرتب‌شده تقریباً همه‌چیز را درست انجام می‌دهد. طول از خط پایهٔ مشترک، مقیاس یکسان و رتبه‌بندیِ خوانا از خودِ ترتیب میله‌ها.

چهار خطایی که نمودار را وارونه می‌کند

خطاهای رمزگذاری معمولاً زشت نیستند و همین خطرناکشان می‌کند. چهار موردِ زیر بیشترین تکرار را دارند.

یک: محور بریده. این خطا را همه می‌شناسند، اما قاعده‌اش را معمولاً به‌شکل «همیشه از صفر شروع کن» حفظ می‌کنند و همان حفظ‌کردن اشتباه است.

قاعدهٔ درست را می‌شود از خودِ نردبان بیرون کشید. میله کانالش طول است و طول از یک مبدأ اندازه‌گیری می‌شود، پس خط پایه باید صفر باشد.

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

پس به‌جای «محور از صفر شروع شود؟» بپرسید کانالِ این نمودار چیست.

دو: دو محور عمودی. اشکال اصلی دو محور، تحریفِ یک عدد نیست؛ نبودنِ هیچ مرجعی برای داوری است.

در یک نمودار تک‌محور، مخاطب می‌تواند مقیاس را ببیند و بسنجد که ادعا درست است یا نه. با دو مقیاس مستقل، فاصلهٔ عمودی دو خط هیچ معنایی ندارد و نقطهٔ تلاقی‌شان هم اتفاقی است.

نتیجه این است که سازنده هر رابطه‌ای را که بخواهد می‌سازد و مخاطب ابزاری برای رد کردنش ندارد. جایگزینش هم ساده است: دو نمودار زیر هم، با محور زمانِ مشترک و هم‌تراز.

سه: دایره برای مقایسه. دایره فقط یک کار را خوب انجام می‌دهد و آن نشان‌دادنِ «این بخش حدوداً نصف است» است.

به‌محض اینکه پرسش به مقایسهٔ چند سهمِ نزدیک‌به‌هم تبدیل شود، دایره جواب نمی‌دهد. دو بخش با اختلاف سه درصد، در یک دایره کاملاً یکسان به نظر می‌رسند.

چهار: مقیاس رنگین‌کمانی. نقشه‌های حرارتی که از آبی به سبز و زرد و قرمز می‌روند، پرتکرارترین خطای رنگ در داشبوردها هستند.

مشکلش این است که رنگین‌کمان ترتیب ادراکی ندارد. مخاطب نمی‌داند سبز از زرد بزرگ‌تر است یا کوچک‌تر و مجبور است هر بار به راهنما نگاه کند.

بدتر آنکه مرزهای مصنوعی می‌سازد: جهش زرد به قرمز، مرزی جلوه می‌کند که در داده وجود ندارد.

جایگزینش دو خانواده است. برای کمیتِ یک‌طرفه یک فام با شدت‌های مختلف، و برای کمیتِ دوطرفه یک مقیاس واگرا با نقطهٔ میانیِ معنادار مثل صفر.

یک آزمون ساده هم برای هر مقیاس رنگی وجود دارد. نمودار را خاکستری کنید و ببینید آیا ترتیب مقدارها هنوز خوانده می‌شود یا نه.

مقیاس یک‌فامی قبول می‌شود، چون شدتِ رنگ در خاکستری هم شدت می‌ماند. رنگین‌کمان رد می‌شود، و همان ردشدن نشان می‌دهد نمودار برای مخاطب دارای کوررنگی چه شکلی است.

در بافت فارسی: نمودار راست‌به‌چپ

این بخش افزودهٔ من است، چون تقریباً همهٔ کتابخانه‌های نمودار با پیش‌فرض چپ‌به‌راست ساخته شده‌اند.

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

اینجا آن انتخاب را انجام‌شده فرض می‌کنم.

یک: آینه‌کردن، همه یا هیچ. اگر محور زمان را آینه کردید، هر چیزی که به جهت وابسته است باید با آن آینه شود.

فهرستش از آن‌چه به نظر می‌رسد بلندتر است: راهنمای رنگ، ترتیب لایه‌های میلهٔ انباشته، نمودارهای ریزِ درون جدول و جهت پرکردن نوار پیشرفت.

پرتکرارترین شکستِ این قاعده هم جایی است که راهنما آینه شده و ترتیب لایه‌ها نه. آن‌وقت ردیف اول راهنما به لایهٔ آخر نمودار اشاره می‌کند و مخاطب دسته‌ها را جابه‌جا می‌خواند.

یک تلهٔ ریز هم دارد که زیاد از قلم می‌افتد. نشانگرهای آشنای رشد، مثل فلشِ رو به بالا و راست، در محور آینه‌شده معنایشان عوض می‌شود.

پس یا فلش را هم آینه کنید یا کلاً از علامتِ جهت‌دار استفاده نکنید و به رنگ و برچسب تکیه کنید.

دو: ارقام و علامت‌ها در برچسب محور. ارقام فارسی در برچسب محور خوب می‌نشینند، اما یک مسئلهٔ فنی دارند که کمتر از آن حرف زده می‌شود.

عرض ارقام فارسی در بیشتر فونت‌ها یکسان نیست و «۱» بسیار باریک‌تر از «۵» است. نتیجه‌اش این است که ستون برچسب‌های محور عمودی لبهٔ ناهمواری پیدا می‌کند.

راه‌حل اولش حالتِ ارقام جدولی فونت است، اگر فونت آن قابلیت را داشته باشد. اگر نداشت، برچسب‌های محور را از راست هم‌تراز کنید تا حداقل یک لبه یکدست بماند.

علامت‌ها دردسر بیشتری دارند، چون جهت‌شان را از متن اطراف می‌گیرند. علامت منها و درصد در متن راست‌به‌چپ جابه‌جا می‌شوند و «۱۲-» به شکل «-۱۲» درمی‌آید.

این یکی صرفاً زشت نیست؛ می‌تواند علامت عدد را وارونه بخواند. بازه هم همین وضع را دارد و «۱۰ تا ۲۰» بی‌خطرتر از «۱۰–۲۰» است.

سه: ترتیب خواندنِ داشبورد. در داشبورد راست‌به‌چپ نقطهٔ ورود، گوشهٔ بالا-راست است، نه بالا-چپ.

پس مهم‌ترین شاخص باید همان‌جا بنشیند و ردیف شاخص‌ها از راست به چپ اهمیتش کم شود. الگویی که از قالب‌های آماده کپی می‌شود، دقیقاً برعکسِ این است.

در چیدمانِ ستونی هم همین منطق برقرار است. ستون راست، ستون اصلی است و فیلترها و توضیحات به ستون چپ می‌روند.

چهار: برچسب مستقیم به‌جای راهنمای رنگ. این توصیه همه‌جا درست است، اما در فارسی سود بیشتری می‌دهد و دلیلش زبان است.

نام دسته‌ها در فارسی معمولاً یک‌ونیم برابرِ معادل انگلیسی‌شان طول دارد. پس راهنمای رنگی که در نسخهٔ انگلیسی یک ردیف بود، در فارسی به دو یا سه ردیف می‌شکند.

برچسب مستقیمِ کنارِ خود خط، این ردیف‌ها را کاملاً حذف می‌کند. اما در چیدمان راست‌به‌چپ یک ریزه‌کاری دارد که در کتابخانه‌های نمودار پیش‌بینی نشده.

انتهای خط، که برچسب باید کنارش بنشیند، در محور آینه‌شده سمت چپ است. کتابخانه اما برچسب را همان‌جای همیشگی می‌گذارد و متن روی خط می‌افتد.

پس فاصلهٔ برچسب را دستی معکوس کنید و پهنای متن فارسی را هم در حاشیهٔ سمت چپ حساب کنید. جای درستِ یک‌بار حل‌کردن همهٔ این موارد، کامپوننت نمودارِ سیستم طراحی است.

جمع‌بندی

• - مصورسازی داده: نمایش دیداری دادهٔ انتزاعی · دو هدف فهمیدن و انتقال دادن · هر دو یک نام دارند و دو حرفه‌اند
• - بینایی سریع و ارزان است · اندیشیدن آگاهانه کند و گران · نمودار خوب بار را از دومی به اولی منتقل می‌کند
• - اکتشاف: سرعت مهم است · نمودارهای کوچک چندگانه · مقیاس مشترک به‌جای رنگ اضافه
• - روایت: یک نمودار یک جمله · حاشیه‌نویسی جزء نمودار است · عنوانِ «گزارش فروش» یعنی هنوز در حالت اکتشافید
• - دستور زبان: پرسش · نوع داده · نشانه · کانال — و ابزار آخرین پله است
• - پنج نگاشت پرکاربرد: میله برای دسته · خط برای زمان · نقطه برای رابطه · جعبه برای توزیع · میلهٔ انباشته برای جزء از کل
• - نردبان دقت: موقعیت · طول · زاویه · مساحت · رنگ — مهم‌ترین کمیت روی قوی‌ترین کانال
• - ظرفیت معیار دوم است: موقعیت صدها مقدار · فام حدود هفت دسته · شکل حدود پنج
• - دایره یک مقدار را با سه ویژگی ضعیف رمزگذاری می‌کند: مساحت · زاویه · کمان
• - چهار خطا: محور بریده · دو محور عمودی · دایره برای مقایسه · مقیاس رنگین‌کمانی
• - میله همیشه از صفر چون کانالش طول است · خط می‌تواند بریده باشد چون کانالش شیب است
• - رنگ کمیت: یک فام با شدت‌های مختلف · کمیت دوطرفه با مقیاس واگرا · آزمون خاکستری‌کردن
• - در فارسی: آینه‌کردن همه یا هیچ · ارقام جدولی و جابه‌جایی علامت منها · ورود از بالا-راست · برچسب مستقیم و حاشیهٔ معکوسش