min/max/avg bar w. value

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-random.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;padding:20; }
    line { 
      stroke: black; 
      stroke-opacity: 0.7
    }

.background { 
      fill: rgb(129, 80, 171);
      fill-opacity: 0.1;
      stroke: black; 
      stroke-width: 1px;
      stroke-opacity: 0.1;
    }

.selected { 
      stroke: rgb(221, 42, 48); 
      stroke-width: 4px;
      fill: rgb(221, 42, 48);
      fill-opacity: 1;
      stroke-opacity: 1;
    }

.end {
      text-anchor: end;
    }

line.legend {
      stroke-width: 2px;
      stroke: #424242;
      stroke-opacity: 1;
    }

body, text {
      font-family: sans-serif;
      font-size: 13px;
      fill: #424242;
    }
    
    div {
      position: relative;
      height: 150px;
    }
    
    svg {
      margin-left: 160px;
    }
    
    span {
      font-weight: bold;
      font-size: 20px;
      position: absolute;
			top:55px;
    }
  </style>
</head>

<body>  
    <div>
      <span>Some measure: </span>
  		<svg />
    </div>
  
  <script>
    // config
    var w = 500;
    var h = 105;
    var yPos = 50;
    var height = 30;

// drawing area
    var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h)

// generate data
    var data = d3.range(30);
    data = data.map((d) => d3.randomUniform(0, 50)());

var sum = data.reduce(function(a, b) { return a + b; });
    var avg = sum / data.length;

// scales
    var xScale = d3.scaleLinear()
    .domain([0, 50])
    .range([1, w-1]);

// chrome
    svg.append("rect")
      .classed("background", true)
      .attr("x", xScale(0))
      .attr("y", yPos)
      .attr("width", xScale(50) - xScale(0))
      .attr("height", height);

svg.append("text")
      .classed("start", true)
      .attr("x", xScale(0) + 5)
      .attr("y", yPos-10)
      .text("Min")

svg.append("text")
      .classed("end", true)
      .attr("x", xScale(50) - 5)
      .attr("y", yPos-10)
      .text("Max")

svg.append("text")
      .classed("end", true)
      .attr("x", xScale(avg) - 5)
      .attr("y", yPos + height + 20)
      .text("Avg")

var legendData = [xScale(0), xScale(avg), xScale(50)];
    svg.selectAll(".legend")
      .data(legendData)
      .enter() 
      .append("line")
      .classed('legend', true)
      .attr("x1", (d) => d)
      .attr("x2", (d) => d)
      .attr("y1", (d,i) => i%2===0 ? yPos - 20 : yPos)
      .attr("y2", (d,i) => i%2===0 ? yPos + height : yPos + height + 20 )

// data
    svg.selectAll("line") 
      .data(data)
      .enter()   
      .append("line")
      .attr("x1", (d) => xScale(d))
      .attr("x2", (d) => xScale(d))
      .attr("y1", yPos)
      .attr("y2", yPos + height)

// selected value
    var selected = d3.randomUniform(0, 50)();
    svg
      .append("line")
      .classed('selected', true)
      .attr("x1", xScale(selected))
      .attr("x2", xScale(selected))
      .attr("y1", yPos - 5)
      .attr("y2", yPos + height + 5)
  </script>
</body>

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

https://d3js.org/d3-random.v1.min.js