JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="chart-gauge">
</div>
https://codepen.io/kazu_codepen/pen/wGmGjv

CSS

.chart-gauge {
  			  width: 400px;
  			  margin: 100px auto
  			}
  			
  			.chart-first {
  			  fill: #9FBD35;
  			}
  			
  			.chart-second {
  			  fill: #F2BA3A;
  			}
  			
  			.chart-third {
  			  fill: #FB3033;
  			}
  			
  			.needle,
  			.needle-center {
  			  fill: #000000;
  			}
  			
  			.text {
  			  color: "#112864";
  			  font-size: 16px;
  			}
  			
  			svg {
  			  font: 10px sans-serif;
  			}

JavaScript

// data which need to be fetched

var name = "azerty";

var value = 17;


var gaugeMaxValue = 100;

// données à calculer 
var percentValue = value / gaugeMaxValue;

////////////////////////

var needleClient;



(function() {

  var barWidth, chart, chartInset, degToRad, repaintGauge,
    height, margin, numSections, padRad, percToDeg, percToRad,
    percent, radius, sectionIndx, svg, totalPercent, width;



  percent = percentValue;

  numSections = 1;
  sectionPerc = 1 / numSections / 2;
  padRad = 0.025;
  chartInset = 10;

  // Orientation of gauge:
  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 20
  };

  width = el[0][0].offsetWidth - margin.left - margin.right;
  height = width;
  radius = Math.min(width, height) / 2;
  barWidth = 40 * width / 300;



  //Utility methods 

  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  // Create SVG element
  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  // Add layer for the panel
  chart = svg.append('g').attr('transform', "translate(" + ((width + margin.left) / 2) + ", " + ((height + margin.top) / 2) + ")");


  chart.append('path').attr('class', "arc chart-first");
  chart.append('path').attr('class', "arc chart-second");
  chart.append('path').attr('class', "arc chart-third");


  arc3 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc2 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)
  arc1 = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth)

  repaintGauge = function() {
      perc = 0.5;
      var next_start = totalPercent;
      arcStartRad = percToRad(next_start);
     ...