Man United Module 6

<!DOCTYPE html>
<html>
<head>
    <title>Omid Kashan &mdash; Module 6</title>
    <style type="text/css">
        * { box-sizing: border-box; font-family:sans-serif;}
        body, html, h1, h2, h3, h4, h5, h6, figure, blockquote, ul, ol, li, p {margin:0;padding:0}
        p {margin-bottom:50px;}
        #main {padding:20px;}
        h1 {font-weight: normal;}
        #viz {max-width:800px;height:200px;overflow:visible;margin-left:40px}
        svg g .bar+text {text-align: center;fill:black;transform: rotate(-90deg) translate(-120px,-75px);-webkit-transform:rotate(-90deg) translate(-120px,-75px);transform-origin: center center;-webkit-transform-origin:center center;fill:white;letter-spacing: 2px;}
        svg g rect, svg g circle, svg circle {fill:#F21212 ;transition:transform 0.2s ease-in-out;}
        svg g circle:hover {fill:black;stroke:#f21212;transition: all 0.2s linear;stroke-width:3;cursor: pointer;}
        svg g .bar+text {}
        svg .domain {display: none}
        svg text {font-size:11px;}
        svg .tick line {stroke:#aaa;transform:translateX(0)}
        svg g.x.axis {transform:translateY(300px);}
        svg g.x.axis text {transform:translate(-12px,25px) rotate(270deg);}
        svg .axis path, svg .x.axis path {display: none;}
        svg .line {fill: none;stroke-width: 2;}
        
        svg .line.line1 {stroke:#27ae60;}
        svg .line.line2 {stroke:#f21212;}
        
        .swatch {margin-right:10px;}
        .swatch:before {display: inline-block;width:16px;height:16px;content:"";margin-right:5px;position:relative;top:2px;}
        
        .swatch_for:before {background:#27ae60;}
        .swatch_against:before {background:#f21212;}
        
    </style>
</head>
<body>
    
    <div id="main">
        
        <h1>Manchester United</h1>
        <p>Wins per season since the start of the Premier League.
            <br /><br />
            
            <span class="swatch swatch_for">Goals for</span>
            <span class="swatch swatch_against">Goals against</span>
        
        </p>
        <svg id="viz"></svg>
    
    </div>  
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        
        var i=1,max={},min={},dim={w:600,h:300},viz = d3.select('#viz'),main=d3.select('#main'),bar={width:30},group,scale={},axis={},year,x,y,line,years=[];
        window.onload = function() {
            
            year = d3.time.format('%Y').parse;
            
            x = d3.time.scale().range([0,dim.w]);
            y = d3.scale.linear().range([dim.h,0]);
            
            axis.x = d3.svg.axis().scale(x).orient('bottom');
            axis.y = d3.svg.axis().scale(y).orient('left');    
            
            d3.csv('data.csv',function(data) {
                //console.log(data);

data.forEach(function(d) {
                
                    d.seasonStart = year(d.season.substring(0,4));
                    years.push(d.seasonStart);
                    //console.log(d.seasonStart);
                });
                
                
                max.w = d3.max(data, function(d) { return +d.w;} );
                max.gf = d3.max(data, function(d) { return +d.gf;} );
                
                min.w = d3.min(data, function(d) { return +d.w;} );                
                min.gf = d3.min(data, function(d) { return +d.gf;} );
                
                x.domain(d3.extent(data, function(d) { return d.seasonStart; }));
                y.domain([0,Math.ceil(max.gf/100)*100]);
                
                axis.x.tickValues(years);

line1 = d3.svg.line().x(function(d) { return x(d.seasonStart); }).y(function(d) { return y(d.gf); });
                line2 = d3.svg.line().x(function(d) { return x(d.seasonStart); }).y(function(d) { return y(d.ga); });
                
                viz.append("path").datum(data).attr("class", "line line1").attr("d", line1);
                viz.append("path").datum(data).attr("class", "line line2").attr("d", line2);                
                
                viz.append("g").attr("class", "x axis").attr("transform", "translate(0," + dim.h + ")").call(axis.x);
                viz.append('g').attr('class','y axis').call(axis.y);

viz.append("text").attr("class", "x label").attr("text-anchor", "middle").attr("x", dim.w/2).attr("y", dim.h + 60).text("Season start year");
                viz.append("text").attr("class", "y label").attr("text-anchor", "middle").attr('x',0-(dim.h/2)).attr("y", 10).attr("dy", "-50").attr("transform", "rotate(-90)").text("Goals scored per season");               
                
                
            });
            
        };

</script>
    
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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