Visualizing Personalities of the Presidential Candidates with Help from IBM

5 min readOct 26, 2020

Introduction

This week brought together a perfect opportunity for me to combine a newfound interest in data visualization with the big event of the week: the final presidential debate. This blog is not a political commentary whatsoever; it’s just a chance to share a cool API that I discovered this week and how to make good-looking charts in React using Chart JS.

The API that I’m using is IBM’s Personality Traits service. This service takes a block of text, analyzes it, and returns a personality “profile” of the text that includes percentiles of the “Big 5” personality traits, as well as percentiles for subcategories of each trait. Naturally, supplying the API with a longer block of text will yield more precise results. We’ll look specifically at how the API works in a bit.

I used Chart JS to create radar charts that display the different percentiles of both candidates’ personality traits and for each additional breakdown of the main categories into subcategories. Radar charts are a cool way to visualize data that is measured on many different dimensions, and I have personally seen them used much more frequently over the last couple years. I’ve seen them pretty commonly used to display sports data when comparing multiple players or different teams. If you’re lost and don’t know what a radar chart is, here’s one I whipped up that compares the base stats of the Gen 1 starter Pokémon:

It’s easy to see Pikachu’s speed is what makes him so great, despite his lower HP and defense. Of the three “normal” Gen 1 starters, Squirtle’s shell gives him great defense, Bulbasaur’s connection with nature gives him good special abilities, and Charmander is blessed with quickness.

And now, without further adieu, let’s jump into using these two technologies to visually represent data from the recent presidential debate.

Using IBM Personality Traits

When using the IBM Watson Personality Traits service, there are a couple of different steps to take and options to consider before getting started. You’ll need to sign up with IBM Cloud and create an instance of the Personality Traits service (they offer a free version with monthly limits, which is always a good place to start). From there, the IBM Docs provide the curl command you can use to send a .txt file and get JSON results back. If you are not a cURL user, you can use the IBM Watson node package to help you get started when using the service.

After providing the IBM Personality Traits service with a text file, the response will include percentiles for each of the Big 5 personality traits as well as all of their subcategories. Also included in the response data are consumption preferences of the author, general approximations about author media preferences, and a personality description (think horoscope description general format).

To get personality profiles for each of the presidential candidates, I parsed through the debate transcript, appended all each candidate’s responses, and used the agglomerated response as the text I sent to the Personality Traits service. I must point out now that several factors here will prevent any results from the service from being an accurate representation of either candidate’s actual personality. The primary reason is that the service only analyzes the contents of the text passed in, and not the context. It has no clue that the text is from a presidential debate where the “author” of the text is answering separate questions in a stressful interview without 100% planned answers. Furthermore, the service cannot assess either candidate’s tone, body language, and other factors that humans can look at to some extent and make inferences about personality.

For the purposes of this demonstration, where I’ll need to get the personality percentiles for the presidential candidates, here’s how those can be accessed from the returned JSON file:

const traits = bidenData.personality.map(trait => trait.name);const bidenScores = bidenData.personality.map(trait => trait.percentile);const trumpScores = trumpData.personality.map(trait => trait.percentile);

And to access sub-category scores:

const trumpSubScores = trumpData.personality.map(trait => {
   return trait.children.map(subTrait => subTrait.percentile)
});const bidenSubScores = bidenData.personality.map(trait => {
   return trait.children.map(subTrait => subTrait.percentile)
});

Using Chart JS to Visualize Data

Now that we have data, let’s use Chart JS to create radar charts for our app. We start by installing the required Chart JS dependencies to our app and requiring them in the components that will use them. The react-chartjs-2 module is a wrapper for React that allows us to easily use Chart.js in React apps.

npm install react-chartjs-2 chart.js

And in our app:

import { Radar } from 'react-chartjs-2';

Next, we’ll create the data that Chart JS requires to be passed to its components that will properly render the type of chart we specify:

const radarData = {
  labels: traits,
  datasets: [
    {
      label: 'Biden',
      backgroundColor: 'rgba(0, 0, 255, 0.3)',
      borderColor: 'rgba(0, 0, 255, 1)',
      pointBorderColor: 'rgba(0, 0, 255, 1)',
      pointBackgroundColor: 'rgba(0, 0, 255, 1)',
      pointRadius: 1,
      data: bidenScores
    },
    {
      label: 'Trump',
      backgroundColor: 'rgba(255, 0, 0, 0.3)',
      borderColor: 'rgba(255, 0, 0, 1)',
      pointBorderColor: 'rgba(255, 0, 0, 1)',
      pointBackgroundColor: 'rgba(255, 0, 0, 1)',
      pointRadius: 1,
      data: trumpScores
    }
  ]
};

Now, in React, we can render our specific type of chart as a component, and pass the data we just created to it:

const App = () => (
  <div className="App">
    <h3>Big 5 Traits</h3>
    <Radar data={radarData} />
  </div>
);

And from there, we get the following radar chart:

Creating charts for the five traits’ subcategories follows basically the same pattern. With the sub-categorical data from the JSON response, we can use it in the same way and produce additional radar charts for each trait. And for your viewing pleasure, each of the Big 5 Trait’s sub-categories chart can be found below for you to draw any conclusions you’d like to draw from (although I highly recommend no conclusions be drawn from this data).