Paid leave - punchcard

<!doctype html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
  body {
    font-family: sans-serif;
  }
  text {
    font-size: 16px;
    fill: #888;
  }
  path, line {
    stroke: #888;
  }
/*   circle {
    stroke: #bbb;
  } */
</style>
<body>
</body>
<script>
  // properties
  var margin = {top: 20, right: 30, bottom: 40, left: 150};
  var width = 960 - margin.left - margin.right;
  var height = 700 - margin.top - margin.bottom;

var yscale = d3.scalePoint();
  var xscale = d3.scaleLinear();
  var radius = d3.scaleSqrt();
  var color = d3.scaleOrdinal(d3.schemeCategory20c);

// a flat array of data values in country,year,value format
  var data_values = [];
  
  d3.csv('PaidLeaveOECD.csv', function(err, data) {
    if (err) { throw(error) }

console.log(data);
    console.log("columns", data.columns);

var countries = data.map(function(d) {
      return d.country;
    });

var years = data.columns.slice(1).map(function(d) {
      return +d; 
    });

// loop through every data value
    data.forEach(function(row) {
      years.forEach(function(year) {
        // adds a single value to the data_values array
        data_values.push({
          country: row.country,
          year: year,
          value: +row[year]
        });
      });
    });

// filter out non-numeric values
    // in a line chart, leave these in and use line.defined() from d3-shape
    data_values = data_values.filter(function(d) {
      return !isNaN(d.value);
    });

var data_extent = d3.extent(data_values.map(function(d) {
      return d.value;
    }));

// scales
    yscale
      .range([0,height])
      .domain(countries);

xscale
      .range([0, width])
      .domain(d3.extent(years));

radius
      .range([3, 9])
      .domain(data_extent);

color
      .domain(
        d3.range(7).map(function(d) {
          return d / 6 * data_extent[1];
        })
      )

var yaxis = d3.axisLeft()
      .scale(yscale);

var xaxis = d3.axisBottom()
      .tickFormat(function(d) { return d; })
      .scale(xscale);

var chart = d3.select("body")
      .append("div");

var svg = chart.append('svg')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
        .attr('transform', 'translate(' + [margin.left, margin.top] + ')')

svg.append("g")
      .call(yaxis);

svg.append("g")
      .attr("transform", "translate(0," + (height+8) + ")")
      .call(xaxis);

svg.append("g")
      .selectAll("circle")
      .data(data_values)
      .enter().append("circle")
      .attr("r", function(d) { return radius(d.value); })
      .attr("cy", function(d) { return yscale(d.country); })
      .attr("cx", function(d) { return xscale(d.year); })
      .attr("fill", function(d) { return color(d.country); })

gens.selectAll("circle")
      .data(function(d) { return d.values; })
      .enter().append("circle")
      .attr("r", function(d) { return radius(d.yield); })
      .attr("cy", 0)
      .attr("cx", function(d) { return xscale(d.year); })
      .attr("fill", function(d) { return color(d.gen); })
      .on("mouseover", function(d) {
        console.log(d.yield);
      });

console.log(nested);
    */
  });
</script>

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