Boolean Gauge to display boolean values

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Void Tank Status</title>
	<link rel="stylesheet" href="main.css">
	
	<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>

<script>

// This is the data you will receive for each gauge,
    var data = [
        {key: "Void NE1-VS",	value: 0, units: 'boolean'}
    ];
    var w = 400;
    var h = 200;
    var margin = {
        top: 40,
        bottom: 40,
        left: 40,
        right: 40
    };

// Adjustable margins for the gauge
    var gaugeMargin = {
        top: margin.top + 0,
        bottom: margin.bottom + 0,
        left: margin.left + 0,
        right: margin.right + 0
    };
    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;
    var gaugeWidth = width - gaugeMargin.left - gaugeMargin.right;
    var gaugeHeight = height - gaugeMargin.top - gaugeMargin.bottom;

var ordinalColorScale = d3.scale.ordinal()
		.domain([0,1])
		.range(['green','red']); // Need to use the same traffic signal colors we are using in DEAP-AI

var svg = d3.select("body").append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h);
    var chart = svg.append("g")
        .classed("display", true)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//enter()

// Create Container to hold good or bad. This is static
    chart.selectAll(".bar")
            .data([0,1])
            .enter()
            .append("rect")
            .classed(function (d, i) {
				if (i === 0){
                    return "bar good";
				} else {
				    return "bar bad"
				}
            }, true)
		.attr("x", function(d,i){
            if (i === 0){
                return gaugeMargin.left;
			} else {
                return gaugeMargin.left + (gaugeWidth/2.0);
			}
        })
        .attr("y", gaugeMargin.top/2.0)
        .attr("height", gaugeHeight)
        .attr("width", gaugeWidth/2.0)
        .style("fill", 'lightgray')
		.style('stroke-width', '2px')
		.style('stroke','white');

// Create a layer on top that changes with the data value
    chart.selectAll(".status")
        .data(data)
        .enter()
        .append("rect")
        .classed(function (d) {
            if (d.value === 0){
                return "status good";
            } else {
                return "status bad"
            }
        }, true)
        .attr("x", function(d){
            if (d.value === 0){
                return gaugeMargin.left;
            } else {
                return gaugeMargin.left + (gaugeWidth/2.0);
            }
        })
        .attr("y", gaugeMargin.top/2.0)
        .attr("height", gaugeHeight)
        .attr("width", gaugeWidth/2.0)
        .style("fill", function(d){
            return ordinalColorScale(d.value);
        })
        .style('stroke-width', '2px')
        .style('stroke','white');

// Create This is the lable for the actual gauge that takes in the channel name. I did not print the units as it is boolean.
    chart.selectAll(".bar-label")
            .data(data)
            .enter()
            .append("text")
            .classed("bar-label", true);

// Create Label for the OK
    chart.selectAll(".status-label-good")
        .data(data)
        .enter()
        .append("text")
        .classed("status-label-good", true)
		.attr("x", gaugeMargin.left + gaugeWidth/4.0)
        .attr("dx", 0)
        .attr("y", height/2.0)
        .attr("dy", -15).text("OK");

// Create Label for Not OK
    chart.selectAll(".status-label-bad")
        .data(data)
        .enter()
        .append("text")
        .classed("status-label-bad", true)
        .attr("x", gaugeMargin.left + gaugeWidth * 3.0/4.0)
        .attr("dx", 0)
        .attr("y", gaugeMargin.top + gaugeHeight/2.0)
        .attr("dy", -15).text("Not OK");

//update
    chart.selectAll(".status")
            .transition()
            .duration(500)
            .ease("bounce")
            .delay(500)
            .style("fill", function(d,i){
                return ordinalColorScale(i);
            });

chart.selectAll(".bar-label")
            .attr("x", width/2.0)
            .attr("dx", 0)
            .attr("y", gaugeMargin.top/2.0)
            .attr("dy", -10)
            .text(function(d){
                return d.key;
            });

chart.selectAll(".status-label-good")
		.style('fill',function (d) {
		    if(d.value === 0){
			    return 'white';
			} else{
			    return '808080';
			}
        });
    chart.selectAll(".status-label-bad")
        .style('fill',function (d) {
            if(d.value === 1){
                return 'white';
            } else{
                return '808080';
            }
        });

//exit()
    chart.selectAll(".status")
            .data(data)
            .exit()
            .remove();

chart.selectAll(".bar-label")
            .data(data)
            .exit()
            .remove();

chart.selectAll(".status-label-good")
        .data(data)
        .exit()
        .remove();

chart.selectAll(".status-label-bad")
        .data(data)
        .exit()
        .remove();

</script>
</body>
</html>

https://d3js.org/d3.v3.min.js