Employee statistics with D3

As probably most companies, we have lists of our employees with their names, entry date, leaving date and more. And once in a while we need graphical overviews of the number of people joining and leaving as well as the evolution of our overall staff numbers. In order to get this easily produced from our HR files, I created this little D3 scripts.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .bar rect {
    fill: steelblue;
  }

.barLeaving rect {
    fill: rgb(145, 152, 158);
  }

.bar text {
    fill: #fff;
    font: 10px sans-serif;
  }

.barLeaving text {
    fill: #fff;
    font: 10px sans-serif;
  }

.tooltip text {
    font: 10px sans-serif;
    text-align: left;
  }
</style>

<body>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script>
    /**
     * Tooltip taken from here: https://bl.ocks.org/mjfoster83/7c9bdfd714ab2f2e39dd5c09057a55a0
     */
    console.log('****** Starting to process ******');

var totalWidth = 1020,
      totalHeight = 600,
      animationDuration = 2000; // That's rather slow, show off mode ;)

var parseDate = d3.timeParse('%Y-%m-%d'), //"%m/%d/%Y %H:%M:%S %p"
      formatCount = d3.format(",.0f");

// Some vars that need to be global
    var tooltip;
    var tooltipText;

var margin = {
        top: 10,
        right: 30,
        bottom: 30,
        left: 30
      },
      width = totalWidth - margin.left - margin.right,
      height = totalHeight - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("align", "center")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("employees.csv", type, function (error, data) {
      if (error) throw error;

// Scaling our x axis
      var minTime = d3.min(data, function (d) {
        return d.Starting_day
      });
      var maxTime = d3.max(data, function (d) {
        return d.Starting_day
      });
      var x = d3.scaleTime()
        .domain([minTime, maxTime])
        .rangeRound([0, width]);

// Drawing the c axis
      var xAxis = d3.axisBottom(x);
      var bandSize = xAxis.tickSizeOuter() + xAxis.tickPadding();
      svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(-" + bandSize + "," + height + ")")
        .call(xAxis);

// Transforming the individual data entries to monthly bins
      var histogramJoining = d3.histogram()
        .value(function (d) {
          return d.Starting_day;
        })
        .domain(x.domain())
        .thresholds(x.ticks(d3.timeMonth));
      var binsJoining = histogramJoining(data);
      var histogramLeaving = d3.histogram()
        .value(function (d) {
          return d.Leaving_day;
        })
        .domain(x.domain())
        .thresholds(x.ticks(d3.timeMonth));
      var binsLeaving = histogramLeaving(data);

// And daily bins for the summed values
      var histogramSum = d3.histogram()
        .value(function (d) {
          return d.Starting_day;
        })
        .domain(x.domain())
        .thresholds(x.ticks(d3.timeDay));
      var binsSum = histogramSum(data);

// Create 2 scales: One for the joining/leaving bars, one for the total staff graph
      var yJoinAndLeave = d3.scaleLinear()
        .range([height, 0]);
      var ySummed = d3.scaleLinear()
        .range([height, 0]);

// Getting the yJoinAndLeave axis scaled
      var maxValue = d3.max(binsJoining, function (d) {
        return d.length;
      });
      var minValue = d3.min(binsLeaving, function (d) {
        return -d.length;
      });
      yJoinAndLeave.domain([minValue, maxValue]);

// Scaling the ySummed axis
      var minSummedValue = 0; // We start with a staff of 0
      var maxSummedValue = d3.max(data, function (d) {
        return summedValue(data, d.Starting_day)
      })
      ySummed.domain([minSummedValue, maxSummedValue]);

// Drawing the rectangles of joining staff
      var bar = svg.selectAll(".bar")
        .data(binsJoining)
        .enter().append("g")
        .attr("class", "bar");
      bar.append("rect")
        .attr("x", function (d) {
          return x(d.x0)
        })
        .attr("width", function (d) {
          return x(d.x1) - x(d.x0) - 1;
        })
        .attr("y", yJoinAndLeave(0))
        .attr("height", height - yJoinAndLeave(0 + minValue))
        .on("mouseover", function (d) {
          tooltip.style("display", null);
          d.oldStyle = d3.select(this).style("fill");
          d3.select(this)
            .style("fill", "orange");
          renderText(getTooltipText(d));
        })
        .on("mouseout", function (d) {
          tooltip.style("display", "none");
          d3.select(this)
            .style("fill", d.oldStyle);
        })
        .transition()
        .duration(animationDuration)
        .attr("y", function (d) {
          return yJoinAndLeave(d.length)
        })
        .attr("height", function (d) {
          return height - yJoinAndLeave(d.length + minValue);
        })

// Writing the no of cases in joining bars
      bar.append("text")
        .attr("dy", ".75em")
        .attr("y", function (d) {
          return yJoinAndLeave(d.length) + 6
        })
        .attr("x", function (d) {
          return x(d.x0) + (x(d.x1) - x(d.x0)) / 2;
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
          if (d.length == 0) return '';
          return formatCount(d.length);
        });

// Drawing the rectangles of leaving staff
      var barLeaving = svg.selectAll(".barLeaving")
        .data(binsLeaving)
        .enter().append("g")
        .attr("class", "barLeaving");
      barLeaving.append("rect")
        .attr("x", function (d) {
          return x(d.x0)
        })
        .attr("width", function (d) {
          return x(d.x1) - x(d.x0) - 1;
        })
        .attr("y", yJoinAndLeave(0))
        .attr("height", height - yJoinAndLeave(minValue))
        .on("mouseover", function (d) {
          tooltip.style("display", null);
          d.oldStyle = d3.select(this).style("fill");
          d3.select(this)
            .style("fill", "orange");
          renderText(getTooltipText(d));
        })
        .on("mouseout", function (d) {
          tooltip.style("display", "none");
          d3.select(this)
            .style("fill", d.oldStyle);
        })
        .transition()
        .duration(animationDuration)
        .attr("height", function (d) {
          return height - yJoinAndLeave(d.length + minValue);
        })

// Writing the no of cases in leaving bars
      barLeaving.append("text")
        .attr("dy", ".75em")
        .attr("y", function (d) {
          return yJoinAndLeave(0) + height - yJoinAndLeave(d.length + minValue) - 12;
        })
        .attr("x", function (d) {
          return x(d.x0) + (x(d.x1) - x(d.x0)) / 2;
        })
        .attr("text-anchor", "middle")
        .text(function (d) {
          if (d.length == 0) return '';
          return formatCount(d.length);
        });

// Draw the Y scale of summed numbers
      svg.append("g")
        .call(d3.axisLeft(ySummed))
        .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Staff");

// Drawing the line of staff size
      var sumLine = d3.line()
        .x(function (d) {
          return x(d.x0);
        })
        .y(function (d) {
          var summedValueData = summedValue(data, d.x0);
          return ySummed(summedValueData);
        });

svg.append("path")
        .datum(binsSum)
        .attr("fill", "none")
        .attr("stroke", "black")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 2.5)
        .attr("d", sumLine);

// Prep the tooltip, initial display is hidden
      tooltip = svg.append("g")
        .attr("class", "tooltip")

tooltipText = tooltip.append("text")
        .attr("x", 30)
        .attr("dy", "1.2em")
        .attr("z-index", 9999)
    });

// Calculates the staff size on a given day
    function summedValue(data, date) {
      var sum = d3.sum(data, function (d) {
        var value = 0;
        if (d.Starting_day <= date) value++;
        if (d.Leaving_day && d.Leaving_day <= date) value--;
        return value;
      })
      return sum;
    }

// Transforming date values to proper types when reading file
    function type(d) { // Reading the date in the format as they are in the CSV file
      d.Starting_day = parseDate(d.Starting_day);
      d.Leaving_day = parseDate(d.Leaving_day);
      return d;
    }

// Creates the text lines as tspans into the text element
    // Tabken from here: https://jarrettmeyer.com/2018/06/05/svg-multiline-text-with-tspan
    function renderText(textString) {
      tooltip.selectAll("tspan.text").remove();
      tooltipText.selectAll("tspan.text")
        .data(d => textString.split("\n"))
        .enter()
        .append("tspan")
        .attr("class", "text")
        .text(d => d)
        .attr("x", 20)
        .attr("dx", 10)
        .attr("dy", 22);
    }

// Create the text that will be displayed in the tooltip
    function getTooltipText(d) {
      var description = '';
      var separator = "\n";
      d.forEach(function (employee) {
        description += employee['Full_name'].trim() + separator;
      })
      description = description.substr(0, description.length - separator.length);
      console.log('Description: ' + description);
      return description;
    }
  </script>
</body>

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