D3 Examples - Exercise for Module 6

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Line Charts</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
​
​
        <style type="text/css">
​
            body {
                background-color: lightgrey;
            }
​
            svg {
                background-color: white;
            }
​
            circle:hover {
                stroke-width: 1px;
                r: 6;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
​
​
        </style>
​
​
​
    </head>
    <body>
​
        <p>Exercise for Module 6: Line Charts</p>
        <h2>Brazilian Soccer League (<span style="color:blue">Cruzeiro</span> vs. Corinthians)</h2>
        <p><em>From 2003 to 2014 (Divisions A and B aggregate)</span></em></p>
    
        <script type="text/javascript">
​
            var w = 800;
            var h = 700;
            var padding = [ 80, 40, 80, 80 ]; // T R B L
​
            var dateFormat = d3.time.format("%Y");
​
            var xScale = d3.time.scale()
                    .range([ padding[3], w - padding[1] ]);
​
            var yScale = d3.scale.linear()
                    .range([ padding[0], h - padding[2] ]);
​
            var xAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(13)
                .tickFormat(function(d) {
                    return dateFormat(d) })
                .orient("bottom");
​
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(25);
​
​
            var line = d3.svg.line()
                .x(function(d) {
                    return xScale(dateFormat.parse(d.Year));
                })
                .y(function(d) {
                    return yScale(d.RelPos);
                }); 
                
​
            var canvas = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
​
            d3.csv("BrazilianLeague_A_B_2003_2014.csv", function(data) {
​
​
                data.sort(function(a, b) {
                    return d3.ascending(a.Team, b.Team);
                });
​
            
            var Cruzeiro = data.slice(171,183);
            var Corinthians = data.slice(138,150);
​
            console.log(Cruzeiro);
            console.log(Corinthians);
​
            xScale.domain([
                d3.min(data, function(d) {
                    return dateFormat.parse(d.Year);
                }),
                d3.max(data, function(d) {
                    return dateFormat.parse(d.Year);
                })
            ]);
​
            yScale.domain([1, 25]);
​
//          var circle = canvas.selectAll("circle")
//                  .data(data)
//                  .enter()
//                  .append("circle");
//
//          circle.attr("cx", padding[0])
//              .attr("cy", h - padding[0])
//              .attr("r", .1)
//              .style("fill", function(d) {
//                  if (d.Division == "A") {
//                      return "lightgreen";
//                  } else {
//                      return "salmon";
//                  }
//              })
//              .attr("stroke", "black")
//              .attr("stroke-width", "0px")
//              .attr("onmouseover", "evt.target.setAttribute('r', '4');")
//              .attr("onmouseout", "evt.target.setAttribute('r', '3');")
​
//              .append("title")
//              .text(function(d) {
//                  return d.Team + " " + d.Year + " (" + d.PctPts * 100 + "% | " + d.aGF + ")";
//              });
​
//              circle.sort(function(a, b) {
//                  return d3.ascending(+a.Position, +b.Position);
//              })
//
//              circle.transition()
//                  .delay(function(d, i) {
//                      return i * 5;
//                  })
//                  .duration(1000)
//                  .attr("cx", function(d) {
//                  return xScale(dateFormat.parse(d.Year));
//              })
//                  .attr("cy", function(d) {
//                  return yScale(d.RelPos);
//              })
//                  .attr("r", 3);
​
​
            canvas.data([ Cruzeiro ])
                .append("path")
                .attr("class", "line")
                .attr("d", line)
                .attr("fill", "none")
                .attr("stroke", "Blue")
                .attr("stroke-width", 2);
                    
​
            canvas.data([ Corinthians ])
                .append("path")
                .attr("class", "line")
                .attr("d", line)
                .attr("fill", "none")
                .attr("stroke", "black")
                .attr("stroke-width", 2);                   
​
​
            canvas.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - padding[2]) + ")")
                .call(xAxis);
​
​
            canvas.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (padding[3] ) + ",0)")
                .call(yAxis);
​
            canvas.append("text")
                .attr("x", (w - padding[3]) * 0.5 + padding[3])
                .attr("y", h - (padding[0] * 0.5))
                .attr("text-anchor", "middle")
                .text("Year");
​
            canvas.append("text")
                .attr("x", 0)
                .attr("y", h * 0.5)
                .attr("text-anchor", "middle")
                .text("Position")
                .attr("transform", "rotate(-90, -60, 250)");
​
​
            });
        </script>
​
    </body>
</html>
​
    