D3 Examples - VBP Mock Up

xxxxxxxxxx
 
<!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>
​
    