JSFiddle - React, Tailwind, and code Playground

by Igor Iris

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
	<span id="memoryGaugeContainer"></span>
	<span id="cpuGaugeContainer"></span>
	<span id="networkGaugeContainer"></span>

CSS

body {
    font: 10px arial;
}

JavaScript

function Gauge(placeholderName, configuration) {
    this.placeholderName = placeholderName;

    var self = this; // for internal d3 functions

    this.configure = function (configuration) {
        this.config = configuration;

        this.config.size = this.config.size * 0.9;

        this.config.raduis = this.config.size * 0.97 / 2;
        this.config.cx = this.config.size / 2;
        this.config.cy = this.config.size / 2;

        this.config.min = undefined != configuration.min ? configuration.min : 0;
        this.config.max = undefined != configuration.max ? configuration.max : 100;
        this.config.range = this.config.max - this.config.min;

        this.config.majorTicks = configuration.majorTicks || 5;
        this.config.minorTicks = configuration.minorTicks || 2;

        this.config.greenColor = configuration.greenColor || "#669900";
        this.config.blueColor = configuration.blueColor || "#84C6F6";
        this.config.yellowColor = configuration.yellowColor || "#FFE537";
        this.config.orangeColor = configuration.orangeColor || "#FF9900";
        this.config.redColor = configuration.redColor || "#E70030";

        this.config.transitionDuration = configuration.transitionDuration || 500;
    }

    this.render = function () {
        this.body = d3.select("#" + this.placeholderName)
            .append("svg:svg")
            .attr("class", "gauge")
            .attr("width", this.config.size)
            .attr("height", this.config.size);

        this.body.append("svg:circle")
            .attr("cx", this.config.cx)
            .attr("cy", this.config.cy)
            .attr("r", this.config.raduis)
            .style("fill", "#ccc")
            .style("stroke", "#000")
            .style("stroke-width", "0.5px");

        this.body.append("svg:circle")
            .attr("cx", this.config.cx)
            .attr("cy", this.config.cy)
            .attr("r", 0.9 * this.config.raduis)
            .style("fill", "#fff")
           ...