13 کتابخانه برای بصری سازی داده‌ها در JavaScript در سال 2018

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 05 آبان 1397
دسته بندی ها : جاوا اسکریپت

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

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

در عوض، ما می‌توانیم از متدهای بصری سازی داده مرتب استفاده کنیم، که از قابلیت مغز برای تشخیص و پردازش داده‌ها به یک روش بصری بهره می‌برند. برای کمک به شما در شروع کار و اضافه کردن بصری سازی‌های زیبا به برنامه مورد علاقه خود، در اینجا برخی کتابخانه‌های بصری سازی داده در سال ۲۰۱۸ را آماده کرده‌ایم.

1. D3js

D3.js با داشتن 80 هزار ستاره، احتمالا معروف‌ترین و گسترده‌ترین کتابخانه بصری سازی داده JavaScript موجود است. D3 برای دستکاری اسناد بر پایه داده، و زنده کردن آن‌ها با استفاده از HTML، SVG و CSS ساخته شده است. تاکید D3 بر روی استانداردهای وب، قابلیت‌های مرورگرهای مدرن را بدون نیاز به جفت شدن با یک فریم‌وورک اختصاصی، ترکیب کامپوننت‌های بصری و روش‌های بر پایه داده در دستکاری DOM به شما می‌دهد. این کتابخانه شما را قادر می‌سازد تا داده‌های خودسرانه را به یک مدل آبجکت سند (Document Object Model = DOM) اتصال داده، و سپس تغییر شکل‌های بر پایه داده را به سند خود اعمال کنید. در اینجا یک گالری نمونه عالی را می‌توانید ببینید.

نکته: برخی معتقدند که D3 اصلا یک کتابخانه بصری سازی داده نیست.

2. ChartJS

یک کتابخانه بسیار معروف (دارای ۴۰ هزار ستاره) نمودارهای HTML اوپن سورس برای وب‌اپلیکیشن‌های پاسخگو با استفاده از عناصر canvas. نسخه ۲ انواع نمودار، محورهای نمودار جدید و انیمیشن‌های جدیدی را ترکیب می‌کند. طراحی‌ها با ۸ نوع نمودار پایه، ساده و ظریف بوده و شما می‌توانید این کتابخانه را با در جهت اضافه کردن محور زمانی، با moment.js ترکیب کنید.

3. ThreeJS

این کتابخانه به شدت معروف، (دارای ۴۵ هزار ستاره و هزار شرکت کننده) برای ساخت انیمیشن‌های سه بعدی با استفاده از WebGL ساخته شده است. این پروژه منعطف بوده، و طبیعت چکیده آن به این معنی است که این کتابخانه برای بصری سازی داده‌ها به صورت ۲ یا ۳ بعدی هم مناسب است. برای مثال شما می‌توانید از این ماژول معین شده برای بصری سازی نمودارهای سه بعدی استفاده کرده، یا این محیط کار آنلاین را امتحان کنید. این یک انتخاب خوب است که بهتر است آن را در نظر بگیرید.

4. Echarts و Highcarts

پروژه Echarts از شرکت Baidu (دارای 30 هزار ستاره) یک کتابخانه نمودارسازی و بصری سازی تعاملی برای مرورگر است. این کتابخانه در JavaScript خالص نوشته شده، و بر پایه کتابخانه zrender ساخته شده است. این کتابخانه از رندر کردن نمودارها در قالب Canvas، SCG و VML به علاوه مرورگرهای کامپیوتر و موبایل پشتیبانی می‌کند، و همچنین می‌تواند به همراه node-canvas بر روی node برای رندر کردن سمت سرور (SSR = Server Side Rendering) موثر استفاده شود. شما می‌توانید در این لینک یک گالری نمونه را ببینید و آن را در یک محیط تعاملی ویرایش کنید.

Highcharts یک کتابخانه نمودارسازی JavaScript بسیار معروف و دارای 8 هزار ستاره، بر پایه SVG، و به همراه fallbackهایی به VML و canvas برای مرورگرهای قدیمی می‌باشد. این کتابخانه ادعا می‌کند که تحت استفاده ۷۲ شرکت از ۱۰۰ شرکت بزرگ دنیا قرار دارد، که باعث می‌شود احتمالا معروف‌ترین API نمودارسازی JavaScript در دنیا باشد.

5. Metric-Graphics

MetricsGraphics.js یک کتابخانه (دارای ۷ هزار ستاره) بهینه‌سازی شده برای بصری سازی داده‌ها می‌باشد. این کتابخانه نسبتا کوچک بوده (۸۰ کیلوبایت حجم دارد) و مجموعه‌ای کوچک، اما ظریف از نمودارهای خطی، قطعه‌های پراکنده، هیستوگرام، نواری و جداول داده را فراهم می‌کند. در اینجا می‌توانید گالری نمونه تعاملی را مشاهده کنید.

6. Recharts

Recharts‌یک کتابخانه نمودار ساخته شده با استفاده از React و D3 است که شما را قادر می‌سازد تا کامپوننت‌های React را گسترش دهید. این کتابخانه یک پشتیبانی بومی برای SVG را فراهم می‌کند، و درخت dependency آن از طریق ویژگی‌های کامپوننت، کاملا قابل سفارشی سازی می‌باشد.

7. Raphael

یک کتابخانه وکتور JavaScript، دارای 10 هزار ستاره برای کار با گرافیک‌های وکتور در وب. این کتابخانه از SVG W3C و VML به عنوان پایه‌ای برای ساخت گرافیک‌ها استفاده می‌کند؛ پس هر آبجکت گرافیکی‌ای،‌ همچنین یک آبجکت DOM است و شما می‌توانید event handlerهای JavaScript را به آن متصل کنید. Raphael در حال حاضر Firefox 3+، Safari 3+، Chrome 5+، Opera 9.5+ و Internet Explorer 6.0+ را پشتیبانی می‌کند.

8. C3js

C3 با داشتن ۸ هزار ستاره، یک کتابخانه نمودار بر پایه D3 و با قابلیت استفاده مجدد برای وب‌اپلیکیشن‌ها است. این کتابخانه کلاس‌هایی برای هر عنصر را فراهم می‌کند؛ پس شما می‌توانید یک استایل سفارشی را با استفاده از کلاس تعریف کرده، و ساختار را مستقیما با استفاده از D3 گسترش دهید. با استفاده از این کلاس‌ها، شما می‌توانید نمودارها را حتی بعد از رندر شدن نیز بروزرسانی کنید.

9. React Virtualized + React Vis + Victory

React-vis، مجموعه کامپوننت‌های React مطعلق به Uber (دارای 4 هزار ستاره) برای بصری سازی داده‌ها به روشی استوار، شامل نمودارهای خطی / محیطی / نواری، نقشه‌های حرارتی، قطعه‌های پراکنده، heatmapهای شش ضلعی‌ و... می‌باشد. این کتابخانه به هیچ‌گونه دانش قبلی در D3 یا هر کتابخانه داده‌ای نیاز ندارد، و کامپوننت‌های بلوک ساخت ماژولار سطح پایین‌تری مانند محورهای X / Y فراهم می‌کند.

React Virtualized مجموعه‌ای از کامپوننت‌های React برای رندر کردن لیست‌های بزرگ و داده‌های جدولی به صورت موثر می‌باشد. buildهای ES6، CommonJS و UMD با هر توزیع در دسترس هستند و این پروژه از جریان کاری Webpack 4 هم پشتیبانی می‌کند. دقت کنید که در جهت جلوگیری از تداخل نسخه‌ها، react و react-dom باید به عنوان یک dependency متناظر مشخص شوند.

Victory مجموعه‌ای از کامپوننت‌های React قابل خواندن برای ساخت بصری سازی‌ داده تعاملی است، که توسط آزمایشگاه‌های Formidable ساخته شده و دارای 6 هزار ستاره می‌باشد. Victory از API مشابه برای وب و برنامه‌های React Native برای نمودارسازی میان پلتفرمی استفاده می‌کنند. یک راه ظریف و منعطف برای بهره‌بری از کامپوننت‌های React، استفاده از بصری سازی داده عملی است.

10. CartoDB

Carto با داشتن ۲ هزار ستاره، یک ابزار هوش داخلی و بصری سازی داده براش کشف بینش‌های تحت داده‌های موقعیت مکانی می‌باشد. شما می‌توانید داده‌های جغرافیایی را با استفاده از یک فرم وب آپلود کرده، و آن را در یک dataset یا بر روی یک نقشه بصری سازی کنید، آن را با استفاده از SQL جستجو کنید، و استایل‌های مپ را با استفاده از CartoCSS به آن اعمال کنید.

11. Raw graphs

Raw با داشتن ۵ هزار ستاره، اتصالی میان spreadsheetها و بصری سازی داده است، که برای ساخت بصری سازی‌های وکتوری بر پایه d3.js می‌باشد. این ابزار با داده‌های جدولی و متن های کپی و پیست شده از برنامه‌های دیگر به خوبی کار می‌کند. بصری سازی‌های ساخته شده که بر پایه قالب SVG می‌باشند، می‌توانند با گرافیک‌های وکتور برای اصلاحیه‌های آینده ویرایش شوند، یا مستقیما در صفحات وب شما پیاده‌سازی شوند. می‌توانید در این لینک یک گالری نمونه را مشاهده کنید.

12. Metabase

Metabase با داشتن بیش از ۱۱ هزار ستاره، راه سریع و ساده‌ای برای ساخت داشبوردهای داده بدون داشتن دانشی در زمینه SQL می‌باشد. (اما حالت SQL را برای تجزیه و تحلیل‌ها ویژگی‌های داده دارد) شما می‌توانید بخش‌ها و معیارهای استاندارد بسازید، داده‌ها را به Slack ارسال کنید (و با استفاده از MetaBot داده‌ها را در Slack مشاهده کنید) و... این ابزار، احتمالا یک ابزار عالی برای بصری سازی داده‌ها به صورت داخلی برای گروه خود است، گرچه ممکن است به مقداری نگهداری نیاز داشته باشید.

13. tuaCharts

tuaCharts با داشتن تقریبا ۲ هزار ستاره، یک کتابخانه نمودارسازی بر پایه D3 و متمرکز بر روی داده است. این کتابخانه یک رابط عالی برای map‌ کردن سریع فیلدهای داده برای ویژگی‌های بصری است، و معماری آن شما را قادر می‌سازد تا facetهایی را بسازید و رفتار نمودار را با استفاده از پلاگین‌ها گسترش دهید.

موارد دیگر:

دقت کنید که برخی از این موارد، دیگر پشتیبانی نمی‌شوند:

منبع

مقالات پیشنهادی

20 کتابخانه عالی برای تابستان 1395 - قسمت اول

اولین بار php در سال 1995 ارائه شده و تا به الان مخاطبان خیلی خیلی زیادی داره و همچنین کسانی که با اون کار میکنن هم خیلی زیاد هستند به همین خاطر هر رو...

راهنمای برندسازی شخصی برای طراحان در سال ۲۰۱۸

ممکن است که از این موضوع خبر نداشته باشید، اما شما یک برند شخصی دارید. بدتر از اینکه شما از این موضوع خبر ندارید این است که ممکن است برندسازی شخصی‌تان...

10 کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶

در این مطلب کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶ رو مشاهده میکنید که با استفاده از اون ها میتونید کارهای مختلفی با css و js انجام بدید که ک...

15 کتابخانه جالب javascript و css

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