interviewing.io: mean vs stddev

forked from enjalot's block: interviewing.io: mean lines

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    path {
      fill: none;
      stroke-width: 3;
      stroke-opacity: 0.4;
    }
    line.legend {
      stroke: #c4c4c4;
      stroke-width: 1;
    }
    g.cell {
      cursor: pointer;
    }
    
    circle.node {
      pointer-events: none;
    }
    line.link {
      stroke: #efefef;
      stroke-dasharray: 18 2;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    
    var chartg = svg.append("g").attr({
      transform: "translate(0, -50)"
    })
    
    var legendX = 50;
    var legendY = 29;
    var linesX = 0;
    var linesY = 134;
    var squareWidth = 10;
    var squareHeight = 10;
    d3.json("interviews.json", function(err, interviewees) {
      //console.log(interviewees)
      
      function ranges(mean) {
        if(mean <= 4 && mean >= 3.5) {
          return 4;
        } else if(mean < 3.5 && mean >= 2.75) {
          return 3;
        } else if(mean < 2.75) {
          return 2;
        }
      }
      
      var matches = {};
      var meanData = []     ; interviewees.forEach(function(interview, index) {
        var mean = d3.mean(interview);
        var stddev = d3.deviation(interview);
        var points = interview.map(function(score,i) {
          return {
            score: score,
            mean: mean,
            index: index
          }
        })
        points.mean = mean;
        points.stddev = stddev;
        points.index = index;
        
        // we have several interviewees
        var key = (Math.floor(mean*1000)/1000) + "::" + (Math.floor(stddev*1000)/1000);
        
        var match = matches[key];
        if(!match) matches[key] = 0;
        matches[key] += 1;
        points.offset = matches[key];
        
        meanData.push(points)
      })
      
      var maxMean = d3.max(meanData, function(d) { return d.mean });
      //console.log("maxMean", maxMean)
      var maxStddev = d3.max(meanData, function(d) { return d.stddev });
      //console.log("maxStddev", maxStddev)
      
      var xScale = d3.scale.linear()
      .domain([0, maxStddev])
      .range([150, 700])
      
      var yScale = d3.scale.linear()
      .domain([1, 4])
      .range([500, 100])
      
      var colorScale = d3.scale.linear()
      .domain([1, 2, 3, 4])
      .range(["#ff0f5f", "#e63ba8", "#ba48d9", "#267fd3"])
      
      
     
      svg.append("g")
        .attr("class", "legendOrdinal")
        .attr("transform", "translate(" + [legendX, legendY] + ")");

var legendScale = d3.scale.linear()
      .domain([4,3,2,1])
      .range(colorScale.range().reverse())
      var legendOrdinal = d3.legend.color()
        .shapeWidth(40)
        .shapeHeight(40)
        .shapePadding(94)
        .cells(4)
        .scale(legendScale);

svg.select(".legendOrdinal")
        .call(legendOrdinal);
      
      
      chartg.selectAll("line.legend").data(d3.range(4).reverse())
      .enter().append("line").classed("legend", true)
      .attr({
        x1: function(d) { return linesX + xScale.range()[0]},
        y1: function(d) { return yScale(d) - linesY},
        x2: function(d) { return linesX + xScale.range()[1]},
        y2: function(d) { return yScale(d) - linesY},
      })
      
      
      var meanSquares = chartg.selectAll("rect.mean")
        .data(meanData, function(d) { return d.index})
      meanSquares.enter().append("rect").classed("mean", true)
      
      
      meanSquares.attr({
        x: function(d) { return xScale(d.stddev ) + d.offset * (1+squareWidth)},
        y: function(d) { return yScale(d.mean) - squareHeight/2 },
        width: squareWidth,
        height: squareHeight,
        fill: function(d) { return colorScale(d.mean)}
      }).on("click", function(d) {
        console.log("clicked", d);
        fade();
        unfade(d);
        clearForce();
        addForceNodes(d);
      }).on("mouseover", function(d) {
        console.log(d.index, d.mean, d.stddev);
        fade();
        unfade(d);
        clearForce();
        addForceNodes(d);
      })
      .on("mouseout", function(d) {
        unfade();
        clearForce();
      })
      
      chartg.append("text")
      .text("deviants")
      .attr({
        "font-size": "32px",
        "font-family": "Open Sans, Helvetica, san-serif",
        x: 495,
        y: 438,
        "paint-order":"stroke",
        stroke: "#cfe0e7",
        "stroke-width": 8,
        "stroke-opacity": 0.3,
        "stroke-linecap": "butt",
    		"stroke-linejoin": "miter",
        "cursor":"pointer"
        
      }).on("mouseover", function() {
        fade();
        clearForce();
        chartg.selectAll("rect.mean")
          .filter(function(d) { return d.stddev > 0.7072})
          .attr({
            opacity: 0.6,
            fill: function(c) { return colorScale(c.mean)}
          })
          .each(function(d){ 
            addForceNodes(d);
          })
      }).on("mouseout", function() {
        unfade();
        clearForce();
      })
      
      legendOrdinal.on("cellover", function(category){
        fade();
        chartg.selectAll("rect.mean")
        .filter(function(d) {
          var hasCat = false;
          d.forEach(function(i) {
            if(i.score == category) hasCat = true;
          })
          return hasCat;
        })
        .attr({
            opacity: 0.6,
            fill: function(c) { return colorScale(c.mean)}
          })
          .each(function(d){ 
            addForceNodes(d);
          })
      }).on("cellout", function() {
        unfade();
        clearForce();
      })

interviewee.forEach(function(d,i) {
          var sx = x + 10 * Math.random() + Math.random();
          var sy = y + 10 * Math.random() + Math.random();
          var node = {
            index: interviewee.index + "-" + i,
            px: sx,
            py: sy,
            x: sx,
            y: sy,
            targetX: x,
            targetY: yScale(+d.score),
            mean: interviewee.mean
          }
          nodes.push(node)
          links.push({
            index: source.index + "-" + node.index,
            source: source,
            //source: 0,
            target: node
          })
        })
        //console.log("nodes", nodes);
        
        
          
          var lines = forceg.selectAll("line.link")
            .data(links)
          lines.enter().append("line").classed("link", true)
          
          var circles = forceg.selectAll("circle.node")
            .data(nodes, function(d) { return d.index })
          circles.enter().append("circle").classed("node", true)

circles.attr({
            "pointer-events": "none",
            r: 4,
            opacity: function(d) {
              if(d.opacity || d.opacity === 0) return d.opacity;
              return 1;
            },
            fill: function(d) { return colorScale(d.mean)}
          })
          
          
          
          
          force.links(links)
          force.nodes(nodes);
          force.start()
          
          circles.exit().remove();
       
      }
      
      
      //addForceNodes(meanData[1])
      
    })
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.8.0/d3-legend.min.js