JSFiddle - React, Tailwind, and code Playground

by DohanKwon

HTML

<div id="bloodglucose" style="width:350px;height:200px;"></div>

CSS

#bloodglucose {
    background-color: #33B2EC;
}
#bloodglucose .arc {
    stroke: steelblue;
    stroke-width: 2px;
}
#bloodglucose .title {
    font: 14px sans-serif;
    font-weight: normal;
    fill: #FFF;
}
#bloodglucose .value {
    font: 45px sans-serif;
    font-weight: bold;
    fill: #FFF;
}
#bloodglucose .unit {
    font: 14px sans-serif;
    font-weight: normal;
    fill: #FFF;
}
#bloodglucose .diff {
    font: 16px sans-serif;
    font-weight: normal;
    fill: #FFF;
}

JavaScript

(function(window) {
    "use strict";
    
    var donutChart = function(opt) {
        var margin = { top: 30, left: 15, right: 15, bottom: 30 },
            width = opt.width - margin.left - margin.right,
            height = opt.height - margin.top - margin.bottom;
        
        var radius = Math.min(width, height) / 2;
        
        //
        var svg = d3.select(opt.id).append("svg")
        .attr("width", opt.width)
        .attr("height", opt.height)
        .append("g")
        .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")");
        
        // TITLE
        var title = svg.append("g")
        .append("text")
        .attr("class", "title")
        .text(opt.title);
        title.attr("x", -title.style("width").slice(0, -2) / 2)
        .attr("y", -radius - 10);
        
        // VALUE
        var value = svg.append("g")
        .append("text")
        .attr("class", "value")
        .text(opt.value);
        value.attr("x", -value.style("width").slice(0, -2) / 2)
        .attr("y", "0.15em");
        
        // UNIT
        var unit = svg.append("g")
        .append("text")
        .attr("class", "unit")
        .text(opt.unit);
        unit.attr("x", -unit.style("width").slice(0, -2) / 2)
        .attr("y", "2.2em");
        
        // DIFF VALUE
        var diff = svg.append("g")
        .append("text")
        .attr("class", "diff")
        .text((opt.diffvalue >= 0 ? "\u25B2" : "\u25BC") + " " + Math.abs(opt.diffvalue));
        diff.attr("x", -diff.style("width").slice(0, -2) / 2)
        .attr("y", radius + 20);
        
        // DONUT CHART
        var pie = d3.layout.pie()
        .sort(null);
        
        var data = [opt.value, opt.maxvalue - opt.value];
        var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");
        
        var arc = d3.svg.arc()
        .innerRadius(radius - 12)
        .outerRadius(radius);
   ...