D3 Examples - Paid leave

xxxxxxxxxx
 
<!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>
    