D3 Examples - Man United Module 4

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Omid Kashan &mdash; Module 4</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 {fill:#F21212 ;}
        svg g .bar+text {}
        svg .tick text{transform: translateX(-20px); }
        svg .domain {display: none}
        svg text {font-size:11px;}
        svg .tick line {stroke:#aaa;transform:translateX(-13px)}
    </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,dim={w:600,h:200},viz = d3.select('#viz'),main=d3.select('#main'),bar={width:30},max,group,scale={},axis={};
        window.onload = function() {
            d3.csv('data.csv',function(data) {
                console.log(data);
                
                max = d3.max(data, function(d) { return +d.w*3;} );
                scale.h = d3.scale.linear().domain([0,max/3]).range([dim.h,0]);                
                viz.attr('width',data.length*30);
                axis.h = d3.svg.axis().scale(scale.h).orient('left');
                group = viz.selectAll('g').data(data).enter().append('g').attr("transform", function(d, i) { return "translate(" + i*(bar.width + 1)+", 0)"; });
                group.append('rect').attr('class','bar').attr('width', bar.width).attr('height',function(d) { return scale.h(0) - scale.h(d.w); }).attr("y", function(d) { return (scale.h(d.w)) });
                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').call(axis.h);
                
            });
        };
​
    </script>
    
</body>
</html>
    