Быстрое построение динамических графиков на D3 с помощью Plottable.js

Свобода D3.js библиотека – это лишь одна из многих, которая позволяет создавать интерактивную графику на странице. В то время как D3, пожалуй, самый популярный из всех, научиться использовать его – непростая задача.

Вот почему Plottable.js такая ценная библиотека. Это бесплатный проект с открытым исходным кодом, созданный на основе D3.js, который позволяет любому создавать интерактивные графы данных с нуля.

Эта библиотека обрабатывает всю грязную работу, поэтому вы можете сосредоточиться на специфике, такой как данные. Plottable генерирует правильный код для размера и положения любого выбранного вами графика.

У каждого графика есть свой Составная часть в Plottable, где вы можете скопировать / вставить код шаблона для самостоятельного восстановления диаграммы. На момент написания этой статьи вы можете выбрать один из 10 стилей графических диаграмм, включая гистограммы, круговые диаграммы, точечные диаграммы и диаграммы площади.

Вы можете перестроить компоненты по отдельности и динамически настраивать их параметры. Таким образом, вы можете легко изменять интерактивные элементы, цвета, анимацию, расположение, размеры и все, что вам нужно.

Читайте также: 9 библиотек Javascript для создания интерактивных диаграмм

Полная библиотека доступна на GitHub если вы хотите просмотреть исходный код и скачать копию.

Но лучший способ учиться – это на примере. Вот почему вы должны взглянуть на их примеры графиков под управлением Plottable чтобы увидеть, как это работает в действии.
Каждый график полностью интерактивен, с исходным кодом для загрузки. Если вы хотите перестроить похожий граф, просто скопируйте / вставьте код JS и отформатируйте его по мере необходимости.

У меня есть два личных фаворита с их сайта: Календарь Тепловая карта по образцу деятельности GitHub доска и Синхронизированные графики с функциями динамического выбора.
Если вы никогда не использовали D3.js до этого, вы будете бороться учиться эта библиотека. Особенно потому, что написано в Машинописьтак что вы, вероятно, захотите это тоже поднять. Окончательный код скомпилирован в ES5 JavaScript, поэтому он должен работать во всех основных браузерах.

Если вы готовы погрузиться, взгляните на их Страница учебных пособий полна удобных ресурсов. Вы узнаете все, что вам нужно, чтобы начать работу с Plottable и создавать динамические веб-графики с нуля.

Читайте также: Визуализация данных: 20+ полезных инструментов и ресурсов