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

https://www.aparat.com/v/Gj2vB بصری سازی داده ها مبحث تقریبا جدیدی است که به به تصویر کشیدن داده ها و روابط بین آنها اطلاق می شود.در زمان انسان های اولیه، از ترسیم اشکال بر روی سنگ ها به منظور "تعامل بصری" یا Visual Communication استفاده می شده است. با پیشرفت بشر و گسترش انواع تعاملات، اکنون ما از بصری سازی داده ها برای نشان دادن اهمیت داده ها و روابط بین آنها، و همچنین تبدیل این مهم و ارتباط از حالت متنی که غیر قابل فهم به آسانی است، به حالت تصویری که سریعا بتوان آنرا فهمید و درک کرد، استفاده می کنیم.امروزه از بصری سازی داده ها در موارد زیر به ترتیب اهمیت استفاده میشود:آمارگیری های دولتی مانند سرشماری و...بورس و تحلیل گران بورستحلیل های بانکیتحلیل حساب های شرکت هاتحلیل های وبسایت ها مانند آمار بازدید، آمار دانلود و...استفاده در ارائه ها و کنفرانس ها (استفاده علمی-تحقیقاتی)و...در این پست من قصد دارم که ۴ تا کتابخانه (یکی اصلی و سه تا برای مقایسه) برای بصری سازی داده ها در محیط وب را به شما معرفی کنم. پس با این پست همراه باشید.‏۱-Chart.jsChart.jsمزایا:منبع باز و مجانی۸ مدل بصری سازی مختلف با قابلیت استفاده همزماناستفاده از تگ canvas در HTML5 با سرعت بسیار بالاکاملا تعاملی (دارای انیمیشن، بازترسیم چارت در صورت تغییر اندازه)حجم بسیار پایین کتابخانهآموزش ها و مستندات بسیار عالیمعایب:استفاده از مدل ترسیمی bitmap pixel-basedوبسایت:‏www.chartjs.org‏۲-Chartist.jsChartist.jsمزایا:منبع باز و کاملا مجانیحجم بسیار کم کتابخانه! (۱۰ کیلوبایت gzip شده)استفاده از فرمت SVG و ترسیم وکتوریبدون وابستگی و بسیار سبک و کم حجمچارت های کاملا تعاملی که با اضافه کردن مقادیر تغییر می کنند.مستندات و مثال های نسبتا خوب بر روی وبسایتقابلیت استفاده از انیمیشنمعایب:انیمیشن ها در اکثر مرورگر ها پشتیبانی نمی شوند.این کتابخانه مناسب کار های بسیار ساده و پیش پا افتاده می باشد که به قابلیت های زیادی نیاز ندارند. مانند پروژه های دانشجویی سبک. برای کار های حرفه ای و پیچیده اصلا مناسب نیست.وبسایت:‏www.gionkunz.github.io/chartist-js‏۳-HighchartsHighchartsمزایا:منبع باز و مجانی فقط برای استفاده غیر تجاری و تبلیغاتیپشتیبانی از تقریبا همه اشکال بصری سازی دادهمورد اعتماد و استفاده شده از ۸۰ کمپانی از ۱۰۰ کمپانی بزرگ دنیا. مثلا facebook، twitter، Apple، Visa و... از این کتابخانه استفاده می کنند.پشتیبانی از تقریبا تمام مرورگر های مدرن (حتی IE6 به بالا)جامعه بسیار وسیع و مثال های متعدد و بسیار خوبآموزش های بسیار عالی. حتی کتاب هایی برای آموزش این کتابخانه نوشته شده اند.معایب:تنها عیب آن قیمت بسیار بالای آن برای استفاده تجاری و تبلیغاتی می باشد. قیمت آن از ۵۹۰ دلار برای یک برنامه نویس شروع می شود!شرکت کارگزاری بورس مفید در ایران از این کتابخانه در وبسایت و اپ های خود استفاده می کند.این کتابخانه برای تمامی پلتفرم ها قابل استفاده است. حتی مثلا کامپیوتر های اتومبیل می توانند از این کتابخانه استفاده کنند.پشتیبانی بسیار قوی این کتابخانه از مشتریان خود باعث شده تا بسیاری از شرکت ها تمایل به استفاده از آن را داشته باشند.وبسایت:‏www.highcharts.com‏۴-D3.jsD3.jsکتابخانه اصلی ای که به معرفی آن میپردازیم، همین کتابخانه است.نام آن مخفف Data Driven Document به معنای "اسناد برگرفته از داده" می باشد. در تاریخ ۱۸ فوریه سال ۲۰۱۱ توسط Jason Davies، Mike Bostock و چند برنامه نویس دیگر برای اولین بار منتشر شد.این کتابخانه به عنوان بهترین ابزار بصری سازی اطلاعات توسط کاربران وبسایت www.slant.co انتخاب شده است. زیرا به شما امکانات Highcharts را به صورت کاملا مجانی ارائه می دهد.توسط بسیاری از سایت ها از جمله وبسایت Nike و NASA استفاده می شود.مزایا:منبع باز و کاملا مجانیپشتیبانی از تقریبا همه اشکال بصری سازی دادهاستفاده از تگ SVG و ترسیم وکتوریامکان خروجی گرفتن از محتوای تولید شدهجامعه بسایر وسیعآموزش های بسیار کاربردی و متعدد در سطح وبقابلیت دستکاری محتوا پس از تولید بخاط استفاده از DOM در HTMLمعایب:تنها عیب آن سختی در یادگیری آن بخاطر امکانات و قابلیت های بسیار وسیع آن می باشد.این کتابخانه همه چی تمام است!بهترین انتخاب برای برنامه نویسان ReactJS به خاطر استفاده بهینه از منابع می باشد.وبسایت:www.d3js.orgمنابع:https://searchbusinessanalytics.techtarget.com/definition/data-visualizationhttps://en.wikipedia.org/wiki/Data_visualizationhttps://www.slant.co/options/10577/alternatives/~d3-js-alternativeshttp://www.chartjs.orghttps://gionkunz.github.io/chartist-jshttps://www.highcharts.comhttps://d3js.orghttps://www.awwwards.com/websites/d3https://en.wikipedia.org/wiki/D3.jshttps://www.slant.co/options/10577/~d3-js-reviewhttps://medium.com/@tibotiber/react-d3-js-balancing-performance-developer-experience-4da35f912484