MakeOver Monday, 2017, w29 - White House Salaries - iteration 2

This block is my attempt to vizualize data provided by Makeover monday, 2017, week 29, and is a continuation of a previous block.

Compared to the previous block, areas of circle also encode salaries. I don't know if it's a good idea. Please let me know on twitter.

Pros :

it strengthens differences between low salaries and high salaries
it hiighlights the relative weight of each salary with regards to the total.

Cons :

the salary is encoded twice (y-axis, radius)
it adds some space around low salaries, which is not quite understandable; I wanted this space in order to maintain a correct distribution (eg. 10 low salaries must take the same place as 10 high salaries);

Original readme

I use a beeswarm arrangement (cf. d3-beeswarm plugin) for several reasons. Firstly, because there is no overlapping, it allows the user to see each individual data, and hover a particular data to access to its details. Secondly, this kind of arrangement suits very well distributions. In this example, it highlights the differences between the two administrations, and shows that Trump's salaries seems to use a salary grid, as opposed to Obama's ones.

Acknowledgments to :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MakeOver Monday - White House Salaries</title>
    <meta name="description" content="MakeOver Monday, Obama's administration VS Trump's administration">
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://raw.githack.com/kcnarf/d3-beeswarm/master/build/d3-beeswarm.js"></script>
    <style>
      svg {
        background-color: rgb(250,250,250);
      }
      
      text {
        fill: grey;
      }
      text.tiny {
        font-size: 10pt;
      }
      text.light {
        fill: lightgrey
      }
      .text-background {
        fill: rgb(250,250,250);
        stroke: rgb(250,250,250);
        stroke-width: 3px;
      }
      
      line {
        stroke: lightgrey;
      }
      
      #header #title {
        letter-spacing: 15pt;
        font-weight: 200;
      }
      #header .name{
        font-size: 30pt;
      }
      #header .label{
        fill: lightgrey;
        font-size: 10pt;
      }
      
      #axis-container text {
        font-size: 8pt;
      }
      
      .Obama {
        stroke: blue;
      }
      .Trump {
        stroke: red;
      }
      
      circle {
        fill: transparent;
        stroke: transparent;
      }
      circle.Obama {
        fill: lightBlue;
      }
      circle.Trump {
        fill: pink;
      }
      
      .slope {
        stroke: grey;
      }
      
      div.tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 14px;
        padding: 2px;
        font: 12px sans-serif;
        background: rgb(250,250,250);
        color: grey;
        border: 1px solid grey;
        border-radius: 3px;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <svg></svg>
    
    <script>
      const WITH_TRANSITION = true;
    	const WITHOUT_TRANSITION = false;
    	const duration = 250;
      
      //begin: raw data global def
      var obamaSalaries = [],
          trumpSalaries = [];
      var obamaStaffCount = 0,
          trumpStaffCount = 0;
      var obamaTotalSalaries = 0,
          trumpTotalSalaries = 0;
      var salaryExtent, obamaSalariesExtent, trumpSalariesExtent;
      var obamaMeanSalary, trumpMeanSalary;
      var obamaMedianSalary, trumpMedianSalary;
      //end: raw data global def
      
      //begin: data-related utils
      function salaryAccessor (d){ return d.salary;};
      //end: data-related utils
      
      //begin: layout conf.
      var svgWidth = 960,
          svgHeight = 500,
          margin = {top: 10, right: 10, bottom: 10, left: 10},
          halfSpaceBetween = {header: 15, circle: 15, slope: 5},
          titleY = 10,
          nameY = 50,
          staffY = nameY+30,
          totalY = staffY+15,
          tillHeader = 15,
         	headerHeight = totalY + tillHeader + 5,
          footerHeight = 30,
          width = svgWidth - margin.left - margin.right,
          height = svgHeight - headerHeight - footerHeight - margin.top - margin.bottom,
          halfWidth = width/2,
          halfHeight = height/2,
          quarterWidth = width/4,
          quarterHeight = height/4;
      //end: layout conf.
      
      //begin: beeswarm conf.
      var beeRadius = 3;
      var yPosScale = d3.scaleLinear();
      var radiusScale = d3.scalePow().exponent(0.5);
      var salariesArrangement, obamaArrangement, trumpArrangement;
      //end: beeswarm conf.
      
      //begin: reusable d3Selection
      var svg, drawingArea, header, footer, axisContainer, avgContainer, medianContainer, circleContainer, tooltip;
      //end: reusable d3Selection
      
      d3.csv("whiteHouseSalaries.csv", csvParser, function(error, data) {
        if (error) throw error;
        
        obamaSalariesExtent = d3.extent(obamaSalaries, salaryAccessor);
        trumpSalariesExtent = d3.extent(trumpSalaries, salaryAccessor);
        salariesExtent = [Math.min(obamaSalariesExtent[0], trumpSalariesExtent[0]),
                        Math.max(obamaSalariesExtent[1], trumpSalariesExtent[1])];
        
        obamaMeanSalary = Math.round(obamaTotalSalaries/obamaSalaries.length);
        trumpMeanSalary = Math.round(trumpTotalSalaries/trumpSalaries.length);
        
        obamaMedianSalary = d3.median(obamaSalaries, salaryAccessor);
        trumpMedianSalary = d3.median(trumpSalaries, salaryAccessor);
        
        yPosScale.domain(salariesExtent).range([height,0]);
        radiusScale.domain(salariesExtent).range([0.5, beeRadius])
        
        /*
        console.info("Obama");
        console.info("  count: "+obamaStaffCount);
        console.info("  total: "+obamaTotalSalaries);
        console.info("  mean : "+obamaMeanSalary);
        console.info("  median : "+obamaMedianSalary);
        console.info("Trump");
        console.info("  count: "+trumpStaffCount);
        console.info("  total: "+trumpTotalSalaries);
        console.info("  mean : "+trumpMeanSalary);
        console.info("  median : "+trumpMedianSalary);
        */
        
        initLayout();
        drawBeeswarm();
        drawMeans();
        drawMedians();
      });

Updated missing url https://raw.githack.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js to https://raw.githack.com/kcnarf/d3-beeswarm/master/build/d3-beeswarm.js

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

https://raw.githack.com/Kcnarf/d3-beeswarm/master/build/d3-beeswarm.js