Reactive Data Visualizations

Data should tell a story. If you have an app that tracks weight loss, a website that accumulates transactions, or a survey that collects feedback it should communicate something back to your users. Data that doesn't convey a message is functionally useless. It stands to reason that if you are building something that collects data that you should be conveying something back to your users' post haste.

Reactive data is data that immediately propagates through a system. Bound through tightly coupled elements you can instantly update an entire application with new data entered on the page. This presents a unique opportunity to do something that is invaluable to your users. The reactive data visualization. A system by which you can instantly update your data constructs and the graphs, charts, and other visual cues to tell your story in real time.

Vue.js is one such framework that allows for us to bind data in this way. Typically this is used as a way to present contextual content on your page. We are going to take a look at a slightly different use-case. Throughout this article, we will build a system in which data is entered and immediately bound to a SVG to be visualized for the user. The intention is to help them understand the data in a deeper, more meaningful way. With these tools you can build robust systems of dashboards combining external data sources with their personalized data.

We'll begin by spinning up a Vue project using Vue CLI. If you are not familiar with the Vue CLI I recommend reading some of the great documentation on their site or the numerous other articles on the subject. For the purposes of this article I will assume you have a Vue project with a single route called DataViz that looks something like this

import DataViz from '@/components/DataViz'

Vue.use(Router)

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

Let's add in a dataset. The dataset we'll be using is a grading system for teachers that allows them to enter in student grades and see the scores of each student in a bar chart. A somewhat contrived yet simple example. We'll begin with just four students:

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

We are going to feed this dataset into our data method so that it is available in our component. Next this data will need to be referenced in our template. This requires two steps: Modeling the data to the input fields and populating the data in a graph. The modeling piece is standard Vue.js:

<template>
  <div id="content">
    <H1> Reactive Data with Vue </H1>
    <div class="component">
      <form>
        <div v-for="a in students">
          <input v-model="a.grade"/>
        </div>
      </form>
    </div>
  </div>
</template>

This will give us a simple form for us to edit any of the grades:

With our form in place the next thing to do is associate the data from each of these elements to a component of a data visualization. For the sake of simplicity I have selected as bar chart. All that is required is to make the width a function of the grade and the y position a function of the array index:

    <div class="component">
      <svg class="chart">
        <rect v-for="(a, index) in students" class="bar"
          height  = "20"
          x       = "0"
          :width  = "a.grade * 2"
          :y      = "index * 22" />
      </svg>
    </div>

Vue.js will take care of binding the data between the form fields and the graph. We now have a fully functional reactive chart. Add in a little styling and you should have something that looks like this:

From here I leave it up to you to create some glorious visuals using reactive data. You can find the full source for my project on my GitHub and if you are looking for inspiration you can see some of the reactive visualizations I created in my D3Vue Project. Cheers.