KnightD3 week 4 - adding scales - issue wih top padding

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
        
        body {
            background-color: #ddddff;
        }

svg {
            background-color: #C1C1CD;
        }
       
        rect.followers:hover {
            fill: #ADBFE5;
            }
            
        rect.friends:hover {
            fill: #D8D8D8;
            }
        
        .axis path, .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
		}
			
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
        
        .y.axis line, .y.axis path {
            opacity: 0
            }

</style>
    </head>
    <body>
              
        <script>
        
        Math.log10 = function(n) {
            if (n==0) {
                return 0
            } else { 
                return (Math.log(n)) / (Math.log(10))
            }}
            
        function exp(base, exponent) {
              exponent = Math.round(exponent);
              if (exponent == 0) {
                return 1;
              }
              if (exponent < 0) {
                return 1 / exp(base, -exponent);
              }
              if (exponent > 0) {
                return base * exp(base, exponent - 1)
              }
            }
            
        var width = 1000,
            height = 500
        
        var padding_left = 200
        var padding_right = 20
        var padding_top = 30
        var padding_bottom = 20
            
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
        
            var widthScale = d3.scale.linear()                            
                                .range([0,width - padding_left - padding_right]);
                            
            var heightScale = d3.scale.ordinal()
                                 .rangeRoundBands([ padding_top, height - padding_bottom ], 0.1);
                                      
            var xAxis = d3.svg.axis()
                        .scale(widthScale)
						.orient("bottom");
            
            var yAxis = d3.svg.axis()
                .scale(heightScale)
                .orient("left");
            
           
            
        d3.csv("tweeps_short.csv", function(data) {
            svg.append("text").text('lalla') 
                
            var max_followers_count = d3.max(data, function(d) { return parseInt(d.followers_count); });
            var max_friends_count = d3.max(data, function(d) { return parseInt(d.friends_count); });
            var max_fplusf = d3.max(data, function(d) { return parseInt(d.friends_count) + parseInt(d.followers_count); });
            var max_fplusf_log = d3.max(data, function(d) { return Math.log10(parseInt(d.friends_count)) + Math.log10(parseInt(d.followers_count)); });
                
            data.sort(function(a, b) {
				return d3.descending(+a.followers_count, +b.followers_count); // + signs because it makes ints from strrings
                });
            
            heightScale.domain(data.map(function(d) { return d.name } ));
            widthScale.domain([0,max_fplusf_log]);
            
            console.log(max_followers_count);
            console.log(max_friends_count);
            console.log(max_fplusf);
            console.log(max_fplusf_log);
            console.log(Math.pow(10, max_fplusf_log));
            console.log(exp(10, max_fplusf_log));
            console.log(Math.log10(max_friends_count));
            console.log(Math.log10(max_followers_count));

});
        
        
        
        </script>
    </body>
</html>

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

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