See What I Mean?: Data Visualization in WordPress

Joni (presenter): Hi, everyone. I'm very excited to speak with you. I'm Joanie Hallibi. My pronouns are she/her and I'm a senior web developer with Georgetown University. I'll speak on data visualization and WordPress. If you have questions, I won't be able to take questions, but please use the attendees’ channel in Slack, I understand the Q and A isn't working, so direct questions to the attendee’s channel and I'll answer as soon as I can.

Let's dive in. Let's set up the scene. Say one of your colleagues from the admissions office wants to know how many people are coming back next year. They give us a giant spreadsheet, like this. You have students, levels, etc. You can collate to a single graph. What is the quest? We display this and we use a custom Gutenberg block. We have three steps to accomplish this. First, input data to WordPress, process the data. We have something usable to make the graph. We need to actually display an accessible and responsive graph.

First up, let's import the data. What we really want to do is have our blocks store URL of Google sheet to grab the data. It's on-demand as Google is updated and our block has up-to-date information. In Gutenberg block, have text control in edit function, label, help, and our value is the URL of Google sheet. We'll throw in a non-change function to make sure The Google sheet URL is saved.

Step two, extract the data. The data can change from a Google sheet, so we need the block, dynamic. The save function isn't part of JavaScript, but part of PHP, which renders, processes and stores the data.

First, we need to have a render function call the Google API to get the data. We call Google API and tell it what the sheet is, what we extract from the URL the block is storing. An implementation I use− I have a content editor tell me the range of values from the spreadsheet. There's only one column with the list of class years for the students. That range can store whatever the column ID is.

Then, we also want to have your block store the API key. You can have a content editor put it in the block itself or a separate setting page. I'll call out a scope for this talk. But you can set up a settings page with the content editors that allow an API key so Google can grab that data.

Now we have the data, we need to process it so we can graph it. The first thing we need to do is convert the data to something PHP can read, using this function. Once we do that, we get an array that looks like that. We have a parent array with a few other things. The part of the array we want is stored in values item, a subarray that is going to be an array of data. There's a lot of nested arrays, which is why we need to do more work to process the data.

So, step two. Let's remember our problem. We have an array that gives us a list of all of the class years of our students. What we need is a count of how many students coming in from each class year. So, we need to loop through our array. We are going to create a second array that stores the data that we use for the graph and loop through the array of values we have from our Google sheet. This loop says, "Do we already have an account for each class year set up in my new data array?" If I do, if I've counted a freshman, sophomore, junior, senior, I add one to the account. I create four bins, one for each class year. I am adding ONE to each bin to get a total sum of how many students are coming in from each class year.

If we want to look at this in code, this is now my processed array and what it looks like. It's much, much cleaner. A single, non-nested array with four items, one for each class year, and the value of each item is the count. I have 8 of everyone and 12 juniors coming back.

Chapter three. This is the fun part. We'll make an accessible and responsive graph from this massage data. It looks like this. [Showing.] We'll actually create our own SVG by hand. It's not scary, I promise. We'll use it to create the graph. First, set up SVG. We have the SVG parent and it'll have a width of 100%. I want it to take up the full width. I calculate the SVG height, which we'll get to in a bit.

For accessibility, I have title and description in SVG, information that is read by a screen reader if you can't physically see the chart. The screen reader will read this data here. The SVG height is going to be automatically calculated based on the size of data rate times how high I want each bar and how much gap between each bar.

Step two. I need to create x and y axes. These are SVG elements. They aren't giving me any information about the data, but there for visual purposes. My y-axis goes up and down and is offset to leave room for labels. x1 and x2 are offset. y1 is at 0. y2 is the height of my graph.

Basically, I will do the same thing with my x-axis but rotated 90°. Step three. Let's create the bars. This is the super fun part.

So, I want to create a group for all of my bars so that screen readers or anyone who is trying− any technology parsing the SVG know the bars go together. I give them a list. The bars are a list of a bunch of data, unordered, where the bars are part of the list but each bar is the list item. A spoiler alert for later on.

For each bar, we loop through our array of data. We create a group for each bar. That's a list item. Each of these groups for the individual bar is going to contain SVG element for the bar, the text table for the bar, and a description. That's for the screen reader if you need more context of definition for each bar. "This is the bar for the freshman class, generally first-year students, etc." Each bar looks like this. I have a child group in my parent list group. This child group has the role of list items.

In HTML, it's LI to UL. I can give each group an RA label. I like to put the label and data information in The RA label. This allows screen readers to read what exactly is going on with the particular bar.

Giving the group a tab index of zero gives the group the tab function in the graph. I can have my description here. If I need more information, I have bar and label elements. My bar is just a rectangle. I create a rectangle with a role of presentation. I offset it to give myself a place for the label.

The y value is interesting, the number of bars so far. My bars don't overlap. Times bar height and graph. The width is based on the value and the bar height is the set number.

My bar's width is calculated to be the value divided by maximum value times 100. What I'm trying to do is set the width of the bar as a percentage of the students in the class level. I have my text elements. That is setting it to be the label of the bar. I set that to be on the left-hand side of my graph.

Altogether, I have an outer group of my list, the inner groups with the list items, and my description. My bar and text value for the label. That goes and goes and goes. We loop through the data. This is the meat of the graph.

Then we get a graph that looks like this. It's beautiful and accessible. We set the bar widths as percentages so it's responsive and usable in most cases, which is our goal. That's it. Thank you so much. Feel free to follow me on Twitter. If you Tweet at me, I'll respond, eventually. I'm a little slow. The slides are available at this URL. I'll Tweet it out. Please leave comments in the Slack attendees’ channel. Thank you so much.