D3 Examples - Canadian Inmate versus Ontario Minimum Wage changes over time

Canadian Inmate versus Ontario Minimum Wage changes over time

The maximum daily payment for Canadian inmates (for working in the CORCAN program) has been frozen at $6.90 since 1981 - when it was set to reflect 15 percent of the federal minimum wage. This interactive line graph illustrates that while minimum wage increased in Ontario, inmate pay has not increased to reflect this at all. Note: The Ontario daily wage data assumes an 8 hour work day.

This data was initially collected as part of a project investigating the injustices of Canada's prison systems. You can read the piece here: http://www.intersectionalanalyst.com/intersectional-analyst/2017/7/20/everything-you-were-never-taught-about-canadas-prison-systems

An interactive multi-line chart, code is forked and adapted from larsenmtl's code sample here, and built with blockbuilder.org

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <style>
    body {
      font: 10px sans-serif;
    }
​
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
​
    .x.axis path {
      display: none;
    }
​
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <script>
    var myData = "date  Inmate Maximum  Min Wage in ON\n\
19970101    6.9 54.8\n\
19980101    6.9 54.8\n\
19990101    6.9 54.8\n\
20000101    6.9 54.8\n\
20010101    6.9 54.8\n\
20020101    6.9 54.8\n\
20030101    6.9 54.8\n\
20040101    6.9 57.2\n\
20050101    6.9 59.6\n\
20060101    6.9 62\n\
20070101    6.9 64\n\
20080101    6.9 70\n\
20090101    6.9 76\n\
20100101    6.9 82\n\
20110101    6.9 82\n\
20120101    6.9 82\n\
20140101    6.9 88\n\
20150101    6.9 90\n\
20160101    6.9 91.2\n"
;
​
    var margin = {
        top: 20,
        right: 80,
        bottom: 30,
        left: 50
      },
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
​
    var parseDate = d3.time.format("%Y%m%d").parse;
​
    var x = d3.time.scale()
      .range([0, width]);
​
    var y = d3.scale.linear()
      .range([height, 0]);
​
    var color = d3.scale.category10();
​
    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
​
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
​
    var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.wage);
      });
​
    var svg = d3.select("body").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 + ")");
​
    var data = d3.tsv.parse(myData);
​
    color.domain(d3.keys(data[0]).filter(function(key) {
      return key !== "date";
    }));
​
    data.forEach(function(d) {
      d.date = parseDate(d.date);
    });
​
    var cities = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {
            date: d.date,
            wage: +d[name]
          };
        })
      };
    });
​
    x.domain(d3.extent(data, function(d) {
      return d.date;
    }));
​
    y.domain([
      0,
      d3.max(cities, function(c) {
        return d3.max(c.values, function(v) {
          return v.wage;
        });
      })
    ]);
​
​
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
​
    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Wage (daily maximum, in $)");
​
    var category = svg.selectAll(".category")
      .data(cities)
      .enter().append("g")
      .attr("class", "category");
​
    category.append("path")
      .attr("class", "line")
      .attr("d", function(d) {
        return line(d.values);
      })
      .style("stroke", function(d) {
        return color(d.name);
      });
​
    category.append("text")
      .datum(function(d) {
        return {
          name: d.name,
          value: d.values[d.values.length - 1]
        };
      })
      .attr("transform", function(d) {
        return "translate(" + x(d.value.date) + "," + y(d.value.wage) + ")";
      })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) {
        return d.name;
      });
​
    var mouseG = svg.append("g")
      .attr("class", "mouse-over-effects");
​
    mouseG.append("path") // this is the black vertical line to follow mouse
      .attr("class", "mouse-line")
      .style("stroke", "black")
      .style("stroke-width", "1px")
      .style("opacity", "0");
​
    var lines = document.getElementsByClassName('line');
​
    var mousePerLine = mouseG.selectAll('.mouse-per-line')
      .data(cities)
      .enter()
      .append("g")
      .attr("class", "mouse-per-line");
​
    mousePerLine.append("circle")
      .attr("r", 7)
      .style("stroke", function(d) {
        return color(d.name);
      })
      .style("fill", "none")
      .style("stroke-width", "1px")
      .style("opacity", "0");
​
    mousePerLine.append("text")
      .attr("transform", "translate(10,3)");
​
    mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
      .attr('width', width) // can't catch mouse events on a g element
      .attr('height', height)
      .attr('fill', 'none')
      .attr('pointer-events', 'all')
      .on('mouseout', function() { // on mouse out hide line, circles and text
        d3.select(".mouse-line")
          .style("opacity", "0");
        d3.selectAll(".mouse-per-line circle")
          .style("opacity", "0");
        d3.selectAll(".mouse-per-line text")
          .style("opacity", "0");
      })
      .on('mouseover', function() { // on mouse in show line, circles and text
        d3.select(".mouse-line")
          .style("opacity", "1");
        d3.selectAll(".mouse-per-line circle")
          .style("opacity", "1");
        d3.selectAll(".mouse-per-line text")
          .style("opacity", "1");
      })
      .on('mousemove', function() { // mouse moving over canvas
        var mouse = d3.mouse(this);
        d3.select(".mouse-line")
          .attr("d", function() {
            var d = "M" + mouse[0] + "," + height;
            d += " " + mouse[0] + "," + 0;
            return d;
          });
​
        d3.selectAll(".mouse-per-line")
          .attr("transform", function(d, i) {
            console.log(width/mouse[0])
            var xDate = x.invert(mouse[0]),
                bisect = d3.bisector(function(d) { return d.date; }).right;
                idx = bisect(d.values, xDate);
​
            var beginning = 0,
                end = lines[i].getTotalLength(),
                target = null;
​
            while (true){
              target = Math.floor((beginning + end) / 2);
              pos = lines[i].getPointAtLength(target);
              if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                  break;
              }
              if (pos.x > mouse[0])      end = target;
              else if (pos.x < mouse[0]) beginning = target;
              else break; //position found
            }
​
            d3.select(this).select('text')
              .text(y.invert(pos.y).toFixed(2));
​
            return "translate(" + mouse[0] + "," + pos.y +")";
          });
      });
​
  </script>
</body>
​
</html>
​
    