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


https://www.aparat.com/v/Gj2vB

بصری سازی داده ها مبحث تقریبا جدیدی است که به به تصویر کشیدن داده ها و روابط بین آنها اطلاق می شود.

در زمان انسان های اولیه، از ترسیم اشکال بر روی سنگ ها به منظور "تعامل بصری" یا Visual Communication استفاده می شده است. با پیشرفت بشر و گسترش انواع تعاملات، اکنون ما از بصری سازی داده ها برای نشان دادن اهمیت داده ها و روابط بین آنها، و همچنین تبدیل این مهم و ارتباط از حالت متنی که غیر قابل فهم به آسانی است، به حالت تصویری که سریعا بتوان آنرا فهمید و درک کرد، استفاده می کنیم.

امروزه از بصری سازی داده ها در موارد زیر به ترتیب اهمیت استفاده میشود:

  • آمارگیری های دولتی مانند سرشماری و...
  • بورس و تحلیل گران بورس
  • تحلیل های بانکی
  • تحلیل حساب های شرکت ها
  • تحلیل های وبسایت ها مانند آمار بازدید، آمار دانلود و...
  • استفاده در ارائه ها و کنفرانس ها (استفاده علمی-تحقیقاتی)
  • و...


در این پست من قصد دارم که ۴ تا کتابخانه (یکی اصلی و سه تا برای مقایسه) برای بصری سازی داده ها در محیط وب را به شما معرفی کنم. پس با این پست همراه باشید.


‏۱-Chart.js

Chart.js
Chart.js

مزایا:

  • منبع باز و مجانی
  • ۸ مدل بصری سازی مختلف با قابلیت استفاده همزمان
  • استفاده از تگ canvas در HTML5 با سرعت بسیار بالا
  • کاملا تعاملی (دارای انیمیشن، بازترسیم چارت در صورت تغییر اندازه)
  • حجم بسیار پایین کتابخانه
  • آموزش ها و مستندات بسیار عالی


معایب:

  • استفاده از مدل ترسیمی bitmap pixel-based


وبسایت:

‏www.chartjs.org


‏۲-Chartist.js

Chartist.js
Chartist.js

مزایا:

  • منبع باز و کاملا مجانی
  • حجم بسیار کم کتابخانه! (۱۰ کیلوبایت gzip شده)
  • استفاده از فرمت SVG و ترسیم وکتوری
  • بدون وابستگی و بسیار سبک و کم حجم
  • چارت های کاملا تعاملی که با اضافه کردن مقادیر تغییر می کنند.
  • مستندات و مثال های نسبتا خوب بر روی وبسایت
  • قابلیت استفاده از انیمیشن


معایب:

  • انیمیشن ها در اکثر مرورگر ها پشتیبانی نمی شوند.


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


وبسایت:

‏www.gionkunz.github.io/chartist-js


‏۳-Highcharts

Highcharts
Highcharts

مزایا:

  • منبع باز و مجانی فقط برای استفاده غیر تجاری و تبلیغاتی
  • پشتیبانی از تقریبا همه اشکال بصری سازی داده
  • مورد اعتماد و استفاده شده از ۸۰ کمپانی از ۱۰۰ کمپانی بزرگ دنیا. مثلا facebook، twitter، Apple، Visa و... از این کتابخانه استفاده می کنند.
  • پشتیبانی از تقریبا تمام مرورگر های مدرن (حتی IE6 به بالا)
  • جامعه بسیار وسیع و مثال های متعدد و بسیار خوب
  • آموزش های بسیار عالی. حتی کتاب هایی برای آموزش این کتابخانه نوشته شده اند.


معایب:

  • تنها عیب آن قیمت بسیار بالای آن برای استفاده تجاری و تبلیغاتی می باشد. قیمت آن از ۵۹۰ دلار برای یک برنامه نویس شروع می شود!


شرکت کارگزاری بورس مفید در ایران از این کتابخانه در وبسایت و اپ های خود استفاده می کند.

این کتابخانه برای تمامی پلتفرم ها قابل استفاده است. حتی مثلا کامپیوتر های اتومبیل می توانند از این کتابخانه استفاده کنند.

پشتیبانی بسیار قوی این کتابخانه از مشتریان خود باعث شده تا بسیاری از شرکت ها تمایل به استفاده از آن را داشته باشند.


وبسایت:

‏www.highcharts.com


‏۴-D3.js

D3.js
D3.js


کتابخانه اصلی ای که به معرفی آن میپردازیم، همین کتابخانه است.

نام آن مخفف Data Driven Document به معنای "اسناد برگرفته از داده" می باشد. در تاریخ ۱۸ فوریه سال ۲۰۱۱ توسط Jason Davies، Mike Bostock و چند برنامه نویس دیگر برای اولین بار منتشر شد.

این کتابخانه به عنوان بهترین ابزار بصری سازی اطلاعات توسط کاربران وبسایت www.slant.co انتخاب شده است. زیرا به شما امکانات Highcharts را به صورت کاملا مجانی ارائه می دهد.

توسط بسیاری از سایت ها از جمله وبسایت Nike و NASA استفاده می شود.


مزایا:

  • منبع باز و کاملا مجانی
  • پشتیبانی از تقریبا همه اشکال بصری سازی داده
  • استفاده از تگ SVG و ترسیم وکتوری
  • امکان خروجی گرفتن از محتوای تولید شده
  • جامعه بسایر وسیع
  • آموزش های بسیار کاربردی و متعدد در سطح وب
  • قابلیت دستکاری محتوا پس از تولید بخاط استفاده از DOM در HTML


معایب:

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


این کتابخانه همه چی تمام است!

بهترین انتخاب برای برنامه نویسان ReactJS به خاطر استفاده بهینه از منابع می باشد.


وبسایت:

www.d3js.org


منابع: