Canvas diagram

diagrams.js

$(function(){

    var elements = document.querySelectorAll('.js-chart'),
        el = [].slice.call(elements);

    el.forEach(function (item, i) {
    
      var options = {
        value:  item.getAttribute('data-value') || 3,
        size: item.getAttribute('data-size') || 128,
        lineWidth: item.getAttribute('data-line') || 10,
        rotate: item.getAttribute('data-rotate') || 0,
        max: item.getAttribute('data-max') || 100,
        units: item.getAttribute('data-units') || "%"
      };
    
      var canvas = document.createElement('canvas');
      var value = document.createElement('span'); //блок, для значений диаграммы
      var units = document.createElement('span'); //блок, для единиц измерения
    
      value.textContent = options.value; //записываю значение,
      units.textContent = options.units; //единицы измерения
      value.classList.add('chart__value');
      units.classList.add('chart__units');
    
      var ctx = canvas.getContext('2d');
      canvas.width = canvas.height = options.size; //размер канваса
    
      item.appendChild(value);
      item.appendChild(canvas);
      value.appendChild(units);
    
      ctx.translate(options.size / 2, options.size / 2); // меням центр холста
      ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // поворачиваем на -90 deg
      var radius = (options.size - options.lineWidth) / 2; //радиус окружности
    
      /**
       * Отрисовка круга
       *
       * @param {String} color
       * @param {Number} lineWidth
       * @param {Number} value
       */
      var drawCircle = function(color, lineWidth, value) {
        value = Math.min(Math.max(0, value || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * value, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'butt'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
      };
    
      drawCircle('#efefef', options.lineWidth, 100 / 100);
    
      if (parseInt(options.value) === 0) {
    
        drawCircle('#efefef', options.lineWidth, options.value / options.max);
    
      } else {
    
        drawCircle('#555555', options.lineWidth, options.value / options.max);
    
      }
    
    });

});

Магические числа https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L9-L14
https://ru.wikipedia.org/wiki/Магическое_число_(программирование)

https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L18
value — DOM-узел, но название как для числа

https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L19
units — тоже самое

Лучше дать более наглядное название для item
не понятно, что это DOM-элемент.
https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L29

https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L29
можно сначала добавить все элементы к value, а потом вставить его в DOM дерево — экономия на layout/repaint в браузере, см:
https://habrahabr.ru/post/224187/

Комментарии построчно в https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L33 — хорошо, но что в целом происходит в этом участке?

https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L38
лучше так: "Рисует круг цветом color, шириной линии lineWidth, и радиусом (??, я прав???) value"

https://gist.github.com/dmitrylebedev/9c3390a73a5ef26c4082e5431336ae6a#file-diagrams-js-L56
что означает parseInt(options.value) === 0 ?