New Component: Data Visualization Library

[joesnellpdx]

From @lea10up

It would be nice to have more robust, dynamic data visualization options to replace static image graphs like this:

Having standardized components for this type of content allows for further ways animation can be incorporated on a site and increase interactivity. Depending on the library, a standard data visualization starting point can also potentially improve accessibility (compared to static images).

---

Let's investigate and vet some third party data viz libraries for this one. Whomever picks this up, please work with @lea10up to identify UI features we're looking for in the library, then vet for a11y compliance and/or how our implementations need to be structured to ensure compliance.

[Firestorm980]

Talking with @lea10up, the main idea here would be to support a variety of charts, not just the one pictured. An example page from a recent project:

There are multiple types of charts / graphs shown here. A quick list:

• Bar
• Pie / doughnut
• Line (filled and unfilled)

Some others not pictured:

• Geo / Map
• Scatter
• Bubble

I think we'd want to support more than these types, if possible. There are multiple libraries that could accomplish this, but some names that popped up recently in Slack conversations around this were:

• https://www.chartjs.org/
• https://www.highcharts.com/ (paid, may be an issue)
• https://d3js.org/

Accessibility for these libraries in some cases amounts to making sure that the chart is labeled and has an appropriate caption to give the gist of the data back to the user. Highcharts has more specific attention to accessibility. Additionally, we may want to look into supplementing with creation of a table in some cases.

In our chat, @treighton mentioned something for the roadmap here of being able to import data from CSV and potentially other file types to make creating these in the block editor simple. We can probably accomplish this more towards the end if and when this becomes a block, but worth doing some preplanning for.