D3 Examples - Boolean Gauge to display boolean values

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Void Tank Status</title>
    <link rel="stylesheet" href="main.css">
    <!--<script  type="text/javascript" src="d3.min.js"></script>-->
    <script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<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>
    