Tag: Treemap

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 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

I have made more treemaps. This time showing transfer students to the University of Maryland, College Park in 2020.

In the first treemap, I show the level 1 names, and the level 2 names are hidden. Clicking on the level 1 names will reveal level 2.

Source: University System of Maryland, IRIS

In the second treemap, I show the level 2 names at first open. Clicking on the level 1 names will focus just on that level.

Source: University System of Maryland, IRIS

I am not sure which treemap style I like the best. I think it will depend on what I want the treemap to show. It might depend on the story I want to tell with the data.

I have found it is a little difficult to read the smaller categories of the treemaps, which might make them less useful. I expanded the height from 300 px to 500 px, but I am thinking of expanding them further to 700 px or 800 px. I also find the smaller categories sort of difficult to click on.

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