The more visualizations I make the clearer it becomes that one of the major challenges of visualizing education data is that it is a very complicated system and it is difficult to simplify. For example, I made a visualization of student transfers from Maryland community colleges to Maryland public four-year institutions. This is only a portion of college transfers. It does not include transfers from public four-year institutions to other four-year institutions. It also does not include other segments of higher education institutions such as private four-year institutions or out-of-state institutions. There is not an easy way to simplify the data.

I made this data visualization using the “chord diagram with animated bullets” demo by amcharts. I just added in my data. The demo has 6 nodes, mine has 29. The good thing is that the nodes can be clicked off so that you can examine only specific nodes. For example, you could click off all but two of the community college to compare them.

Animated BUllet Chord Diagram of Student Transfers: Maryland Community Colleges to Maryland Public Four-year Institutions

Note: I just noticed when testing the post that this chart does not look great on mobile. It works better if you turn your phone to landscape mode. I am going to explore this further.

  • BSU=Bowie State University
  • CSU=Coppin State University
  • UB=University of Baltimore
  • UMBC=University of Maryland Baltimore County
  • UMCP=University of Maryland College Park
  • UMES=University of Maryland Eastern Shore
  • UMGC=University of Maryland Global Campus
  • SMCM=St. Mary’s College of Maryland
  • MSU=St. Mary’s College of Maryland
  • MSU=Morgan State University
  • UMB=University of Maryland, Baltimore
  • BCCC=Baltimore City Community College
  • CCBC=Community College of Baltimore County
  • CSM=College of Southern Maryland
  • MC=Montgomery College
  • PGCC=Prince George’s Community College

Source: Maryland Higher Education Commission: Undergraduate transfers among Maryland institutions of higher education 2019-2020, May 2021.

chord Diagram Student Transfers: Maryland Community Colleges to Maryland Public Four-year Institutions

Note: I just noticed when testing the post that this chart does not look great on mobile. It works better if you turn your phone to landscape mode. I am going to explore this further.

I removed the bullets to reduce the visual clutter. I think I like this version a little more, although I think that I can still make improvements. To improve it I stole the best elements from the “Who kissed who in Friends” chord diagram demo. I still think that I can make further improvements, but I need to explore the coding options a bit deeper to figure out what changes I would like to make. With this version, I may be able to add in the full names of the institutions in a future version.

This drill-down sunburst chart shows the breakdown of students that transferred to the University of Maryland College Park in fiscal 2020. The first layer shows the type of sending institution: Maryland Community Colleges; other University System of Maryland institutions; Maryland private institutions, including institutions that belong to the Maryland Univerity and College Association (MICUA); and out-of-state institutions. The second layer shows the institutions. However, since the original data source only shows the top institutions in a particular category, the names of not all out-of-state institutions are captured.

This chart is based on an Amcharts demo for a drill-down sunburst chart. This particular data only had two levels, but additional levels can be added if you have hierarchical data with multiple levels. As with several other charts I have tried making with Amcharts, this chart did not work in their add-in for WordPress. I however was able to add my data using Notepad. Then I saved the document as an HTML file by changing the file extension to .HTML. Then I uploaded the file to the media library for my website. Finally, I used some HTML code on this page to creat a frame and pull up the chart. I explained that process and shared the code I used in a previous post about my experiences making charts and maps with amcharts.

The chart shows that 63.6% of transfer students came from Maryland community colleges. Half (50.3%) of those students from Maryland community colleges came from Montgomery College, which is located in Montgomery County not far from UMCP. Anne Arundel Community College, Prince George’s Community College, and Howard Community College were also the source of a large number of transfer students. The second-largest source of transfer students is out-of-state institutions. For that category none of the sending schools are dominant. The biggest category is “other”.

UMCP Transfer Students in Fiscal 2020 Drill Down Sunburst Charth

Source: University System of Maryland, IRIS

I modified one of the Amcharts demos called map with curved lines to make a Maryland map with lines. I want to show how students transfer among colleges at universities in the state using a map. I have successfully created the base map, but I have not yet figured out how to add a stroke width to the lines. I think it would be interesting to have the thickness of the line represent the number of students that transferred. I want to see if location is a factor in transferring.

I have read through the Amcharts documentation, but I still can not figure out how to change the stroke width for each individual line. I did figure out how to change the width for all of the lines at the same time, but that is not what I want to do. I noticed when I made the lines thicker the map looked really messy, so this idea might not get off the ground even if I figure out the technical details. The issue is while I am pretty good at figuring out technical issues I do not have a strong foundation in using javascript libraries. I have an 11 hour YouTube video that I am planning on watching to build a stronger foundation, but I have not yet made the time to watch it. I keep on spending my time trying out new ideas on visualizing data. I have so many data visualizations I would like to build, I need more hours in the day to build them all. I hope I will get quicker with time

Maryland Map with Lines

If I decided to go this route I just need to take the time to enter the names and longitudes and latitudes of all of the institutions. For this map I just googled the institution and “longitude and latitude”; however, I just discovered the U.S. Department of Education College ScoreCard data download has longitude and latitude information. In the future I will try using the ScoreCard longitude and latitude information.

These charts shows the student level: freshman, sophomore, junior, senior, or unclassified of students that transfer from Maryland community colleges to University System of Maryland institutions. According to the notes on the data by the University System of Maryland, the transfers are the number of undergraduates enrolled for the first time at the institution with known prior undergraduate post-secondary experience. The students may or may not have transferred credit.

Treemap Maryland Community College Transfer Students by Student Level

Source: University System of Maryland, IRIS, Maryland Community College Transfer Students by Student Level, Fiscal 2020

Drill Down SunBurst Maryland Community College Transfer Students by Student Level

Source: University System of Maryland, IRIS, Maryland Community College Transfer Students by Student Level, Fiscal 2020

I found code for a drill-down sunburst chart on Amchart’s website. I just popped in the data I had already typed up that has Bowie State Univesity spring 2021 headcount enrollment by area of origin. This version is kind of nice because you can drill down to see the details of the smaller categories. A disadvantage is that you can not see the drill-down categories until you drill down. In the future, I may be able to figure out how to show the hidden layers, but I am not sure if that will be an advantage, it might be too close together to see the categories well.

To drill down to a level click on the pie slice. This will expand the slice to the entire area of the pie. It is rather difficult to explain, it is easier to just play with the chart down below to understand how it operates.

The drill-down sunburst chart goes down to the level provided in the original data. For in-State students, the data shows to the county level the area of origin. For out-of-state students, it shows students from the major surrounding states and the District of Columbia. The states are New Jersey, New York, Pennsylvania, and Virginia. The remaining students are from other states, “foreign”, or of unknown origin.

To make the other sunburst chart look cleaner I divided the counties into five regions: Capital Region, Central Maryland, Southern Maryland, Western Maryland, and Eastern Shore. The regions and the counties assigned to each region are from the “Visit Maryland” website. For this semester Bowie State University had no students from Western Maryland counties, so that region is not on the chart. As with the other charts, I withhold judgment on the chart until I have an opportunity to play with it.

Bowie State University Drill Down SunBurst CHart

Source: University System of Maryland, IRIS, headcount by area of origin

Since I was able to get the sunburst chart to finally work properly. I decided to take a look at the data I entered. For some reason, the enrollment for winter 2021 is really low (COVID and short term?), so I decided to pull numbers of a more typical term (still COVID) to get a better idea of actual enrollment. I wrote the code in a text file, so I have not yet taken a look at the chart. However, I know from just looking at the data that Prince George’s County has the highest headcount enrollment. This is logical because Bowie State University is located in Prince George’s County.

Bowie State University Spring 2021 HeadCount Enrollment

Source: University System of Maryland, IRIS, headcount enrollment by area of origin

Getting the COde to Render Locally

In my last post, I said that I could not get the Sunburst Chart to render properly out of CodePen. I walked away with plans to go to bed. Getting ready for bed I did a few minutes of googling and found a Reddit post from three years ago that explained my issue. Apparently, since it was running locally I need to add “https:” prior to the resources in the HTML part of the code.

Below I have quoted partly how it was explained on the Reddit post. Basically, without the https:, which is sometimes assumed and can be assumed when it is running off CodePen, the computer does not know what it looking at. Thus, my code will not render. Since I am new to this and kind of just trying to make things work, I will be adding in the “https:”

Quabourter

…when you don’t use an explicit scheme, then your brower will use the scheme of your page. … This is also why this gave you problems when running locally: if your page is served under file:///some/path/to/your/file.htlm then the url// mascdn.bootstraphcdn.com/font-awesome/4/2.0/css/font-awesome.min.css resolves to file://maxcdn.bootstrapcdn.com/fount-awesome/4.2.0/css/font-awesome.min.css, which doesn’t exist. …

When I was running the code without the “https:”, it would just spin its wheels. There was no error code.

SUnBurst Chart BOWIE STate Enrollment

Source: University System of Maryland, IRIS

Thoughts about SunBurst Chart

I need to type in all my data before I can decide if I like a chart. The Sunburst chart is kind of interesting, it allows for drilling down of data, which I really like. The issue with the particular chart is that there is so much data the chart is kind of difficult to read. In my first version, I did not have the in-State enrollment divided by region and it was even harder to read.

Again I have run into the issue of not being able to get an Amcharts graphic to render on my site. I can make it render in CodePen, but when I export the “pen” it will not render locally. I also can not get it to render using the WordPress plugin for Amcharts. So I am going to park this here until I can figure out why I can not get it to render.

See the Pen amCharts 4: Sunburst Diagram with my data and regions no zero by Caroline (@New-Fish) on CodePen.

Source: University System of Maryland, IRIS

I learned how to add specific colors to an Amcharts treemap. Green indicates an increase of transfer students from that institution to the University of Maryland College Park from fiscal 2019 to fiscal 2020. Red indicates a decrease and gray steady. Not groundbreaking, but it did take a while to figure out how to do the coding and then type it all in. Not sure if this is a good or bad way to visualize the data. Like with most of these graphics, first I need to build it and live with it a while before I can judge it.

I am also not sure if it is good or bad for students from particular institutions to increase or decrease. I just used red and green because it is easy to remember.

In the future, I would probably have a range of greens and reds to indicate the scale of the increase or decrease. For today I could not decide if I should code by number or percent, so I did nothing. Also, I am still trying to figure out how to “lighten” a color in Amcharts. I could just type in a different hex color, but that takes the fun out of learning how to do the coding for Amcharts.

To get this to work I needed to add a variable called “color”. I did this by typing “chart.dataFields.color = “color”;” I then wrote “color: “red” (or whatever color) for each institution. According to the documentation by Amcharts you can use many types of systems to set the colors, from just typing the name as I did to the hex color system.

Here are the ways to add color according to Amcharts.

am4core.color(“#ff0000”);
am4core.color(“#f00”);
am4core.color(“rgb(255, 0, 0)”);
am4core.color(“rgba(255, 0, 0, 0.5)”);
am4core.color({ r: 255, g: 0, b: 0 });
am4core.color(“red”);

Color-Coded Treemap Transfer STudents

Color-coded treemap of students that transfer to the University of Maryland College Park in fiscal 2020 compared to fiscal 2019. It seems to me that the coding, by the University System of Maryland in particular for the out-of-state students changed between fiscal 2019 and 2020. Also they only show the details for the top 15 institutions in any category.

Source: University System of Maryland, IRIS Transfer Students FY 2019 and FY 2020