JSFiddle - React, Tailwind, and code Playground

by Abhishek Hingu

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

.progress-meter .background {
  fill: #ccc;
}

.progress-meter .foreground {
  fill: #000;
}

.progress-meter text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

JavaScript

var width = 200,
    height = 200,
    twoPi = 2 * Math.PI,
    progress = 0,
    total = 1308573, // must be hard-coded if server doesn't report Content-Length
    formatPercent = d3.format(".0%");

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(80)
    .outerRadius(85);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var meter = svg.append("g")
    .attr("class", "progress-meter");

meter.append("path")
    .attr("class", "background")
    .attr("d", arc.endAngle(twoPi));

var foreground = meter.append("path")
    .attr("class", "foreground");
var point1 = meter.append("circle").attr("r","2").attr("d",arc.endAngle(twoPi * 1));
var text = meter.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".35em");
foreground.attr("d", arc.endAngle(twoPi * 0.75));
text.text(formatPercent(0.75));