jquery-circle-progress | jQuery Plugin to draw animated circular progress bars | Frontend Framework library

For each .round div, there is a data-value(%) which is static at the moment, but eventually going to be dynamic. Trying to call it in my JS for if data-value <= 0.50 display the bar as red, if data-value >0.50 && data-value <=0.75 display the bar as yellow and if data-value > 0.75 display it as green to call that value and wrap the Circle function in a conditional, how would I go about that?

I tried the following and it told Cannot read property 'getAttribute' of null: I tried this.getAttribute('data-value');

This is the JS with the above "solution" but doesn't populate anything:

I saw a code on the internet and i was trying to change the size of the circle according to the screen size , i tried to place the whole JS code in if statement and a function i saw in a website, it worked but it needs to refresh the page after scaling , so is it possible to change the size of circles with changing size of screen ? I got the code from :https://codepen.io/Yago/pen/WNbxjYw