از طرح نشانگر گرفته تا الگوی سفارشی Flourish

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

این پست توضیح می‌دهد که چگونه این نمودارها را ایجاد کردم، زیرا مسیر کمی غیرعادی بود: نمودار شکوفایی، چاپ، کلود، و در نهایت یک الگوی سفارشی فلوریش.

جایی که فلوریش مرا برد و کجا متوقف شد

من از جایی شروع کردم که معمولاً انجام می دهم. من داده‌هایی را که از اداره تامین اجتماعی، اداره سرشماری، و Ballotpedia دانلود کرده‌ام تنظیم کردم (بله، من هنوز کار داده‌هایم را در Stata انجام می‌دهم) و اولین نسخه نمودار را در Flourish ایجاد کردم. ایجاد اولین پیش نویس پس از شکل گیری داده ها آسان بود: مقادیر را رها کنید، رنگ ستون را تنظیم کنید و voila – یک نمودار تمیز و تعاملی با نکات ابزار.

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

افزودن این سفارشی سازی نیاز به تفکر خلاق داشت.

مرحله اول: نشانگرها، اسکنر و کلود

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

مرحله دوم: از یک نمودار یکبار مصرف به یک الگوی شکوفایی

پس از آماده شدن نسخه HTML من، یکی از اعضای فضای کاری Friends of Flourish Slack (جامعه ای از علاقه مندان به Flourish) به من پیشنهاد داد که از کلود بخواهم این نسخه را به عنوان یک الگو به Flourish برگرداند.

من هنوز فلوریش SDK (کیت توسعه نرم‌افزار) را کاوش نکرده بودم، اما این یک مورد استفاده عالی را فراهم کرد. یک الگوی Flourish یک نوع نمودار قابل استفاده مجدد را در پشت یک تجسم ایجاد می کند: کمی جاوا اسکریپت به همراه یک فایل پیکربندی. پس از انتشار پیش‌نمایش، شما (یا فردی در تیمتان) می‌توانید با تبادل داده‌ها و تغییر تنظیمات، نمودارهای جدیدی را با الگو ایجاد کنید، بدون نیاز به کد. نکته مهم همیشه این بوده است که ساختن یک الگو مستلزم جاوا اسکریپت واقعی و دانش در مورد نحوه تناسب ماژول های Flourish با هم است – مهارت هایی که من ندارم.

اینجاست که کیت شروع SDK AI مفید واقع شد. این مجموعه ای از دستورالعمل ها، الگوهای شروع و یادداشت های فنی است که برای دستیاران کدنویسی هوش مصنوعی نوشته شده است. من کلود کد را به فرمان باز کردن کیت، نمودار HTML من و ازدحام زنبورهای اصلی Flourish اشاره کردم و از او خواستم نمودار را به عنوان یک الگو بازسازی کند. در اینجا تقریباً اتفاقی افتاده است:

1. کلود بررسی کرد که تنظیمات من آماده است (Node.js، Flourish SDK، و ورود به سیستم Flourish من).
2. او الگوی راه اندازی صحیح (نمودار با محور x، بنابراین عنصر راه اندازی) را انتخاب کرد و کد منبع آن را خواند.
3. او طرحی را ارائه کرد: کدام ماژول‌های Flourish را نگه داریم (رنگ‌ها، افسانه‌ها، پنجره‌های بازشو، محورها، قالب‌بندی اعداد)، کدام را اضافه کنیم (یک منوی وقفه اضافه شد، که خیلی جالب است!)، کدام یک حذف شود، و چگونه ستون‌های داده به نمودار نگاشت می‌شوند.
4. او طرح‌بندی beeswarm را از نسخه HTML انجام داد، سپس مرزهای کشویی، نمودار نوار شمارنده و برچسب‌های جهت محور فرعی را بازیابی کرد.
5. او الگو را به صورت محلی اجرا کرد، اسکرین شات های دسکتاپ و تلفن خود را گرفت، کشیدن نوار لغزنده و شناور شدن روی نقاط را شبیه سازی کرد و آنچه را که پیدا کرد را ثابت کرد.

اعداد با داده ها مقایسه می شوند. در آستانه 18 درصد، 198 منطقه از 432 منطقه برجسته شدند: 137 منطقه از 218 جمهوری خواه و 61 منطقه از 214 دموکرات. و از آنجایی که قبلاً یک الگوی مناسب است، تقریباً هر مؤلفه به عنوان یک تنظیم ظاهر می شود. من می توانم حاشیه شروع، متن پانل (که با کشیدن به روز می شود)، نمایش نمودار میله ای، رنگ های سرصفحه و پاورقی، فونت ها و متن را به روز کنم، همه در Flourish.

انتشار به دو دستور نیاز دارد. رونق عمومی – نسخه پیش از انتشار یک نسخه آزمایشی را در Flourish قرار می دهد که در آن می توانم داده های واقعی را بارگذاری کنم. هنگامی که درست به نظر می رسد، انتشار – انتشار، نسخه پایداری را ایجاد می کند که من نمودارها را از آن می سازم (که هنوز باید انجام دهم؛ ممکن است بخواهم از داده های متفاوتی برای الگوی نهایی استفاده کنم).

چیزی که من از این تمرین حذف کردم

• ابتدا طرح، سپس درخواست. برای من، چاپ هایلایت شده ساده تر و سریعتر از تلاش برای نوشتن شرح مفصلی از آنچه می خواهم ببینم بود. بلوپرینت مکالمه را به طرح متصل می کند، نه کد.
• یک بار قبل از قالب بسازید. من قبل از شروع کار در مورد SDK نمی دانستم، اما مستندات در Github بسیار واضح و سرراست است، بنابراین ایجاد یک الگوی Flourish به طور مستقیم نسبتا آسان بود. در آینده، ممکن است همچنان از این رویکرد پیروی کنم -Flourish (یا ابزاری که در دسترس نیست)، حاشیه نویسی، HTML، SDK – زیرا این امکان را به من می دهد تا قبل از انجام مراحل ساخت الگوی Flourish، نسخه نهایی را به سرعت ببینم و آزمایش کنم.
• دستورالعمل برای مبتدیان مهم است. کیت شروع به کلود می‌گفت که از کدام نمودار شروع کند، از کدام ماژول‌های Flourish استفاده کند و از کدام اشتباهات رایج اجتناب کند. این ساختار بخش بزرگی از این است که چرا ساخت اول فقط به چند اصلاح نیاز داشت.
• به عنوان یک خواننده تست کنید. مفیدترین بخش ساخت این بود که کلود اسکرین شات های خودش را بررسی می کرد، از جمله در عرض گوشی. در اینجا بود که او مشکلاتی را پیدا کرد، مانند برچسب‌هایی که در مکان اشتباه فرود آمدند، که کد به تنهایی قادر به شناسایی آن نبود.
• شما باید بدانید که چه می خواهید. در حالی که کلود جاوا اسکریپت را مدیریت می کرد، تمام تصمیمات در مورد اینکه نمودار چه چیزی را باید نشان دهد، لغزنده چه چیزی را باید حساب کند و چگونه باید بخواند، هنوز در اختیار من بود. کلود به من کمک کرد که شکاف های فنی را پر کنم، اما هنوز باید اصول تجسم موثر داده ها را به کار می بردم.

خودتان آن را امتحان کنید

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

اگر می‌خواهید الگوی Flourish خود را به این روش بسازید، با SDK کیت شروع AI و کمک‌کننده کدنویسی هوش مصنوعی انتخابی خود استفاده کنید. و برخی از نشانگرها را در دسترس داشته باشید.

آن را از دست ندهید! برای دریافت پست‌ها، پیوندها و سایر محتوای ویژه‌ای که به صندوق ورودی خود تحویل داده می‌شوند، در خبرنامه PolicyViz Substack مشترک شوید.