Making a Violin Chart

The next chart that we will discuss is a Violin Plot. A violin plot is a mix of 2 plots, a box plot and a density plot. Violin plots are used to visualize the distribution of numerical data. Because the violin plot is a mixture of two plots, it can show summary statistics and the density of each variable. Let's talk about the structure of a violin plot: the white dot represents the median of the dataset, the thick black bar represents the interquartile range, and a thin black bar represents the rest of the distribution, except for the outliers. On each side of the black bar is a density estimation that shows the shape of the data's distribution. The skinnier sections of the violin plot represent a lower probability, while wider sections represent a higher probability.

The dataset that we will use in this example to create a violin plot is about the minimum and maximum lifespan of the various cat breeds.

To follow along, we can download the Cats dataset here.

Here is a snippet of what the dataset should look like:

Cats CSV
Name Minimum Life Span Maximum Life Span
Abyssinian14.015.0
Aegean9.012.0
American Bobtail11.015.0
American Curl12.016.0
American Shorthair15.017.0

Loading and Formatting

As mentioned previously, to load and read in the dataset, we will need to create a DataFrame component named frame. Using the frame, we must use the Load function and type in the file path of the insurance CSV. Recall that a CSV is a comma separated text file that holds in data.

use Libraries.Compute.Statistics.DataFrame
use Libraries.Interface.Controls.Charts.ViolinPlot

/*
    This is an example of a simple violin plot in quorum.
    The data collected is about chicks' weight that depends on their sex and the type of feed they were consuming.
*/

// create dataframe to read in data
DataFrame frame
frame:Load("../Data/Animals/Cats.csv")

Note that, we stored this dataset in a Data folder, and contained in that folder is an inner folder named Animals.

Once the data has been loaded in, we will now extract this data to use in the data chart. We will be using two functions from our frame component, AddSelectedColumns(text header) and AddSelectedFactors(text header) where the columns will be used to label our x axis, signifying the groups we are observing and the factor will be used to label our y axis, signifying the change over time. AddSelectedColumn(text header) and AddSelectedFactor(text header) take in a parameter of either the column number or the column label in the CSV file. We will be using the column number to demonstrate.

Please note that for a Violin Plot, we will only be using the AddSelectedColumns(text header) because we would like to count the totals range of the minimum and maximum lifespan of cats. AddSelectedColumns(text header) will take a string as the parameter which represents the text header in the data file. Usage is shown below:

Adding CSV columns onto Charts
Function Description Usage
frame:AddSelectedColumns(text heading)AddSelectedColumns() takes in a string that matches a column heading from our dataset. This function is used to format our axises. For this tutorial, we will be calling this function twice and extract "Minimum Life Span" and "Maximum Life Span."frame:AddSelectedColumns("heading")

We should have the following code:

// pull out selected data, for this we will be categorizing by life span
frame:AddSelectedColumns("Minimum Life Span")
frame:AddSelectedColumns("Maximum Life Span")

Now it is time to create the Violin Plot which can be done with the following code. This creates a chart object from our DataFrame component, frame. The rest of this lesson, we will be using the chart object we have created to change and format the rest of our line chart.


// using the data frame, format data by creating a violin plot chart component
ViolinPlot chart = frame:ViolinPlot()
chart:Display()

Example of loading our data and creating violin plot object

Calling the Display() function will give us a pop-up of our formatted data so far. We still need to give meaning to our data, therefore, the following steps will show us how to label and customize our chart.

Labeling the Violin Plot

In order for viewers to understand our data, labels give a clear comprehension of what is being presented. This means that we will be labeling the x axis, y axis, legend, and giving our chart a title that describes the dataset. To do so, we will call the following functions with our 'chart' object: SetTitle(), SetXAxisTitle(text title), SetYAxisTitle(text title), SetLegendTitle(text title), and SetSubtitle(text title). Here is a brief description on what each function does and what it takes in.

Labeling Charts
Function Description Usage
SetTitle(text name)SetTitle() takes in a string as a parameter, which would be the title of the chart. For this example, we will name the chart "Minimum and Maximum Life Expectancy for Various Cat Breeds"chart:SetTitle("Minimum and Maximum Life Expectancy for Various Cat Breeds")
SetXAxisTitle(text name)SetXAxisTitle() takes in a string as a parameter, which would be the label of the x axis. For this example, we will label this section "Min/Max Lifespan"chart:SetXAxisTitle("Min/Max Lifespan"
SetYAxisTitle(text name)SetYAxisTitle() takes in a string as a parameter, which would be the label of the y axis. For this example, we will label this section "Type of Extrema." chart:SetYAxisTitle("Type of Extrema")
SetLegendTitle(text name)SetLegendTitle() takes in a string as a parameter, which would label the legend of the chart. The legend identifies the separate ages for the dots. For this example, we will label the legend "Age Group" chart:SetLegendTitle("Age Group")
SetSubtitle(text title)SetSubtitle() takes in a string as a parameter which would set a subtitle under the title. This can be any short description or any other necessary information for our chart. For this example, we will label the subtitle "How long do cats live?"chart:SetSubtitle("How long do cats live?")

// label your violin plot
chart:SetXAxisTitle"Min/Max Lifespan")
chart:SetYAxisTitle("Age")
chart:SetLegendTitle("Type of Extrema")
chart:SetSubtitle("How long do cats live?")
chart:SetTitle("Minimum and Maximum Life Expectancy for Various Cat Breeds")

Note, if we would like to see the data chart so far, we can type "chart:Display()" to view it with the labels we created.

Example of labeling our violin plot

Customizing the Data Chart

Now that we have our data labeled, we can customize our data to our liking, such as adjusting the intervals, changing starting values, and changing the color. We will be playing around with all these features and to do so, we will be again, using our chart object to call these functions. The functions we will be using for this would be: SetLegendLocation(text location), SetColorPaletteToDisurbing(), SetFontSize(integer size), and FlipOrientation(). Here are brief descriptions on what each function does and how to use it.

Customizing Charts
Function Description Usage
SetLegendLocation(text location)SetLegendLocation() takes in a string as a parameter, which would be the directions, left, right, top or bottom. These directions would place the legend in the specified place. For this example, we will place the legend on the "bottom"chart:SetLegendLocation("Legend Location")
SetFontSize(integer size)SetFontSize() takes in an integer as a parameter and will set the font size on all text based on the desired input. For this tutorial, we will insert 20 as the font size.chart:SetFontSize(20)
SetColorPaletteToDisurbing()SetColorPaletteToDisurbing() takes in no parameters, but will adjust the color palette based off of yellows, browns, oranges, and greenschart:SetColorPaletteToDisturbing()
FlipOrientation()FlipOrientation() takes in no parameters, and this function will swap the places of the x and y axis.chart:FlipOrientation()

// set the legend location, choices are left, right, top and bottom
chart:SetLegendLocation("bottom")

// color palette contains yellows, oranges, browns, and greens
chart:SetColorPaletteToDisturbing()

// adjust font size by preference, here we set it to 30 pt
chart:SetFontSize(20)

// if we would like to switch the x and y axis
chart:FlipOrientation()

Example of customizing our violin plot

Congratulations, our Violin Plot is constructed! Now we can display our chart with the Display() function. There are two ways to do this, letting it automatically display and specifying a specific window size. By doing chart:Display() it will display in a size equal to the screen size. By doing chart:Display(num, num), it will display the chart in a respected constraint window size. We will be using the specified display.

chart:Display(1000, 750)

Now, feel free to clean, build, and run our program and we shortly should see a Game window pop-up. This is our Violin Plot! To view the entire code, click here to view the file.

Full Example of the Violin Plot

Final Chart

Minimum Life Span Maximum Life Span 6 8 10 12 14 16 18 20 Type of extrema Age Minimum and Maximum Life Expectancy for Various Cat Breeds How long do cats live Life Span Minimum Life Span Maximum Life Span

Further Useful Violin Plot Functions

Extra Functions
Function Description Usage
SetBandWidth(integer num)This function takes in an integer that will make a violin chart more or less exaggerated.chart:SetBandWidth(1)
IsSplit(boolean value)This function takes in a boolean that will split the violins if there are two violin charts in a group.chart:IsSplit(false)

To view more examples with charts, we can reference the Quorum Cirriculum Repository for charts.

Next Tutorial

In the next tutorial, we will discuss saving charts, which describes how to use the saving feature to save charts onto the desktop.