JSFiddle - React, Tailwind, and code Playground

by niki4810

CSS

/*  svg {
    padding:10px;
 }  */

JavaScript

var dataset = [100];
//Width and height
var w = 100;
var h = 30;
var min = 10;
var max = 20;
//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
//horizontal axis
svg.append("line")
    .attr("x1", 0)
    .attr("y1", 16)
    .attr("x2", 100)
    .attr("y2", 16)
    .style("stroke", "black");

//left vertical axis
svg.append("line")
    .attr("x1", 0)
    .attr("y1", 6)
    .attr("x2", 0)
    .attr("y2", 26)
    .style("stroke", "black");

//right vertical axis
svg.append("line")
    .attr("x1", 100)
    .attr("y1", 6)
    .attr("x2", 100)
    .attr("y2", 26)
    .style("stroke", "black");

//data indicator rectangle
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", 15)
    .attr("height", 50).attr("x", function (d, i) {
    return d - 15; //Bar width of 20 plus 1 for padding
}).attr("fill", function (d) {
    if (d <= min) {
        return "green";
    } else if (d > min && d <= max) {
        return "orange";
    } else {
        return "red";
    }
});

//text indicator
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function (d) {
    return d;
})
    .attr("x", function (d, i) {
    return d - 15;
})
    .attr("y", function(d, i) {
          return "10";
          })
    .attr("font-family", "sans-serif")
    .attr("font-size", "8px")
    .attr("fill", "white");