Tag: amcharts

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

In my previous post, I built my first treemap using Amcharts. Today I built another treemap, this one is 3 levels deep. I am unsure about the presentation of the data in this manner, it may not actually be very useful. However, since I was able to successfully explore building a multi-level treemap using the Amcharts demo I will call it a success.

In this example, I was able to get the level 1 labels to appear, which I was not able to figure out yesterday.

Source: University System of Maryland, IRIS

Today I am testing out a treemap that I made in Amcharts. I made a treemap of the students that transfer into the University System of Maryland in 2020. The top layer is the education sector, the second layer is the institution. I am still having a bit of trouble getting it to behave as I would like. I would like the second layer names to appear in the boxes, but I can not seem to get it to work as it does in CodePen. Again I got it to work in CodePen using an Amcharts demo as a model, but again I ran into an internal 500 error when I tried to transfer the code over. So I rewrote the code keeping out the pieces that were not rendering properly.

The treemap clearly shows that there are a large number of transfer students from the US Armed Forces, in part because of the University of Maryland Global Campus. I may make another treemap that excludes transfer students from the University of Maryland Global Campus.

Second Layer Hidden

Source: University System of Maryland, IRIS

I figured out how to show the size of the institutions before drill down, but not the institution names. There is likely a simple way to show the labels on a treemap in Amcharts, but I have not yet figured out how. I think that I like the first style better, but I will need to test both versions.

Second Layer Shown

Source: University System of Maryland, IRIS

UPDate

I realized while I was digging into the data further that I missed the 16,362 students that transferred from “other” out-of-state institutions and 5 students that transferred from “other” MICUA/MD private institutions. I missed them because the institution details is only provided for the top 15 institutions in each of the drill-down categories.

We use cookies to personalize content and ads, to provide social media features and to analyze our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you have provided to them or that they have collected from your use of their services. You consent to our cookies if you continue to use our website.

Preference Allow All Disable All