Major League Soccer

Major League Soccer season data (1996 - 2015)

I originally wanted to do a ranked bump chart but ended up finding the point spread to be more interesting/legible.

How To:

Hover over a point to view data for that club/season.
Click on a point to highlight all data points for that club.

Sources:

Data scraped from http://www.mlssoccer.com/standings/mls
Most colors are from http://teamcolors.arc90.com/

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

///////////////////////
// Parse the Data
d3.csv("data.csv", function(data) {

// add a css safe class for use in hover interactions and coloring
  data.forEach(function(d) {
    d['class'] = d['club'].toLowerCase().replace(/ /g, '-').replace(/\./g,'');
  })

///////////////////////
  // Chart Size Setup
  var margin = { top: 35, right: 0, bottom: 30, left: 70 };

var width = 960 - margin.left - margin.right;
  var height = 500 - margin.top - margin.bottom;

var chart = d3.select(".chart")
      .attr("width", 960)
      .attr("height", 500)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

///////////////////////
  // Scales
  var x = d3.scale.ordinal()
      .domain(data.map(function(d) { return d['year']; }))
      .rangePoints([25, width - 15]);

var y = d3.scale.linear()
      .domain([d3.min(data, function(d) { return d['points'] }) / 1.1, d3.max(data, function(d) { return d['points']; }) * 1.05])
      .range([height, 0]);

var size = d3.scale.linear()
      .domain(d3.extent(data, function(d) { return d['goals_for']; }))
      .range([3, 10]);

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

var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

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

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

///////////////////////
  // Title
  chart.append("text")
    .text('MLS: Points per Season (hover over a dot to focus, click to keep focus)')
    .attr("text-anchor", "middle")
    .attr("class", "graph-title")
    .attr("y", -10)
    .attr("x", width / 2.0);

chart.append("text")
    .text('Points Per Season')
    .attr("text-anchor", "middle")
    .attr("class", "graph-title")
    .attr("y", -35)
    .attr("x", width / -4.0)
    .attr("transform", "rotate(-90)");

///////////////////////
  // Points
  var point = chart.selectAll(".point")
      .data(data)
    .enter().append("circle")
      .attr("class", "point")
      .attr("cx", function(d) { return x(d['year']); })
      .attr("cy", function(d) { return y(d['points']); })
      .attr('fill', 'blue')
      // replace spaces with - and remove '.' (from d.c. united)
      .attr("class", function(d) { return d['club'].toLowerCase().replace(/ /g, '-').replace(/\./g,'') })
      .attr("r", function(d) { return size(d['goals_for']) })
      .attr('opacity', '0.4');

///////////////////////
  // Tooltips
  var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip");

point.on("mouseover", function(d) {
        chart.selectAll('.'+d['class'])
            .classed('active', true);

var tooltip_str = "Club: " + d['club'] +
                "<br/>" + "Year: " + d['year'] +
                "<br/>" + "Points: " + d['points'] +
                "<br/>" + "W/L/T: " + d['wins'] + " / " + d['losses'] + " / " + d['ties'] +
                "<br/>" + "Goals F/A: " + d['goals_for'] + " / " + d['goals_against'];

if(d['alias'] != '') {
          tooltip_str += "<br/>(aka: " + d['alias'] + ")";
        }

tooltip.html(tooltip_str)
            .style("visibility", "visible");
      })
      .on("mousemove", function(d) {
        tooltip.style("top", event.pageY - (tooltip[0][0].clientHeight + 5) + "px")
            .style("left", event.pageX - (tooltip[0][0].clientWidth / 2.0) + "px");
      })
      .on("mouseout", function(d) {
        chart.selectAll('.'+d['class'])
            .classed('active', false);

tooltip.style("visibility", "hidden");
      })
      .on('click', function(d) {
        chart.selectAll('.'+d['class'])
            .classed('click-active', function(d) {
              // toggle state
              return !d3.select(this).classed('click-active');
            });
      })

});
</script>

<style>

.click-active {
  opacity: 1.0;
  z-index: 1000;
  r: 8;
}

.active {
  opacity: 1.0;
  z-index: 1000;
  r: 8;
}

.axis text {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

.tooltip {
  position: absolute;
  padding: 10px;
  font: 12px sans-serif;
  background: #222;
  color: #fff;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0.9;
  visibility: hidden;
}

/* soccer team colors */
/* https://teamcolors.arc90.com/ */
.chicago-fire {
  fill: #AF2626;
  stroke: #0A174A;
}
.colorado-rapids {
  fill: #91022D;
  stroke: #85B7EA;
}
.columbus-crew-sc {
  fill: #FFDB00;
  stroke: #000000;
}
.dc-united {
  fill: #DD0000;
  stroke: #000000;
}
.fc-dallas {
  fill: #CF0032;
  stroke: #07175C;
}
.houston-dynamo {
  fill: #F36600;
  stroke: #85b7EA;
}
.la-galaxy {
  fill: #00245D;
  stroke: #FFD200;
}
.montreal-impact {
  fill: #122089;
  stroke: #7A878F;
}
.new-england-revolution {
  fill: #0A2141;
  stroke: #D80016;
}
.new-york-city-fc {
  fill: #6CADDF;
  stroke: #00285E;
}
.new-york-red-bulls {
  fill: #FFFFFF;
  stroke: #D50031;
}
.orlando-city-sc {
  fill: #633492;
  stroke: #FDE192;
}
.philadelphia-union {
  fill: #B18500;
  stroke: #348AE1;
}
.portland-timbers {
  fill: #004812;
  stroke: #EBE72B;
}
.real-salt-lake {
  fill: #F2D11A;
  stroke: #A50531;
}
.san-jose-earthquakes {
  fill: #0051BA;
  stroke: #000000;
}
.seattle-sounders-fc {
  fill: #4F8A10;
  stroke: #11568C;
}
.sporting-kansas-city {
  fill: #91B0D5;
  stroke: #002B5C;
}
.toronto-fc {
  fill: #D80016;
  stroke: #313F49;
}
.vancouver-whitecaps-fc {
  fill: #12264C;
  stroke: #85B7EA;
}

/* defunct teams :( */
.tampa-bay-mutiny { /* Using tampa bay rays colors */
  fill: #092C5C;
  stroke: #8FBCE6;
}
.miami-fusion { /* Using miami marlins colors */
  fill: #0077C8;
  stroke: #FFD100;
}
.cd-chivas-usa {
  fill: #FFF;
  stroke: #0A2141; /* blue of new england and ny red bulls */
}

</style>

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