D3 Examples - English Premier League Visualization

English Premier League Visualization - Interactive

English Premier League 03-04

English Premier League (03-04) W/L data. I’m an Arsenal fan and my team accomplished an undefeated season in 03-04 so I choose this set ;) URL / Downloadable CSV

This line chart is about the North London rivals Arsenal(red) and Tottenham(blue) league points from week 1 to week 38 (Arsenal 90 points in week 38 and Tottenham 45 points).

General update pattern resize function inspired by connieGao0819’s Block

This interactive vis use highlighting as technique, hover on line, the selected team will increase stroke width. Inspired from tarazhu's block.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
​
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 2px;
}
​
svg {
    padding-top: 10px;  
    padding-left: 30px;
}
​
</style>
<body>
<div id="chart"></div>
​
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
    var chartDiv = document.getElementById("chart"),
        svg = d3.select(chartDiv).append("svg"),
        xAxis = svg.append("g"),
        yAxis = svg.append("g"),
        g = svg.append("g");
​
    function mouseOver(id) {
        d3.selectAll("#" + id)
        .style("opacity", 1.0)
        .style("stroke-width", 4);
    }
​
    function mouseOut(id) {
        d3.selectAll("#" + id)
        .style("opacity", 0.8)
        .style("stroke-width", 2);
    }
​
    function redraw() {
​
      var chartDivWidth = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
          chartDivHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
​
      // set the dimensions and margins of the graph
      var margin = {top: 20, right: 20, bottom: 30, left: 50},
          width = chartDivWidth - margin.left - margin.right,
          height = chartDivHeight - margin.top - margin.bottom;
​
      // set the ranges
      var x = d3.scaleLinear().range([0, width]),
          y = d3.scaleLinear().range([height, 0]);
​
      // define the 1st line
      var valueline = d3.line()
          .x(function (d) {
              return x(d.Week);
          })
          .y(function (d) {
              return y(d.Tottenham);
          });
​
      // define the 2nd line
      var valueline2 = d3.line()
          .x(function (d) {
              return x(d.Week);
          })
          .y(function (d) {
              return y(d.Arsenal);
          });
​
      svg
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");
​
      // Get the data
      d3.csv("resultByWeek.csv", function (error, data) {
          if (error) throw error;
​
          // format the data
          data.forEach(function (d) {
              d.Week = +d.Week;
              d.Tottenham = +d.Tottenham;
              d.Arsenal = +d.Arsenal;
          });
​
          // Scale the range of the data
          x.domain(d3.extent(data, function (d) {
              return d.Week;
          }));
          y.domain([0, d3.max(data, function (d) {
              return Math.max(d.Tottenham, d.Arsenal);
          })]);
​
          var pathTottenham = g.selectAll("#Tottenham").data([data]),
              pathArsenal = g.selectAll("#Arsenal").data([data]);
​
          pathTottenham.exit().remove();
          pathArsenal.exit().remove();
​
          // Add the valueline path.
          pathTottenham
            .enter()
              .append("path")
              .data([data])
              .style("opacity", 0.8)
              .attr("class", "line")
              .attr("id", "Tottenham")
            .merge(pathTottenham)
              .attr("d", valueline)
              .on("mouseover", function(d){
                  mouseOver(this.id)
              })
              .on("mouseout", function(d){
                  mouseOut(this.id);
              });
​
          // Add the valueline2 path.
          pathArsenal
            .enter()
              .append("path")
              .data([data])
              .style("opacity", 0.8)
              .attr("class", "line")
              .attr("id", "Arsenal")
              .style("stroke", "red")
            .merge(pathArsenal)
              .attr("d", valueline2)
              .on("mouseover", function(d){
                  mouseOver(this.id)
              })
              .on("mouseout", function(d){
                  mouseOut(this.id);
              });
​
          // Add the X Axis
          xAxis
            .merge(xAxis)
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));
​
          // Add the Y Axis
          yAxis
            .merge(yAxis)
              .call(d3.axisLeft(y));
​
      });
​
    }
​
    redraw();
    window.addEventListener("resize", redraw);
​
</script>
</body>
    