D3 Examples - State Lotteries

State Lotteries

Lottery income per U.S. state in 2013. This income is divvied up into three places. Some goes to the prize winner, some pays for the cost of administering the lottery and the rest is government revenue. Several states don't administer lotteries: Alabama, Alaska, Hawaii, Mississippi, Nevada, Utah. Wyoming started up a lottery in July 2013 and isn't included here. The District of Columbia also runs a lottery but data isn't provided in the source data.

Notes:

West Virginia really gouges it's residents. Less than 20% of its lottery income goes to prize money and it has the fifth highest lottery income per person. Delaware and Rhode Island aren't much better.

Something weird is going on with the New Jersey data. The apportionments don't add up to the total lottery income (click the 'Share of Lottery Income' radio button). This is an issue with the source data.

I think the prize money shown here is taxed, both at the federal and state level. Assuming this is the case, government revenues from lotteries are effectively higher than the number shown here. This site, USA Mega, shows how the tax rates across states.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>State Lotteries</title>
    <style>
      body {
        font: 12px monospace;
      }
​
      .axis line,
      .axis path {
        fill: none;
        stroke: #000;
        stroke-width: 1px;
      }
​
      .y.axis path {
        display: none;
      }
​
      form {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <form>
      <label><input type="radio" name="variable" value="raw" checked="true"> Lottery Income</label>
      <label><input type="radio" name="variable" value="perCapita"> Lottery Income Per Capita</label>
      <label><input type="radio" name="variable" value="share"> Share of Lottery Income</label>
    </form>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
      var margin = { top: 30, left: 100, bottom: 30, right: 20 },
          width = 960 - margin.left - margin.right,
          height = 800 - margin.top - margin.bottom;
​
      var scale = {
        x: d3.scale.linear().range([0, width]),
        y: d3.scale.ordinal().rangeRoundBands([height, 0], 0.1),
        color: d3.scale.ordinal()
      };
​
      var hue = 60;
      var i = d3.interpolateHcl(d3.hcl(hue, 50, 80), d3.hcl(hue + 120, 75, 50));
      scale.color.range(["#cfa8b4",  "#79658c", "#1d2b64"]);
​
      var axis = {
        x: d3.svg.axis().scale(scale.x).orient("bottom"),
        y: d3.svg.axis().scale(scale.y).orient("left")
      };
​
      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 + ")");
​
      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
        .append("text")
          .attr("class", "label")
          .attr("x", width)
          .attr("y", -6)
          .style("text-anchor", "end");
​
      svg.append("g")
        .attr("class", "y axis");
​
      d3.json("data.json", function(error, data) {
        if (error) throw error; 
        
        var apportionment_names = d3.keys(data[2]).filter(function(key) { return key.startsWith("to"); });
​
        data = data.filter(function(d) { return d.income; });
        data.forEach(function(d) {
          // raw lottery income and apportionments
          var x0 = 0;
          d.apportionments = apportionment_names
            .map(function(name) {
              return { name: name, x0: x0, x1: x0 += d[name] };
            });
​
          // per-capita lottery income and apportionments
          var x0 = 0;
          d.apportionmentsPerCapita = apportionment_names
            .map(function(name) {
              return { name: name, x0: x0, x1: x0 += (d[name] / d.population) };
            });
          d.incomePerCapita = d.income / d.population;
​
          // lottery apportionments share of income
          var x0 = 0;
          d.apportionmentsShare = apportionment_names
            .map(function(name) {
              return { name: name, x0: x0, x1: x0 += (d[name] / d.income) };
            });
        });
​
        svg.call(render, data, "raw", 0);
​
        d3.select("form").on("change", function() {
          var variable = event.target.value;
          svg.call(render, data, variable, 1000);
        });
​
        function render(selection, data, variable, duration) {
          if (variable === "raw") {
            var sorter = function(a, b) { return a.income - b.income; },
                xMax = d3.max(data, function(d) { return d.income; }),
                dataAccessor = function(d) { return d.apportionments; },
                labelText = "Lottery Income";
            axis.x = axis.x.tickFormat(d3.format("$,"));
            scale.x.range([0, width]);
          }
          else if (variable === "perCapita") {
            var sorter = function(a, b) { return a.incomePerCapita - b.incomePerCapita; },
                xMax = d3.max(data, function(d) { return d.incomePerCapita; }),
                dataAccessor = function(d) { return d.apportionmentsPerCapita; },
                labelText = "Lottery Income Per Capita";
            axis.x = axis.x.tickFormat(d3.format("$.2r"));
            scale.x.range([0, width]);
          }
          else if (variable === "share") {
            var sorter = function(a, b) {
                  return a.apportionmentsShare[0].x1 - b.apportionmentsShare[0].x1;
                },
                xMax = d3.max(data, function(d) { return 1; }),
                dataAccessor = function(d) { return d.apportionmentsShare; }
                labelText = "Share of Lottery Income";
            axis.x = axis.x.tickFormat(d3.format(",%"));
            scale.x.range([0, width - 200]);
          }
​
          data.sort(sorter);
          scale.x.domain([0, xMax]);
          scale.y.domain(data.map(function(d) { return d.title; }));
          scale.color(apportionment_names);
​
​
          selection.select(".x.axis")
            .transition().duration(duration).call(axis.x)
              .select(".label")
              .text(labelText);
          selection.select(".y.axis")
            .transition().delay(duration).duration(duration).call(axis.y);
​
          var state = selection.selectAll(".state")
            .data(data, function(d) { return d.title; });
​
          state.enter().append("g")
            .attr("class", "state");
​
          state
            .transition().delay(duration).duration(duration)
              .attr("transform", function(d) {
                return "translate(0," + scale.y(d.title) + ")";
              });
​
          var rects = state.selectAll("rect").data(dataAccessor);
​
          rects.enter().append("rect");
​
          rects
            .transition().duration(duration)
              .attr("x", function(d) { return scale.x(d.x0); })
              .attr("width", function(d) { return scale.x(d.x1) - scale.x(d.x0); })
              .attr("height", scale.y.rangeBand())
              .style("fill", function(d) { return scale.color(d.name); });
​
          var legend = svg.selectAll(".legend")
              .data(apportionment_names);
​
          legend.enter().append("g")
              .attr("class", "legend")
              .attr("transform", function(d, i) {
                return "translate(0," + i*20 + ")";
              })
              .each(function(d) {
                var legendNames = {
                  "toProceedsAvailable": "To Government",
                  "toAdministration": "Administration Cost",
                  "toPrize": "To Prize Winner"
                };
​
                d3.select(this).append("rect")
                  .attr("x", width - 18)
                  .attr("y", 50)
                  .attr("width", 18)
                  .attr("height", 18)
                  .style("fill", scale.color);
​
                d3.select(this).append("text")
                  .attr("x", width - 24)
                  .attr("y", 50 + 9)
                  .attr("dy", ".35em")
                  .attr("text-anchor", "end")
                  .text(function(name) { return legendNames[name]; });
​
              });
        }
      });
    </script>
  </body>
</html>
​
    