Problems with creating a y axis in d3

I'm having some significant difficulties getting my y axis to appear on my graph. You'll have to forgive me because I'm a relative beginner at this, and my code is probably not up to par with some standards. Hopefully some of you are up to the challenge of helping me out with this. I've gotten the x axis to work out just fine with my xscale, and when I append it I see it at the bottom. The y axis is not working though, and I can't for the life of me figure out how to get my y axis to appear. What am I doing wrong? My xScale and yScale are the two first scales, and I try to append the axes at the bottom. Thanks in advance for any help with this.

<!DOCTYPE html>
<html>
<head>
    <title> Digital Humanities Latin Graph</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="graph">
</div>

<script type="text/javascript">



        var romandataset= [ {"year": 1800, "freq": 10.45 },
                    {"year": 1850, "freq": 9.49 },
                    {"year": 1900, "freq": 7.16 },
                    {"year": 1950, "freq": 6.28 },
                    {"year": 2000, "freq": 5.25 },
                    {"year": 2008, "freq": 5.18 } ];

        var greekdataset= [     {"year": 1800, "freq": 9.1 },
                    {"year": 1850, "freq": 7.86 },
                    {"year": 1900, "freq": 7.07 },
                    {"year": 1950, "freq": 8.00 },
                    {"year": 2000, "freq": 8.43 },
                    {"year": 2008, "freq": 8.49} ];

        var padding = 200
        var w = 1100
        var h = 800




        var xScale = d3.scale.linear()
                .domain([1800, 2010])
                .range([padding, w - padding])



        var yScale = d3.scale.linear()
                .domain([5.00, 11.00])
                .range([h - padding, padding])

        var romancolorscale = d3.scale.linear()
                .domain([3.00, 11])
                .range(["white", "blue"])

        var radiusscale = d3.scale.linear()
                .domain([5.18, 10.45])
                .range([10, 20])


        var greekcolorscale = d3.scale.linear()
                .domain([3.00, 12.00])
                .range(["white", "green"])

        var xAxis = d3.svg.axis()
                .scale(xScale)
                .ticks(6);

        var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);


            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

            svg.selectAll("circle") 
             .data(romandataset)                           
             .enter()
                     .append("circle")
                 .attr("cx", function (d) {return xScale(d.year) })
                     .attr("cy", function (d) {return yScale(d.freq) })
                     .attr("r", function (d) {return radiusscale(d.freq) })
                     .style("stroke", "gray")
             .style("fill", function (d) { return romancolorscale(d.freq)});


            svg.selectAll("rect")
                .data(greekdataset)
            .enter()
            .append("circle")

            .attr("cx", function (d) {return xScale(d.year) })
                    .attr("cy", function (d) {return yScale(d.freq) })
                    .attr("r", function (d) {return radiusscale(d.freq) })
                    .style("stroke", "gray")
            .style("fill", function (d) { return greekcolorscale(d.freq)});

            svg.append("g")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis)
            .orient[("bottom")];

            svg.append("g")
                .attr("class", "axis")
             .attr("transform", "translate(" + padding + ",0)")
                 .call(yAxis);



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

Solution

You're trying to orient the appended g element for the x axis, which gives an error and the following code (which would draw the y axis) isn't executed.

Simply remove the last line from

svg.append("g")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis)
        .orient[("bottom")];

and put it where the axis is defined:

var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(6);

(You also don't need the square brackets around it.)

Working code (that needs more work) here.