При визуализации данных в Интернете нам нужно думать о двух вещах: ДАННЫХ и DOM.

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

Ember — это javascript-фреймворк MVC для создания амбициозных веб-приложений. Но почему мы должны использовать Ember с D3 для манипулирования DATA и DOM? Ember предоставляет инструменты для простого управления такими вещами, как асинхронные запросы, а архитектура MVC помогает управлять сложностью.

Давайте посмотрим, почему мы используем D3 и Ember.

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

Скриншот нашей информационной панели с кольцевыми диаграммами и диаграммами с областями в реальном времени.

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

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

Продуманная архитектура и дизайн Ember — это именно то, что я искал. Теперь я мог построить проект и быть уверенным в его фундаменте. Интерактивная визуализация данных может очень быстро усложниться, но я уже мельком увидел несколько функций Ember, которые могут сгладить эти шероховатости. Я только начинаю, но хочу поделиться своими знаниями о том, как эти две технологии могут работать вместе.

Давайте посмотрим, как мы решили проблемы с Ember:

1. Управление асинхронным поведением метода d3.json

В d3.json функция обратного вызова используется для переноса всех методов, которые изменяют элементы DOM. В больших приложениях это становится громоздким, потому что трудно отделить задачи. С Ember вы перемещаете логику из обратного вызова в модель Ember, контроллер и объекты представления. Если вам интересно, читайте подробнее о преимуществах подхода Ember.

2. Производительность обработки ДАННЫХ и манипуляций с DOM

Без Ember это быстро становится проблемой с обновлениями в реальном времени, поскольку манипуляции с DOM требуют больших вычислительных ресурсов, а действия, основанные на событиях, часто отправляют избыточные сигналы. Цикл выполнения Ember является решением обеих этих проблем, поскольку это интеллектуальная система очередей, которая ограничивает изменения DOM только необходимыми и преобразует действия, основанные на событиях, в оптимизированные вызовы методов. Это также дает вам множество способов контролировать, когда и как ваши данные поступают в приложение, позволяя вам устранять дребезг, дросселировать и задерживать, когда данные попадают в DOM очень чистым и кратким способом. Это большой выигрыш в производительности благодаря изменениям, связанным с DOM, и обновлению DOM, когда это имеет смысл.

3. Адаптивные и многоразовые диаграммы с SVG

С диаграммами на основе HTML/CSS легко сделать диаграммы отзывчивыми, но с SVG многие свойства необходимо обновлять одновременно, вычисляемые свойства Ember и привязки данных обеспечивают идеальный способ сделать это.

Мы используем Ember Component, чтобы сделать диаграммы многоразовыми. Компоненты Ember строго придерживаются стандарта веб-компонентов W3C.

Веб-компоненты позволяют авторам веб-приложений определять виджеты с таким уровнем визуальной насыщенности и интерактивности, который невозможен с помощью одного только CSS, а простота компоновки и повторного использования невозможна с современными библиотеками скриптов.

Но до тех пор, пока веб-компоненты не станут стандартом для браузеров, Ember будет лучшим способом создания модульного повторно используемого кода. Для получения дополнительной информации, пожалуйста, прочитайте мою статью Повторно используемые диаграммы D3 с компонентами Ember.js.

Сосредоточьтесь на истории

Одно из основных обещаний Ember заключается в том, что он дает вам разделение задач для DATA и DOM. Вы знаете, где находится код, поэтому вам будет сложно поместить его не в то место. В сочетании с D3 он позволяет создавать гибкие, повторно используемые диаграммы и сосредоточиться на рассказе о ваших данных.

Об авторе:

Хейджин Ким (Heyjin Kim) — старший инженер полного стека, любит Ember, D3 и, конечно же, Javascript. Часто бывает в Хейджинланде с вином и собаками, и многие называют ее принцессой Эмбер.