MatchData: Plots and Graphs Visualization

[JosiahFu]

We currently present most of our data in tables (specifically in the MatchData application), which provide very good insights into several key data points that our strategists need to know before a match. However, presenting a large table to strategists/drive teams can be hard to process because there is so much information they need to take in.

As data scientists, we not only want to compute important metrics that tell us how good/bad teams are, but we also want to present that data in the most effective way possible. In this issue, we want to experiment with different graphing libraries in our apps, to see if there is a better way to convey and present the data that we've recorded and calculated.

For this issue, we want to do a few things:

• [ ] Research and find a few plotting libraries available for React. We haven't done anything with plotting libraries yet, and we want to find a good library that can help us in the future as we continue to develop our app
• [ ] Look at the metrics we are currently showing in the MatchData table, and brainstorm some plots/graphics that we can use to show off this data in a more visually-focused way. This could include bar graphs, box plots, heatmaps, etc. that make it easy to see data without needing to know the numbers
• [ ] Look through the data we have in the database; is there any way we can wrap this data into plots instead of adding rows to the data table?

This issue is very exploratory and doesn't have solid outcomes - be creative and try things out! Make sure to record what you try out, either in a README document in the repo, in the comments of this issue, or in a Google doc linked to this issue. This issue is vague now but will help us add more graphics and update how we show data in the future.

[NathanDuPont]

A few libraries I've found while looking (feel free to use these but try to do some looking for others that I missed. These are also my opinions, so PLEASE challenge them):

react-financial-charts (https://github.com/react-financial/react-financial-charts)

• pro: very nice support for financial plots (candlestick + line plots)
• pro: easy to read, lots of utility
• con: only supports candlestick + line, not many others. Not super helpful for non-financial data

recharts (https://recharts.org/en-US/examples/SimpleLineChart)

• pro: most number of possible plots
• pro: most amount of customizability
• con: more complex than other options
• con: doesn't quite look as good as other options

chartjs (https://www.chartjs.org/docs/latest/samples/information.html)

• pro: easier to use than recharts, still lots of plots
• pro: good amount of customizability

plotly (https://plotly.com/javascript/)

• pro: most interactive out of all options
• pro: lots of more unique plots (plus all standard plots)
• pro: same library available across many languages
• con: not as nice looking as others