Introducing ZebraPlot: a Web-Based Viewer for Zebra Data

I’ve been in love with the Zebra MotionWorks technology since it was first introduced to FRC a few years ago. It’s amazing that it’s spreading to a number of in-season competitions this year; I can’t wait for it to be part of the official field at all events. And now with the support of TheBlueAlliance, the data is much more accessible than it’s been in previous years.

I was inspired by @MikLast’s ZEBRA Parser for Excel/Tableau that automatically pulls the data from TBA’s API and converts it to a csv, which can be viewed through Tableau. The graphs look very nice, but the workflow is a bit difficult for me. Having to manually import the data to Tableau takes effort, and means you can only view the data on a computer that can run Tableau. Confronted with this problem, I set out to make a website that can make similar graphs from the comfort of your web browser.

Here’s what I’ve come up with:

It has three settings:

  • Heatmap shows the distribution of a team’s position across the field throughout all matches they played at that event so far
  • Auto Path shows the path the robot has taken through the first 15 seconds of every match they played at the event so far
  • Playback allows you to view any match as a video, showing the robots driving around the field

Right now the only data available via the TBA API is from 2019 Chezy Champs, which is obviously for the 2019 field. So you can take a look and play around with it, but you have to imagine the data overlaid on last year’s field instead. Once competitions start, I will get rid of Chezy Champs so all events will be from the 2020 season. If anyone finds bugs, or has comments, questions, or suggestions, I’m always open.

Good luck to everyone this season!


Looks awesome. Definitely easier than mine!

Some things ive noticed:

It looks like all auto paths are constrained to only the red side. Is this by design? This is 3476’s auto path data.

The other one is the “select team” option not working after your initial choosing, and being stuck refreshing any time I want to test something else.

I can’t click anything. Latest version of Chrome, Windows 10
Image from Gyazo

Also reported #1.

running 79.0.3945.117, no issues here. See if its an extension?

Looks like data is being normalized to red

Incognito with extensions disabled doesn’t make a difference :frowning:

This is very cool! Your heatmaps were the inspiration for the initial Zebra heatmaps in our demonstration viewer, terrific to see them in your web based interface! Looks like the field map dimensions don’t quite line up with the plot dimensions of the data, but that’s an easy fix. Great job @AriMB !

Yes, this is by design. Especially with the possibility for auto routines to cross the “center line” of the field this year, it makes sense to normalize the paths to one side. This way you can also see all of the paths on top of each other instead of seeing half on one side and half on the other.

That’s what I get for releasing at 3am after making last minute GUI changes instead of waiting till the next morning to double check everything works properly. These are actually the same problem, where the overlay canvas accidentally extends to cover the menu bar instead of starting at the top of the image. Should be fixed now.


You may wish to update your event list to include Indiana Robotics Invitational for 2019 (2019iri) as I have just uploaded that events Zebra MotionWorks data.


Thanks, I just added IRI to the list of events so now there are two sample events. Once competition season starts I’ll update the event list to the final version and remove both of the 2019 events so all of the events are form the current year.