Multi-Charts, Colors, and Options
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.
- Students will be able to change colors within graphics
- Students will be able to separate their charts
- Students will be able to identify which unique functions they can use with each chart type
Set up Scatter Plot (10 min)
A lot of what we will talk about goes beyond just scatter plots, but since it would take a while to experiment with every feature on every graph, we'll do the highlights instead. Scatter plots have many interesting features, so we're going to start by getting one set up with the Dogs dataset. If you want more information about how to create a scatter plot, look at our Scatter Plot Tutorial.
Making a basic scatter plot
Features of the Quorum Charts (10 Minutes)
Below are the various chart features, some of which are universal, and others that are chart specific. Take a few minutes to scan over them briefly, but don't worry about going through everything in close detail.
Here are the options that are available for all of the charts that are implemented in Quorum: SetTitle, SetSubtitle, SetXAxisTitle, SetYAxisTitle, SetXAxisMinimum, SetYAxisMinimum, SetXAxisMaximum, SetYAxisMaximum, SetXTickInterval, SetYTickInterval, SetColorPalette, SetLegendLocation, SetLegendTitle, SeparateBySeries, SeparateByFactors (Note: Histograms and Line Charts do not have this).
|Function||Bar Charts||Histograms||Pie Charts||Line Charts||Scatter Plots||Box Plots||Violin Plots|
|StackBars||StackBars() will stack bars on top of each other when a group contains multiple bars. They are not stacked by default.|
|SortByBarSize||SortByBarSize() takes in no parameters and will sort the bars from largest bar to smallest bar. Note that it only will work with one factor added.|
|OverlayBars||OverlayBars() will overlay bars on top of each other when a group contains multiple bars. They are not overlayed by default.|
|SetBinWidth||SetBinWidth() will override the auto-calculated bin width with a user determined interval.|
|SetDonutHolePercent||SetDonutHolePercent() takes in a decimal value which will adjust the size of the hole in relation to the size of the pie chart. Larger percentages will make the hole bigger and smaller percentages will make the hole smaller.|
|SetLineDensity||SetLineDensity(number size) takes in an integer as a parameter and will adjust the thickness of the lines within the chart.|
|SetPointDensity||This function takes in an integer that will adjust the size of the dots of the scatter plot.|
|HideOutliers||This function does not take any parameters and it will hide the outliers from the chart.|
|SetBandWidth||This function takes in an integer that will make a violin chart more or less exaggerated.|
|IsSplit||This function takes in a boolean that will split the violins if there are two violin charts in a group.|
Adding Features to Scatter Plot (10 minutes)
Let's now try adding some features to our scatter plot from before. Scatter plots have the ability to change the point size with SetPointDensity(), as well as changing the axis limits, legend location and colors. Try increasing the point size, moving the legend to the top and changing the colors. For a comprehensive list of all the available colors, look at our Color Accessibility page. Besides that, you can play around with any of the numbers to see how it changes the chart.
Adding some features to the scatter plot
Separate by Factor and Separate by Series (30 Minutes)
In this part of the tutorial we will be discussing two ways of separating the charts from one another. These functions are SeparateByFactor() and SeparateBySeries(). SeparateByFactor() will separate the chart into a grid of subcharts based on the bar groups. It takes in an integer as the number of columns in the grid. If empty, it results in a single-column grid. SeparateBySeries() will separate the chart into a grid of subcharts based on the legend (series). It takes in an integer as the number of columns in the grid. If empty, it results in a single-column grid.
To learn more about which inputs can be used for each function, read our Chart Separation tutorial.
Series Separation For Scatter Plot (10 Minutes)
We have 2 columns (numerical) and 1 factor in this plot. By following the table above, we know that we can use SeparateBySeries. Without SeparateBySeries, the data can be less clear, since the only other way to show it is color coding.
Here we can use SeparateBySeries to present the data clearly, and 10 showcases a separation that is easy to understand and not cluttered. It will split the interval into 10 units, and there will be 10 elements in each row.
Splitting the scatter plot for clarity
Relevant Common Core StandardsWe use the following website for common core standards in relation to histograms and measurements of distribution.CCSS.MATH.CONTENT.HSS.ID.A.1: Represent data with plots on the real number line (dot plots, histograms, and box plots).CCSS.MATH.CONTENT.HSS.ID.B.6: Represent data on two quantitative variables on a scatter plot, and describe how the variables are related.
In the next tutorial, we will discuss Box Plots, Violin Plots, and Understanding Dispersion, which describes Understanding statistics and how to calculate important values using Quorum..