Major League Soccer attendance history

The complete history of regular season Major League Soccer attendance. Toronto FC kinda saved the league's bacon huh?

Clubs that no longer exist are colored in light gray. I am counting both instances of the San Jose Earthquakes as a single club, with a gap in the data in 2006 and 2007 to account for the years in between the original Earthquakes (who moved to become Houston Dynamo in 2006) and the new expansion Earthquakes who began in 2008.

Current up to the 2015 season, updated on 18 May 2016.

Credits: this code was adapted from Mike Bostock's stacked bar chart. The data is from Wikipedia. The font is Roboto Mono.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px 'Roboto Mono';
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700' rel='stylesheet' type='text/css'>
<body>
  <h1>MLS attendance history</h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 70, bottom: 30, left: 40},
    width = window.innerWidth - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .domain(['CHI','CHV','COL','CLB','DAL','DCU','HOU','LA','MIA','MON','NE','NYC','NYRB','OC','PHI','POR','RSL','SJ','SEA','KC','TB','TOR','VAN'])
     .range(['red','Gainsboro','DarkRed','yellow','red','black','orange','LightSeaGreen','Gainsboro','blue','navy','skyblue','red','purple','DarkGoldenRod','darkgreen','DarkRed','blue','LimeGreen','skyblue','Gainsboro','red','navy']);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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 + ")");

d3.csv("mls.csv", function(error, data) {
  if (error) throw error;

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Season"; }));

data.forEach(function(d) {
    var y0 = 0;
    d.club = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.club[d.club.length - 1].y1;
  });

console.log(data);

// data.sort(function(a, b) { return b.total - a.total; });

x.domain(data.map(function(d) { return d.Season; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

var Season = svg.selectAll(".Season")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.Season) + ",0)"; });

Season.selectAll("rect")
      .data(function(d) { return d.club; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .attr("data-club", function(d) {return d.name;})
      .style("fill", function(d) { return color(d.name); })
      .on("mouseover", function(d, i) {console.log(d);
        svg.selectAll("rect").style("opacity", "0.2");
        svg.selectAll("[data-club=" + d.name + "]").style("opacity", "1");
      })
      .on("mouseout", function(d, i) {
        svg.selectAll("rect").style("opacity", "1");
      });;

var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(50," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .attr("data-club", function(d) {return d;})
      .style("fill", color)
      .on("mouseover", function(d, i) {console.log(d);
        svg.selectAll("rect").style("opacity", "0.2");
        svg.selectAll("[data-club=" + d + "]").style("opacity", "1");
      })
      .on("mouseout", function(d, i) {
        svg.selectAll("rect").style("opacity", "1");
      });

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

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