Man United Module 5

<!DOCTYPE html>
<html>
<head>
    <title>Omid Kashan &mdash; Module 5</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.y.axis {transform:translateY(300px);}
        
    </style>
</head>
<body>
    
    <div id="main">
        
        <h1>Manchester United</h1>
        <p>Wins per season since the start of the Premier League.</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={};
        window.onload = function() {
            d3.csv('data.csv',function(data) {
                //console.log(data);
                
                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;} );
                
                //console.log(min.gf,min.w);
                
                //scale.h = d3.scale.linear().domain([0,max/3]).range([dim.h,0]);   
                
                scale.x = d3.scale.linear().domain([min.w,max.w]).range([dim.h,0]);
                scale.y = d3.scale.linear().domain([Math.ceil(max.gf/100)*100,min.gf]).range([dim.w,0]);
                
                viz.attr('width',data.length*30);
                axis.x = d3.svg.axis().scale(scale.x).orient('left');
                axis.y = d3.svg.axis().scale(scale.y).orient('bottom');
                
                //group = viz.selectAll('g').data(data).enter().append('g').attr("transform", function(d, i) { return "translate(" + i*(bar.width + 1)+", 0)"; });
                
                group = viz.selectAll('g').data(data).enter().append('g');
                
                group.append('circle').attr('class','bar').attr('width', bar.width).attr('r',function(d) { return d.streak/2; }).attr("cy", function(d) {return scale.x(d.w); }).attr("cx", function(d) { return scale.y(d.gf); }).append('title').text(function(d) { return d.season + '\nWon '+d.w+'\nStreak '+d.streak+'\nScored '+d.gf+''; });
                
                //group.append('text').text(function(d) { return d.season; }).style("text-anchor", "middle").attr("y", function(d) { return max+10; }).attr('x',function(d) { return scale.h(0)-(dim.h+35); });             
                viz.append('g').attr('class','x axis').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 + 40).text("Goals scored per season");
                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("Matches won per season");
                
            });
        };

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

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

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