AmCharts has updated its library to version 5. AmCharts5 includes updates to their Venn diagram library. Since I love Venn diagrams I spent the morning figuring it out. I created the Venn diagram below to show HS completers. It took me a while to figure out the syntax. Overall I think I was mostly able to make it do what I wanted to do. However, I since haven’t figured out how to put a category entirely in another category. For example, I would like a big circle with all HS completers that includes HS graduates and HS certificate students.
The Venn diagram below is of Maryland public school students that completed high school. It shows the overlap of how the students that: (1) earned a completion certificate (for completing a special education program); (2) met the University System of Maryland (USM) requirements); (3) met the Career and Technical Education (CTE) requirements; and/or (4) met the regular diploma requirements. “Normal diploma” is just to indicate students that did not earn either a USM or CTE credentials in addition to their high school diploma. This is primarily for my own understanding of the data and to learn web-based data visualization techniques.
Now that I have made this visualization I am not sure if using a Venn diagram is better than a Sankey diagram for this data. I would also like to add additional information to the chart such as a title and to have the actual numbers displayed on the chart. As far as the data goes, I wish that I had information about the post-high school behavior of these different groups of students. According to this data, about 60.5% of high school completers met the USM requirements.
The colors used below are not intended to mean anything beyond looking nice. It took me a while to figure out the colors. Once I figured it out I just used a rainbow with my only intention to combine blue and yellow to make green.
StateWide High School CompLetion Venn Diagram
Source: Maryland State Department of Education, 2019 High School Completion
Earlier I wrote about trying to make a Venn diagram to show that high school graduates that meet University System of Maryland (USM) requirements and Career Technology Education (CTE) requirements were a subset of all high school graduates. I could not get the Venn diagram to render correctly. Today I figured out the correct syntax. I had to define areas in the Venn diagram that I did not actually want to show. That is, I had to define “USM HS Grads” and “CTE HS Grads” and “Both Requirements Grads” even though I do not want them to render separately in the chart. I know that is not the best explanation, but I want to just quickly make this diagram live to see if how it works on a live webpage. I will revisit this Venn diagram again soon with further refinements.
This post is mainly to show that I learned how to code a Venn diagram in Amcharts. However, I still have a ton to learn about how to code the data and what the data means. The Venn diagram is not one of the preset charts available in the Amcharts WordPress plugin. That said, with a little trial and error I was able to copy one of their examples and make it work. The main challenge was figuring out the correct resources to load.
I got data from the Maryland State Department of Education about high school completion for the class of 2019. It shows the number and percentage of students that left high school with a variety of qualifications. Three of the categories are University System of Maryland (USM) requirements, career technology education (CTE) requirements, and the requirements for both. Generally, the USM requirements are completing the credits required for admittance to a USM institution.
To be a CTE completer, a student must complete an approved CTE course of study. CTE programs are typically about 4 credits.
Since MSDE publishes the number of students in the State that complete both the USM and CTE requirements I can build a Venn diagram. The data below is for the entire State of Maryland. It is the first Venn diagram I have built using Amcharts. I need to explore more of the options. However, since it is easy for me to break the functionality of the charts using Amcharts, I will explore the functionality slowly and iteratively.
Blog | Caroline Boice
As I figure out the program you need to click on the actual post or this link to see the chart. I am working on this issue.
Future Venn Diagrams
It is sad that I probably will not be able to create a completely accurate Venn diagram for all of the high school completer options because I do not know how the categories overlap, but I will probably play with trying to set up a "representation" with a bunch of stated assumptions.
Update: Technical Issues
As I learn about these computer programs I am bound to run into technical issues because I am coming at this data from a public policy and scientific background. My last formal coding training was in 1992 or so when I was in middle school. As I was making these charts I ran into the (documented) issue of needing to use a specified placeholder value for the charts so that they show up properly. I failed to do that for a few charts because I was copying pieces of code from other places. I think I figured out that issue after a bit of trial and error. Now I've run into the problem of a few of the Amcharts not properly rendering when as part of the blog stream, but will render as part of an individual post. I have made a workaround of explaining the issue and posting a link to the post, but I am going to continue to explore a more elegant solution. The issue is probably I am missing a piece of code.