Earnings calendar

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; font: 14px sans-serif;}
  </style>
</head>

var width = 670,
    height = 2800,
    svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height),
    cent_line_x = width / 2 - 20,
    start_day = new Date(2017, 0, 1),
    end_day = new Date(2018, 3, 1),
    days = d3.timeDays(start_day, end_day),
		y = d3.scaleTime()
    	.range([10, height-10])
    	.domain(d3.extent(days, function(d) { return d; })),
    dateParser = d3.timeParse("%d/%m/%y");
    
// build up our queue
var q = d3.queue()
  .defer(d3.csv, 'earnings.csv')
  .await(visualize);

function visualize(errors, earnings) {
  
  //earnings = earnings.filter(function(d) { return d.Use === '1' })
  earnings.forEach(function (d) {
    d.date = dateParser(d.date)
    d.annual_salary = +d.annual_salary
  })
  earnings.sort(function(x, y){ return d3.descending(x.annual_salary, y.annual_salary) })
  months = days.filter(function(d) { return d.getDate() === 1 })

// build the annotations
  const makeAnnotations = d3.annotation()
  	.type(d3.annotationLabel) //annotationCalloutElbow
  	.notePadding(10)
    .annotations(annotations)

svg.append("line")
    .style("stroke", "#999")
    .attr("x1", cent_line_x)
    .attr("y1", y(start_day))
    .attr("x2", cent_line_x)
    .attr("y2", y(end_day));

// draw the day markers for 1st of tha month
  var day_markers = svg.selectAll("day_markers")
  	.data(months)
  .enter().append("line")
    .attr("x1", cent_line_x-3)
    .attr("y1", function(d) { return y(d); })
    .attr("x2", cent_line_x+3)
    .attr("y2", function(d) { return y(d); })
    .style("fill", "none")
    .style("stroke", '#222');
  
  var day_markers = svg.selectAll("day_markers")
  	.data(days)
  .enter().append("line")
  	// emphasise if it's the 1st of tha month...
    .attr("x1", function(d) {
      return d.getDate() === 1 ? cent_line_x-3 : cent_line_x-1;
    })
    .attr("y1", function(d) { return y(d); })
    .attr("x2", function(d) {
      return d.getDate() === 1 ? cent_line_x+3 : cent_line_x+1;
    })
    .attr("y2", function(d) { return y(d); })
    .style("fill", "none")
    .style("stroke", function(d) {
      return d.getDate() === 1 ? '#222' : "#999";
    });

var month_labels = svg.selectAll("month_labels")
  	.data(months)
  .enter().append("text")
    .attr("x", cent_line_x-15)
    .attr("y", function(d) { return y(d); })
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .attr("transform", null)
    .text(function(d) { return dateLabel(d); });

// append the annotations to our svg
  d3.select("svg")
    .append("g")
    .attr("class", "annotation-group")
    .call(makeAnnotations)
}

function col(category) {
  const cols = {
    1: '#E8336D',
    2: '#19323C',
    3: '#006477'
  }
  return cols[category]
}
    
function dateLabel(dt) {
  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return   monthNames[dt.getMonth()] + ' ' + dt.getDate();
}
    
function dollarLabels(num) {
  if (num >= 1000000) {
    return '$' + (num / 1000000).toFixed(1) + 'm'
  }
  return '$' + Math.round(num / 1000) + 'k'
}
  </script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js