React-Likert

React components for rendering Likert-like visualizations within a table.

View the demo for a few examples.

Why?

While various chart options exist for this kind of survey question, none of them can easily integrate into a true table while offering key features like diverging bars and good defaults. Typically, our survey results will be presented most cleanly in a table format within which the Likert visualization is only one part alongside various other statistics. This tool makes that possible without compromising or splitting between a table and chart.

What?

I've taken a somewhat unorthodox approach to rendering: using the included <TableWrapper/>, you replace the cells in the desired column with the <CellRenderer/> it provides. This renderer creates normal table cells (with aria attributes to indicate the value of the cell for accessiblity), then draws a single svg over that entire table region and animates it with D3. This offers the benefits of a single chart alongside the stability and accessibility of a true table.

How?

A simple syntax example:

import React from 'react'
import { TableWrapper } from 'react-likert'

const scale = [
  'Strongly Disagree',
  'Disagree',
  'Undecided',
  'Agree',
  'Strongly Agree',
]

const data = [
  {
    prompt: 'Likerts are useful', 
    responded: 35,
    'Strongly Disagree': 0.3, 
    'Disagree': 0.25, 
    'Undecided': 0, 
    'Agree': 0.22, 
    'Strongly Agree': 0.23 
  },
  { 
    prompt: 'D3 is still a viable choice in React projects',
    responded: 38,
    'Strongly Disagree': 0.1, 
    'Disagree': 0.22, 
    'Undecided': 0.05, 
    'Agree': 0.45, 
    'Strongly Agree': 0.18 
    },
  // etc
]

const DivergingLikertExample = props => (
  <div>
    <TableWrapper scale={scale}>
      {
        CellRenderer => 
          <table style={{ width: '100%' }}>
            <thead>
              <tr>
                <th style={{textAlign: 'left'}}>prompt </th>
                <th style={{textAlign: 'left', width: '3em'}}>n </th>
                <td style={{width: '50%'}}> </td>                
              </tr>
            </thead>
            <tbody>
              {
                data.map(({ prompt, responded, ...values }, i) => 
                  <tr key={i}>
                    <td>{prompt}</td>
                    <td>{responded}</td>
                    <CellRenderer value={values} />
                  </tr>
              )}
            </tbody>
          </table>
      }
    </TableWrapper>
  </div>
)

Components

<TableWrapper>

Required as parent of the <table> you will draw; requires a scale prop at minium (with a flat list of Likert choices in the order you wish them displayed), but will also accept options object (see section below). Provides a CellRenderer to its child (in the render-prop or function-as-child pattern), which will be bound to this table context so that rendering of each Likert can be coordinated as a single visualization.

<TableWrapper scale={scale} options={{ usePatterns: false }}>
  {CellRenderer => 
      <table>
        ... // see below for usage of CellRenderer  
      </table>
  }
</TableWrapper>

Note that the scale is assumed to be a symmetrical Likert (unless using continuous: true option; see below), so that the positive / negative values divide either evenly or with a "neutral" middle term when the count is odd.

Example scales:

[ 'Strongly Disagree', 'Disagree', 'Undecided', 'Agree', 'Strongly Agree' ]
[ 'Very Unlikely', 'Unlikely', 'Likely', 'Very Likely' ]

<CellRenderer>

This component is not a direct export of the library, and is provided only by the TableWrapper invoked as shown above. Use it to render the entire table cell where you want the Likert, passing a value object with keys matching the scale you passed to the TableWrapper, as floats adding up to 1.

{CellRenderer => 
  <table>
    <thead>
      <tr>
        <th>prompt </th>
        <th>result </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Is this library useful?</td>
        <CellRenderer value={{"Disagree": 0.23, "Agree": 0.77 }} />
      </tr>
      <tr>
        <td>Would you recommend it?</td>
        <CellRenderer value={{"Disagree": 0.55, "Agree": 0.45 }} />
      </tr>
    </tbody>
  </table>
}

<LikertLegend>

Draws a simple legend for your Likert, for use outside of the table. Requires the scale, optionally accepts inline (Boolean; if true, renders as spans inline), a size in pixels for the squares, and any additional styles to apply.

<LikertLegend
  scale={scale}
  inline={true}
  size={12}
  style={{ textAlign: 'right' }}
/>

Options

The options object should be passed as a prop to the <TableWrapper>, and offers a number of customizations (see examples and their source code for context).

Key	Type	Description
diverging	Boolean	Whether to draw as diverging bars; if false, renders as normal stacked.
usePatterns	Boolean	By default, patterns are applied to the segments; pass false to disable.
continuous	Boolean	If set to true, a continuous scale will be drawn (no pos/neg polarity).
colors	Array	Custom colors; the order depends on the type of chart, see below.

The colors take one of two forms. For the default diverging type of chart, you must pass three items with two nested arrays:

[ neutral, [left-main, left-highlight], [right-main, right-highlight]]

e.g. ['#888', ['#800e84', '#ad72b5'], ['#006f30','#48bf6f']]

For a "continuous" chart, where the scale does not have a left / right polarity and simply increases, you only pass two values:

[ left, right ]

e.g. ['#eeeeee', '#995555']

Once again, check the examples for usage in context.