Learning Objectives

Quorum has multiple charts and sometimes it can be confusing to keep track of the features each bar can offer to the user. In this tutorial we will list out the list of features that each of the charts that available in Quorum is capable of.

The student will learn:

1. Students will be able to learn about an SVG and why we use them in Quorum
2. Students will be able to save their charts and access them outside of Quorum Studio
3. Students will be able to navigate through accessible capabilities using SVGs

What are SVGS? (10 Minutes)

Scalable Vector Graphics (SVG) are image files that, as opposed to storing pixels, store structure about an image, which is used to later render pixels. This distinction might sound trivial, perhaps even unimportant, but this provides us two important things. First, because SVG files store structure, we can zoom in as far as we would like without rasterization, meaning they do not look pixelated at any size. Second, because SVG files contain structure, accessibility technologies can have appropriate tags embedded, making the images much more accessible than they would be otherwise.

In Quorum, we use SVGs because they can be used for a wide variety of purposes, including professional publications, and they can also be used accessible. What this means is that every bar, dot, or other graphical symbol can be tagged with appropriate information. Further, this structure is embedded automatically by Quorum, meaning we can generate accessible charts and include them on our website. If we set this up in the right way, our images are then accessible automatically without human intervention. We do not write 'alternative descriptions' for such images because they do not work this way. Accessibility is automatic and much more robust than a description could be.

Consider why such images would be accessible. A user navigating a boxplot can access the individual boxes, which are tagged by Quorum. Boxes can be navigated. Similarly for bar charts. We can traverse the axes, the chart, the bars, groups, legend, or other components and are not reliant on a single description that tries to represent the image as a whole.

Let us also note that SVGs in Quorum are uniquely programmed to have this accessibility feature and we will demonstrate with an example of a non-accessible SVG and an accessible SVG.

This is a non-accessible SVG.

This is an accessible SVG.

Refresher on Displaying our Charts (5 Minutes)

On every chart we have created, the way we are able to view the charts we have created is with this line of code:

chart:Display()

What this does is that our chart object, whether it is a bar chart, line chart, etc. calls an action called Display(). This action uses Quorum's game engine and opens up a window via a pop-up box inside of Quorum Studio and will display our created chart. By default, the chart will be created at a default size. We can also adjust the size:

chart:Display(1080, 720)

This actually calls a different action from the original Display() action as it now requires parameters for height and width. Note that it is best to see the different sizes to be changed inside of Quorum Studio versus the web-based development environment. Let us take a few minutes to change the sizes of our charts. Let us note that along with adjusting the size of the display, it will also change the SVG size as well.

Saving Our Charts as an SVG (10 Minutes)

Now that we have our chart created and displayed, it may be cumbersome to always have to run the Quorum program in order to view our chart. However, we can actually save the chart as an SVG into our computer using Quorum Studio. We can follow this tutorial on how to save the chart onto our computers.

The location of our SVG will be within the main project folder where we have source code of the chart file we created. Please note that when writing our svg file name, we MUST have the correct file extension (fileName.svg) or else it will result in an error.

Accessibility Features with SVGs (15 Minutes)

Although accessibility with our SVGs has been discussed prior throughout these lessons, it is essential to know how to navigate with the SVGS. To know the keyboard hotkeys on our charts, we can follow this accessibility tutorial. Let us try these hotkeys on different types of charts.

Bar Chart

Line Chart

Pie Chart

Histogram

Exporting to HTML (10 Minutes)

Sometimes we might want to export an accessible chart to someone who doesn't have Quorum installed. By using the below template, we can send someone an SVG to view in their browser instead.

This HTML file is a unique resource because it allows svgs to be used in any setting when we need to show charts. To view and use this file, we have it uploaded onto an online IDE called Repl.it that allows us to host this file without the hassle of downloading a text editor. We can view the exporting svg html file and simply play around with it by adding the SVGs we have downloaded. We would want to paste our svg file code onto the designated section within the HTML file. Note, to view the file on the website we will need to click the file button and it will be contained inside the 'index.html' file.

Additionally inside of Quorum language, we have another action that allows us to go in deeper with SVGS and translate them into proper HTML. This action is called Share(File file) and we will describe it below.

End of Lesson

You have reached the end of the lesson for Data Science. To view more tutorials, press the button below or you can go back to the previous lesson pages.