interviewing.io: final comp

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

forked from enjalot's block: interviewing.io: mean vs stddev

forked from enjalot's block: interviewing.io: final comp

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    /* OPTIONAL STYLES */
    body { 
      margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
      font-family: Helvetica;
    } /* not necessary in blog, layout as desired */
    
    #chart {
      margin-top: 10px;
    }
    #chart svg { width:100%; height: 100% }
    .title {
      text-align: center;
      width: 100%;
    }
    #explanation {
      float:left; /* not necessary in blog, layout as desired */
      padding: 10px 0px;
      max-width: 380px;
    }
    .tick circle {
      fill-opacity: 0.4;
    }

/* THIS IS USED TO CALCULATE WIDTH OF CHART */
    #chart-container {
      width: 50%;
      height: 500px;
      float:left;
    }
    
    /* NECESSARY STYLES */
    span.highlighter {
      border-bottom: 1px dotted steelblue;
    }
    g.cell {
      cursor: pointer;
    }
    circle.node {
      pointer-events: none;
    }
    line.link {
      stroke: #a0a0a0;
      stroke-opacity: 0.2;
      stroke-width: 1;
      stroke-dasharray: 10 1;
      pointer-events: none;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

.axis text {
      font-family: sans-serif;
    }
    .yaxis text {
      font-size: 9pt;
    }
    .xaxis text {
      font-size: 18px;
    }
    .label {
      font-family: Helvetica;
      text-anchor: middle;
      font-size: 14px;
      fill: #444;
    }

rect.range {
      fill: #eee;
    }
  </style>
</head>

<body>
  
  <div id="chart-container">
    <h3 class="title">Standard Deviation vs. Mean of Interviewee Performance (n=67)</h3>
    <div id="chart"></div>
  </div>
  
  <div id="explanation">

    
    You can see everyone who has a <span class="highlighter" onmouseover="highlightHighDeviation();" onmouseout="clearHighlight();">high  deviation</span>
    <br>
    <br>
    
    low variation: <span class="highlighter" onmouseover="highlightLowDeviation()" onmouseout="clearHighlight();">23% (16/67) of interviewees</span> do score consistently across interviews and companies.
    <br>
    <br>
    You can see everyone who scored <span class="highlighter" onmouseover="highlightAtLeastOneScore(1);" onmouseout="clearHighlight();">at least one <span class="score">1</span></span> also scored <span class="score">3</span> or better on other interviews. Good people bomb too.
    <br>
    <br>
    Many people who scored <span class="highlighter" onmouseover="highlightAtLeastOneScore(4,2);" onmouseout="clearHighlight();">at least one <span class="score">4</span></span> also scored at least one <span class="score">2</span>.
    <br>
    <br>
    
    If we look at <span class="highlighter" onmouseover="highlightScoreRange(3.3,4);" onmouseout="clearHighlight();">high performers</span>, defined as people with a mean score of <span class="score">3.3</span> or higher we still see a fair amount of variation.
    <br>
    <br>
    Things get really murky when we consider <span class="highlighter" onmouseover="highlightScoreRange(2.6, 3.3);" onmouseout="clearHighlight();">"average" performers</span>, defined as people with a mean score between <span class="score">2.6</span> and <span class="score">3.3</span>.
    <br>
    <br>    
    Go ahead and <span class="highlighter" onmouseover="highlightAll();" onmouseout="clearHighlight();">expand everybody!</span>

<br><br>
    In the chart to the left every
    <svg width="10" height="10" viewBox="0 0 8 8">
      <path d="M4 0c-1.1 0-2 1.12-2 2.5s.9 2.5 2 2.5 2-1.12 2-2.5-.9-2.5-2-2.5zm-2.09 5c-1.06.05-1.91.92-1.91 2v1h8v-1c0-1.08-.84-1.95-1.91-2-.54.61-1.28 1-2.09 1-.81 0-1.55-.39-2.09-1z" />
    </svg>
    represents a person interviewing.io who has done 2 or more technical interviews. When you hover over a 
    <svg width="10" height="10" viewBox="0 0 8 8">
      <path d="M4 0c-1.1 0-2 1.12-2 2.5s.9 2.5 2 2.5 2-1.12 2-2.5-.9-2.5-2-2.5zm-2.09 5c-1.06.05-1.91.92-1.91 2v1h8v-1c0-1.08-.84-1.95-1.91-2-.54.61-1.28 1-2.09 1-.81 0-1.55-.39-2.09-1z" />
    </svg>
    all of that person's individual interview scores are represented with a
    <svg width=10 height=10>
      <circle r=4 cx=5 cy=5></circle>
    </svg>.
    People are colored by their mean score, with the color scale given by 
    <span class="score">1</span>,
    <span class="score">2</span>,
    <span class="score">3</span>,
    <span class="score">4</span>.
    
    
  </div>
  <script>

/*var meanLine = chartg.append("line").classed("mean-line", true)*/
      
    var yScale = d3.scale.linear()

var xScale = d3.scale.linear()
      .domain([1, 4])

d3.selection.prototype.moveToFront = function() {
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
    
    d3.json("interviews.json", function(err, interviewees) {
      //console.log(interviewees)
      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)
           
      yScale.domain([0, maxStddev])

var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .tickValues([1,2,3,4])
      .tickFormat(d3.format(".0n"))
      
      var xg = chartg.append("g").classed("axis", true)
      .classed("xaxis", true)
      .call(xAxis)
      
      xg.selectAll(".tick")
      .on("mouseover", function(d) {
        highlightScoreRange(ranges[d][0], ranges[d][1])
      })
      .on("mouseout", function() {
        unfade();
        clearForce();
      }).style({
        cursor: "pointer"
      })
      .insert("circle", "line")
      .attr({
        cx: 0,
        cy: 16,
        r: 12,
        fill: function(d) { return colorScale(d)}
      })

xg.selectAll(".tick").select("text")
      .attr({
        stroke: "#cfe0e7",    
        "paint-order":"stroke", 
        "stroke-width": 2,    
        "stroke-opacity": 1,    
        "stroke-linecap": "butt",   
        "stroke-linejoin": "miter"
      })

var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")

var yg = chartg.append("g").classed("axis", true)
      .classed("yaxis", true)
      
      var stdlabel = chartg.append("text").classed("label", true)
      .text("Standard deviation of interview score")
      
      var meanlabel = chartg.append("text").classed("label", true)
      .text("Mean interview score")

function render() {
        console.log("render", chartWidth, chartHeight)

yScale.range([chartHeight - margin.bottom, margin.top])
        xScale.range([margin.left, chartWidth - margin.right])

chart.style({
          width: chartWidth + "px",
          height: chartHeight + "px"
        })

//update axis
        xg.attr("transform", "translate(" + [0, chartHeight - margin.bottom + 10] + ")")
        .call(xAxis)
        yg.attr("transform", "translate(" + [margin.left - 20,-margin.top/2] + ")")
        .call(yAxis)
        stdlabel.attr("transform", "translate(" + [30, chartHeight/2 - margin.bottom/2] + ")rotate(-90)")
        meanlabel.attr("transform", "translate(" + [chartWidth/2 + margin.left/2, chartHeight - margin.bottom/2 + 5] + ")")

/*meanLine
        .attr({
          x1: function(d) { return xScale(3)},
          y1: function(d) { return margin.top - 20},
          x2: function(d) { return xScale(3)},
          y2: function(d) { return chartHeight - margin.bottom + 10},
          stroke: "#d1d1d1",
          "stroke-dasharray": "4 4"
        })*/
        
        // Interviewees Scatter Plot --------------------------------
        var meanSquares = chartg.selectAll("g.mean")
          .data(meanData, function(d) { return d.index})
        var mse = meanSquares.enter().append("g").classed("mean", true)
        mse.append("rect")
        mse.append("path")

meanSquares.attr({
          transform: function(d) {
            var off1 = d.offset % 3;
            off1 *= squareWidth;
            var off2 = Math.floor((d.offset-1)/3) * squareHeight;
            var x = xScale(d.mean) - off1 + squareWidth/2;
            var y = yScale(d.stddev) - squareHeight/2 - off2;
            return "translate(" + [x,y] + ")scale(" + scale + ")"
          },
        })
        meanSquares.select("rect")
        .attr({
          x: 0,
          y: 0,
          width: squareWidth/scale,
          height: squareHeight/scale,
          fill: "#fff",
          "fill-opacity": 0.5,
          
        })
        .on("click", function(d) {
          console.log("clicked", 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();
        })
        meanSquares.select("path")
          .attr({
          d: personIcon,
          "pointer-events": "none",
          fill: function(d) { return colorScale(d.mean)}
        })
        forceg.moveToFront();
      }      
      render(width, height);

function highlightAll() {
      fade();
      clearForce();
      chartg.selectAll("g.mean")
        .select("path")
        .attr(highlightAttr)
        .each(function(d){ 
          addForceNodes(d);
        })
    }

function unfade(d) {
      var selection = chartg.selectAll("g.mean")
      if(!d) {
        selection.select("path")
        .attr({
          opacity: 1,
          fill: function(c) { return colorScale(c.mean)}
        })
      } else {
      selection.filter(function(f) {
        if(f === d) {
            d3.select(this).select("path").attr({
              //opacity: 0.6,
              fill: function(c) { return colorScale(c.mean)}
            })
          }
        })
      }
    }
    function fade() {
      chartg.selectAll("g.mean").select("path").attr({
        fill: "#b7b7b7"
      })
    }

// FORCE LAYOUT -----------------------------------
    var xrange = xScale.range() 
    var width = Math.abs(xrange[1] - xrange[0]);
    var yrange = yScale.range();
    var height = Math.abs(yrange[0] - yrange[1]);

var forceg = chartg.append("g")
    .attr("transform", "translate(" + [0,0] + ")")

var force = d3.layout.force()
    .size([width, height])
    .gravity(0.0)
    .friction(0.89)
    .charge(-5)
    .linkStrength(0)
    .nodes([])
    .links([])
    force.start()

force.on("tick", function(e) {
      var k = 0.36 * e.alpha;
      var nodes = force.nodes();
      nodes.forEach(function(t,i) {
        t.x += (-t.x + t.targetX) * k;
        t.y += (-t.y + t.targetY) * k;
        if(t.interviewee){
          t.x = t.targetX + squareWidth/2;
          t.y = t.targetY;
        } 
      })
      forceg.selectAll("circle.node")
      .attr({
        cx: function(d) { return d.x  },
        cy: function(d) { return d.y  }
      })

forceg.selectAll("line.link")
      .attr({
          x1: function(d) { return d.source.x },
          y1: function(d) { return d.source.y },
          x2: function(d) { return d.target.x },
          y2: function(d) { return d.target.y },
        })

})

function clearForce() {
      forceg.selectAll("circle.node")
        .remove();
      forceg.selectAll("line.link")
        .remove();

force.links([])
      force.nodes([])
      
      chartg.select("rect.range").attr({
        width: 0, height: 0
      })
    }

function addForceNodes(interviewee) {
      var nodes = force.nodes();
      var links = force.links();
      //console.log("links", links)

var evenodd = interviewee.offset % 2
      var y = yScale(interviewee.stddev) - interviewee.offset * (1+squareHeight) - squareHeight/2
      var x = xScale(interviewee.mean) - squareWidth/2 + evenodd * squareWidth; 
      
      var off1 = interviewee.offset % 3;
      off1 *= squareWidth;
      var off2 = Math.floor((interviewee.offset-1)/3) * squareHeight;
      var x = xScale(interviewee.mean) - off1 + squareWidth/2;
      var y = yScale(interviewee.stddev) - squareHeight/2 - off2 + squareHeight/2;
      //console.log("X,Y", x,y)
      //generate links between mean "node" and
      var source = {
        index: interviewee.index,
        x: x,
        y: y,
        px: x,
        py: y,
        targetX: x,
        targetY: y,
        mean: interviewee.mean,
        stddev: interviewee.stddev,
        interviewee: true,
        opacity: 0,
      }
      nodes.push(source)

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: xScale(+d.score),
          targetY: y,
          mean: interviewee.mean
        }
        nodes.push(node)
        links.push({
          index: source.index + "-" + node.index,
          source: source,
          //source: 0,
          target: node
        })
      })

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();
    }
  </script>
</body>

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