Реактивные визуализации данных

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

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

Vue.js – это одна из таких фреймворк, которая позволяет нам связывать данные таким образом. Как правило, это используется как способ представить контекстное содержание на вашей странице. Мы собираемся взглянуть на немного другой корпус использования. На протяжении всей этой статьи мы построим систему, в которой данные вводятся и сразу привязаны к SVG для визуализации для пользователя. Намерение состоит в том, чтобы помочь им понять данные более глубокими, более значимыми способами. С помощью этих инструментов вы можете построить надежные системы приборных панелей, объединяющих внешние источники данных с их персонализированными данными.

Мы начнем с вращения Vue Project, используя Vue Cli Отказ Если вы не знакомы с Vue CLI, я рекомендую прочитать часть отличной документации на их сайте или многочисленные другие статьи по этому вопросу. Для целей этой статьи я предполагаю, что у вас есть Vuue Project с одним маршрутом под названием Dataviz, который выглядит что-то подобное

import DataViz from '@/components/DataViz'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'DataViz',
      component: DataViz
    }
  ]
})

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

students: 
       [{
          "name": "Jack",
          "grade": 100
        },
        {
          "name": "Mary",
          "grade": 50
        },
        {
          "name": "Jim",
          "grade": 45
        },
        {
          "name": "Jill",
          "grade": 95
        }

Мы собираемся накормить этот набор данных в наш метод данных, чтобы он был доступен в нашем компоненте. Далее эти данные должны будут ссылаться на наш шаблон. Это требует два этапа: моделирование данных на поля ввода и заполнение данных в графе. Часть моделирования является стандартным Vue.js:

Это даст нам простую форму для нас для редактирования любых оценок:

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

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

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

Оригинал: “https://dev.to/ignoreintuition/reactive-data-visualizations-b6e”