Decide What Chart Library To Use

[alexfinnarn]

React has a bevy of charting libraries that make developing interactive charts easy...or at least more integrated into a React-based project. I think Nivo provides the easiest way to view samples of what you can do, and it also looks like you mainly declare props instead of dealing with a bunch of sub-components...might be good, might be bad.

References:

• Best chart library rundown - https://livecodestream.dev/post/7-react-chart-libraries-for-your-web-projects/
• Coolest looking library - https://nivo.rocks/
• Could be something - https://formidable.com/open-source/victory/docs
• Lots of examples but docs are in Chinese - https://github.com/alibaba/BizCharts
• Most widely used but not great for quick examples - https://github.com/recharts/recharts

Acceptance Criteria

• [x] Review references above from a developer and designer approach.
• [x] Add chosen library to this project.
• [x] Check accessibility requirements
  • Nivo https://github.com/plouc/nivo/issues/126
• [x] Replace pie graphic in homepage #227 with a pie chart using the chosen library.

Next Issue

The decision here should help with the mockups and tieing the design more closely to code. I'm not familiar with many of the types of charts those libraries have in demos so I would look those over to come up with ideas vs. designing the mockups without any relation/insight to how it fits into code.

[duquennoisa]

I looked through these libraries and I think we can make any of these work for our purposes. Aesthetically I like the Nivo one the most (also not really feeling Alibaba anything these days)

I guess my questions are:

• Is the Nivo one harder to work with since its my understanding that it's set up on the server side ?
• From an accessibility stand point is there one of these what works better than the other? (like are the graphs screen reader friendly)
• Knowing that we will likely only use the most basic graphs ( Bar chart, Pie chart, etc) do you think Nivo is the best option?

Ultimately I will defer to you on which library will be the best to use since I think the functionality and architecture will be the most important factor in this choice. Its true that we could potentially find more versatile data to visualize on the report but for now I would just expect it to be similar to last year since none of us have the bandwidth to be hunting for data. Visually we will be keeping it on the simple side so as long as we can change the colors and the font size on the labels I can make it work.

[alexfinnarn]

Well, to the accessibility point https://github.com/plouc/nivo/issues/126 is the best issue I can find. So apparently it is not something they baked into the beginning.

If you don't need fancy charts, then maybe a more widely used library is better. For example, Nivo works with React but not outside of it. Some React libraries interface with general JS libraries so it is theoretically easier to use those graphics across projects that don't use React.

I will take a second look for the more simple and easier to use in multiple places libraries.

On accessibility though, what is our standard? We should have a concrete level of WCAG to adhere to.

[duquennoisa]

I completely agree. We should have a designated WCAG level to adhere to. I know we have been able to get away with not following the strict level that the University has to legally abide to because we can live under the Foundation but maybe we should make these choices working towards that more strict level?

Regardless of the specific WCAG level, I think we should aim for a graph library that can work with some standard accessibility measures. If NIVO doesn't then we should probably use something else.

[alexfinnarn]

The university has no "Strict level" and I bet a lot of web properties aren't at a high level of compliance. I can tell you for a fact that colorado.edu/ sites are only checked on launch for accessibility and then content editors can do all sorts of things after that check.

I just talked to the NextGen team to try and get some standards out of them, but I didn't get a concrete answer. I think they will have some meetings and then tell me something.

[duquennoisa]

Sounds good. I reached out to folks on the Boulder Digital Accessibility Office to see what they follow. I'll let you know what they say.

[duquennoisa]

Just heard back. Boulder standards is WCAG 2.1 AA level. If we don't find anything for Central / System we can use this as a benchmark.

That said I think we try our best given the time and resources and document where we didn't follow those standards. I know this could turn into a huge lift potentially.

[alexfinnarn]

Good to know the level wanted. I think a lot of scanners pick up issues that can be noise, but it'd be nice to have a good one to check as development progresses. I'm trying https://www.deque.com/axe/ most recently.

@duquennoisa I think the best next step is to use sample data to build out a chart that will be used in IR21. Can you give me that data and a better idea of what the data will be? And the types of "charts"?...like bar, pie, etc. This way we can compare with something that will actually be used instead of random examples.

[duquennoisa]

@alexfinnarn Just created a sample data sheet from last year's data and included a link to what the chart ended up being. Here: https://www.dropbox.com/s/df7wnwgoc6yz4pl/Sample%20data%20for%20Charts.xlsx?dl=0

The second one could be a pie chart but the category names were too long to fit around a circular object so it ended up the way it looks there. Let me know need more and I can dig up some other numbers.

I need to coordinate with Tim about what content we can expect for financial information but I know its at least going to be updated numbers on the same information from last year.

[alexfinnarn]

@duquennoisa just following up here. We chose Recharts and discussed keeping the bar chart but using a graphic for the pie chart. I will continue to update the bar chart in another issues but leave the pie chart alone.