Built with blockbuilder.org
xxxxxxxxxx
<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