Створення динамічних графіків швидко на D3 з Plottable.js

Безкоштовно Бібліотека D3.js є лише одним з багатьох, що дозволяє вам створення інтерактивної графіки на сторінці. Хоча D3 є, мабуть, найпопулярнішою з групи, навчитися використовувати її нелегко.

Ось чому Plottable.js є такою цінною бібліотекою. Це безкоштовний проект з відкритим кодом побудований поверх D3.js, полегшуючи для будь-кого створити Інтерактивні графіки даних з нуля.

Ця бібліотека обробляє всю брудну роботу, так що ви можете зосередитися на специфіці, такі як дані. Плотте генерує відповідний код для розміру та положення будь-якої обраної діаграми.

Кожна діаграма має свій власний компонент в Plottable, де можна скопіюйте / вставте код шаблону самостійно відновити діаграму. На момент написання статті ви можете вибрати 10 графічних стилів, включаючи гістограми, кругові діаграми, графіки розкидання та ділянки області.

Ти можеш відновлювати компоненти окремо і динамічно налаштовуйте їх налаштування. Таким чином, ви можете легко змінювати інтерактивні елементи, кольори, анімацію, позиціонування, розміри і все, що ще потрібно.

The повна бібліотека доступний на GitHub, якщо ви хочете переглянути вихідний код і завантажити копію.

Але найкращий спосіб навчитися через приклад. Ось чому ви повинні поглянути на їх зразкові графіки, які виконуються Plottable щоб побачити, як вона працює в дії.

Кожен граф повністю інтерактивний, з початковим кодом для завантаження. Якщо ви хочете відновити подібний графік, просто скопіюйте / вставте JS-код і переформатуйте в міру необхідності.

У мене є два особисті фаворити з їх сайту: Календар Heatmap за зразком плати діяльності GitHub Синхронізовані діаграми з функціями динамічного вибору.

Якщо ви ніколи не використовували D3.js, то ви будете намагатися вивчити цю бібліотеку. Особливо, тому що це написано в TypeScript, так що ви, ймовірно, також захочете підібрати це. Остаточний код скомпільовано в ES5 JavaScript, так і повинно працювати у всіх основних браузерах.

Якщо ви готові зануритися, погляньте на їх Сторінка підручників повні корисних ресурсів. Ви дізнаєтеся все, що потрібно для початку роботи з Plottable і to створювати динамічні веб-графіки з нуля.