VBP Mock Up

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body{
      margin:15px;
    }
    
    svg{overflow:visible;
    margin:40px;}
  </style>
</head>
<body>
  <script>
    
    var measures = [{"id":0,"zscore":-0.5, "pts": 0},
                    {"id":1,"zscore":0.1, "pts": 1},
                    {"id":2,"zscore":1.2, "pts": 5},
                   {"id":3,"zscore":1.2, "pts": 5},
                   {"id":4,"zscore":1.2, "pts": 5},
                   {"id":5,"zscore":1.2, "pts": 5},
                   {"id":6,"zscore":1.2, "pts": 5}]
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 650)
      .attr("height", 200)
		
    var thresholds = d3.range(10).map(function(d){return d+1});
    console.log(thresholds);
    var colorScale = d3.scaleSequential(d3.interpolateOrRd)
    	.domain([1, 10])
    
    var pad = 10;
    
    var scaleBandX = d3.scaleBand()
    	.range([300,600])
    	.domain(thresholds)
    
    var scaleBandY = d3.scaleBand()
    	.range([pad,200-pad])
    	.domain(measures.map(function(d){return d.id}))
    
    var g_elems = svg.selectAll(".g_bottom").data(measures)
    g_elems.enter()
    	.append("g")
    	.attr("class","g_bottom")
			.attr("transform",function(d){return "translate(0," + scaleBandY(d.id)+")"})
    	.each(function(){
    	})
    
    svg.selectAll(".g_bottom").append("rect")
    .attr("width",600)
    .attr("height",scaleBandY.bandwidth())
    .style("stroke","white")
    .style("stroke-width","1px")
    .style("fill","rgb(240,240,240)")

var rects = svg.selectAll(".g_bottom").selectAll(".legendrect").data(thresholds)
    rects.enter()
    	.append("rect")
	    .attr("class","legendrect")
    	.attr("x", function(d){return scaleBandX(d);})
			.attr("width", scaleBandX.bandwidth())    	
			.attr("height", scaleBandY.bandwidth()) 
    	.style("fill", function(d){return d3.color(colorScale(d));})
    	.style("opacity",.6)
    
    svg.append("line")
    .attr("x1",0)
    .attr("x2",0)
    .attr("y1",0)
    .attr("y2",200)
    .style("stroke","black")
    .style("stroke-width","2px")
    .style("fill","none")    
    .style("z-index",-99)
    
    svg.append("line")
    .attr("x1",300)
    .attr("x2",300)
    .attr("y1",0)
    .attr("y2",200)
    .style("stroke","black")
    .style("stroke-width","2px")
    .style("fill","none")    
    .style("z-index",-99)

svg.append("line")
    .attr("x1",600)
    .attr("x2",600)
    .attr("y1",0)
    .attr("y2",200)
    .style("stroke","black")
    .style("stroke-width","2px")
    .style("fill","none")
    .style("z-index",-99)
          
    var g_elems_top = svg.selectAll(".g_top").data(measures)
    g_elems_top.enter()
    	.append("g")
	    .attr("class","g_top")
			.attr("transform",function(d){return "translate(0," + scaleBandY(d.id)+")"})
    	.each(function(){
    	})  
    
    var labels = svg.selectAll(".g_bottom").selectAll(".legendtext").data(thresholds)
    labels.enter()
    	.append("text")
	    .attr("class","legendtext")
    	.attr("x", function(d){return scaleBandX(d) + scaleBandX.bandwidth()/2;})
    	.attr("y",scaleBandY.bandwidth()/2)
			.text(function(d){return d}) 
    	.style("dominant-baseline","central")
    	.style("text-anchor","middle")
    	.style("fill", function(d){return d3.color(colorScale(d)).darker(2);})    
    
    
   svg.append("text")
    .attr("x1",300)
    .attr("x2",300)
    .attr("y1",0)
    .attr("y2",200)
    .style("fill","black")
    
    svg.append("text")
    .attr("x",300)
    .attr("y",-10)
    .style("text-anchor","middle")
    .text("Benchmark")
    .style("fill","black")

svg.append("text")
    .attr("x",600)
    .attr("y",-10)
    .style("text-anchor","middle")
    .text("Threshold")
    .style("fill","black")

svg.append("text")
    .attr("x",-20)
    .attr("y",-10)
    .style("text-anchor","start")
    .text("Min. Performance")
    .style("fill","black")
    
     var circles = svg.selectAll(".g_top").selectAll(".circles").data(function(d){
       return [d];
     })
     
    circles.enter()
    	.append("circle")
	    .attr("class","circles")
    	.attr("cx", function(d){return Math.random()*600})
    	.attr("cy", function(d){return scaleBandY.bandwidth()/2;})
    	.attr("r",scaleBandX.bandwidth()/3)
    	.style("fill", "white")
    	.style("stroke","black")
    	.style("z-index",999)
    
  </script>
</body>

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

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

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

https://d3js.org/d3-scale-chromatic.v1.min.js