Category: Chart Test

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

After my last map that shows public schools that have ever had an active outbreak, I got curious about what it would look like to just show schools with current active cases with trend information. Please see the notes for the data in the previous posts.

My kids return to school in person tomorrow so I have been thinking about public school-associated outbreaks all day and different ways to graph the data available.

This map shows schools that have had a school-associated outbreak on 25 August 2021 or 1 September 2021. The circle shows the max size of the outbreak. I first tried sizing by the 1 September 2021 outbreak size, but that eliminated the schools that had an outbreak on 25 August but had zero cases on 1 September. The color shows if the cases at the particular school are increasing, staying the same, or decreasing. The tooltips show the number of cases on each day and the “type” of school based on the NCES School Directory. The two cases at Success Program on 1 September in Frederick County is not recorded because it does not have an address in the NCES School Directory. I will have to decide whether to add the Success Program or to just footnote it.

I also have to decide if I want to add private schools in the future. I would need to look up the address for each private school.

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